- תצוגת גרף עמודים תלת מימדית, צבעונית ומונפשת. תעברו עם העכבר על הגרף כדי לראות את ההנפשה. הגרף למעשה בנוי עם JavaScript, כשה-HTML הוא רק div אחד.
- דמו פלקסבוקס שמאפשר לשנות מאפיינים ולראות את התוצאה מיידית.
- אתר שמאגד רכיבים שאפשר לממש באמצעות CSS בלבד, בלי JavaScript: למשל סליידר, לייטבוקס (lightbox), תפריט נפתח, חלון מודֶל (פופ אפ). מתחת לכל מימוש כתוב אם השימוש שלו מתאים לפרודקשן, ואם לא – מה חסר בו.
- תצוגה של כל האופציות של המאפיין object-fit.
- איך לקרוא צבעים בהקסה. הפוסט הזה הוא מצגת של הרצאה שהעביר דוד דסנדרו בכנס dotCSS 2018. הפוסט מכיל גם את תמלול ההרצאה, וזה מה שנחמד בה.
המרצה מספר איך הוא, בתור עיוור צבעים, נאלץ ללמד את עצמו לפענח קודי הקסה של צבעים כדי לדעת באיזה צבע מדובר (הוא מספר שהוא התפלא מאוד לגלות שאנשים שאינם עיוורי צבעים לא יודעים לעשות את זה). בהרצאה ובפוסט שלו הוא מסביר איך לפרק את הקוד לשלות מרכיביו – אדום, ירוק וכחול – ולגלות מאפייני צבע לפי הערך של כל אחד משלושת המרכיבים. זה מעניין מאוד לגלות כמה מידע יש בידינו, ולא ידענו (לפחות אני לא). - ספר אינטרנטי חינמי על יצירת אנימציות ב-CSS מאת דונובן הצ’ינסון. ספר לא ארוך, והעובדה שהוא אינטרנטי מאפשרת לראות את האנימציות בתוכו, וזה אחלה.
- מאמר של אנה טיודור על שימוש חכם במשתני CSS. הפוסט מראה איך שינוי של משתנה אחד מאפשר לשלוט בדברים מורכבים. מצד שני, זה מאמר קצת ארוך ומורכב, ועלולים ללכת בו לאיבוד. מרכבות וכניסה לפרטים הם מהמאפיינים הברורים של פוסטים של אנה טיודור. היא בהחלט מכוונת למיטיבי לכת.
- יצרן גרדיאנטים משוכלל: צורות, חזרתיות, נקודות עצירה – הכל בשליטה של סליידרים וכפתורי רדיו, ובסוף מקבלים את ה-CSS.
- מבוא ל-Object Model של CSS, ואיך פונים אליו מתוך JavaScript – למשל פנייה למאפיין style של אלמנט מתוך JS; קבלת הערך המחושב (computed style) של מאפיין CSS; קבלת הערך של פסאודו אלמנט; ועוד ועוד. המאמר נמצא ב-CSS Tricks ונכתב ע”י לואיס לזרוס שכותב את הניוזלטר Web Tools Weekly.
- רייצ’ל אנדרו כתבה מדריך פיענוח לקריאת מאפיין בספסיפיקציה (spec).
קריאה ב-spec היא מתאגרת כי הדברים לא כתובים בצורה קריאה וקולחת, אלא לפי כללי כתיבה של מסמך תיעוד. לפעמים זה נראה קשה מדי לפענוח ולכן מפתחים עלולים להעדיף שלא לקרוא שם כלל, וזה חבל, כי זה המסמך הכי אמין בנושא CSS ברשת. לכן רייצ’ל אנדרו לקחה על עצמה משימה, לנסות להנגיש את הקריאה ב-spec וזאת על ידי הדגמת קריאה ופענוח של מאפיין CSS אחד. היא לוקחת כדוגמה אתgrid-auto-rowsועוברת על כל הגדרה שלו, כולל חפירה לעומק ומעבר לקישורים. הפוסט ארוך מאוד, ואם אתם לא עמודים לבצע את זה לא צריך לקרוא הכל, אבל כדאי לפחות להתחיל כי המתודה עצמה היא מעניינת. - יש פסאודו אלמנט בשם lang, ששונה מהמאפיין lang. הפוסט הזה מסביר מה ההבדל ביניהם ולמה הפסאודו אלמנט עדיף על פני המאפיין.
- 3 מאפייני css שלפעמים שוכחים:
- השילוב עם האח (מתאים כשרוצים לתת בורדר רק למי שיש לו אלמנט אחריו)
- תגיות ה-
<summary> & <details> - תגית ה-
<progress>
- אלעד שכטר כתב על המאפיין
position:sticky. מסתבר שהמאפיין הזה קיים כבר כמה שנים אבל מפתחים ממעטים להשתמש בו מפני שההתנהגות שלו לפעמים לא מובנת. אלעד החליט לכתוב פוסט שמסביר את החלקים הלא-מובנים, לרווחת כולנו: אלמנט שמקבל את המאפיין position: sticky מתנהג כמו אלמנט בעל position:fixed, אבל רק בתוך האלמנט שמכיל אותו. הוא יכול להידבק לראש או תחתית, לפי הערך שניתן למאפיין הנלווה top או bottom. - נכון יש כל שנה סקר JavaScript גדול? אז החל מהשנה אותם אנשים גם יצרו את סקר ה-CSS הגדול. 10 דקות. אני עניתי, ואתם?
