בפוסטים האחרונים אני מנסה לצמצם את כמות הקישורים כדי שהם יהיו בכמות שניתנת לעיכול. ברם אולם, אני חושבת שאצטרך לחרוג קצת מהמנהגהזה כשמדובר בקישורי CSS – פשוט, יש רבים כל כך שלא אעמוד בקצב. מקווה שתצליחו לעכל גם ככה.
תולדות ה-clearfix
טבעו של CSS הוא שכשאלמנט מקבל מאפיין float, האלמנט שמכיל אותו מקבל גובה 0. זה מפני שה-float מוציא את האלמנט מה-flow, ולמעשה מבחינת האלמנט המכיל, האלמנט עם ה-float לא קיים. זה כמובן יכול ליצור מלא בעיות, ולכן נוצר פתרון מאולתר ויצירתי (hack): קלאס בשם clearfix, שניתן לאלמנט המכיל, ומאפשר לו “להכיר” את האלמנט שבתוכו גם כשיש לאלמנט float (לעוד הסבר על float-ים). הפוסט החביב הזה ב-Css Tricks מספר את תולדות ה-clearfix: בהתחלה היו בקלאס הזה מאפיינים מוזרים, אחרי זה הם נהיו עוד יותר מוזרים, אבל בשנים האחרונות, עם פרוץ מאפייני תצוגה חדשים כמו grid, flexbox ו-flow-root, קורים שני דברים: 1) הנחיצות של clearfix פוחתת, 2) המאפיינים שלו דווקא נהיים נורמלים 🙂 .
עיצוב מבוסס כמות
מאמר מ-css tricks נותן דוגמאות לתכנות לוגי ב-CSS שמדגים עיצוב מבוסס תנאים לוגיים. למשל כשאלמנט הוא ריק. או למשל, כשרוצים עיצוב מבוסס כמות פריטים. זה מתבסס קצת על המאפיין <a href="https://leketshibolim.ort.org.il/%d7%91%d7%93%d7%99%d7%a7%d7%aa-nth-child/">nth-child</a>, אבל מתקדם יותר. ובסוף יש הפניות למאמרים נוספים בעניין.
הגדרות פלקסבוקס בהנפשה
מדריך מונפש ל-flexbox – מראה מה קורה לאלמנטי ה-flex בכל הגדרה ובכל הרזולוציות. מה שמונפש הוא הירידה ברזולוציות.
יישור בפלקסבוקס
רייצ’ל אנדרו כתבה מדריך יסודי לכל נושא היישור (alignment) בפלקספבוקס : גם של המאפיינים שמתחילים ב-justify- וגם אלה שמתחילים ב-align-. חוץ מזה היא עונה על שאלות כמו למה אין justify-self, איך להשתמש ב-margin: auto בפלקסבוקס, ושימוש במילות המפתח safe ו-unsafe.
וכמובן תצוגות ויזואליות של כל ערך במאפיינים.
פשוט לכתוב
היא אמנם מכוונת לכתיבה באופן כללי אבל נותנת דוגמאות ממאמריה על CSS, ולכן המאמר הזה של שרה סווידאן, בו היא מדרבנת בלוגרים פשוט לכתוב, נמצא בקטגוריית CSS. והיא קנתה אותי בזה שהיא הפסיקה להתעניין בסטטיסטיקות הקריאה של הבלוג שלה ולכן הסירה את Google Analytics.
מגרשי משחקים למאפייני CSS
מגרשי משחקים למאפייני CSS. אתר שלם עם מגרשי משחקים שאפשר בהם להתנסות במאפייני CSS כמו box-shadow, transform, gradient שמשחקים בהם ע”י הזזה של סליידרים, או פלקסבוקס (ע”י בחירה מקומבו), ועוד הרבה. גם לו זה נעצר כאן זה היה מעולה, אבל הקטע היפה הוא שהאתר הזה מאפשר לכל אחד ליצור מגרש משחקים משלו!
אתגר יצירת רקעים בעזרת CSS בלבד
אתגר יתר: ליצור רקעים מדליקים ב-CSS תוך שימוש באלמנט ה-body בלבד!
עמודי 404
ב-codepen מציבים בכל חודש אתגר עיצובי, ובסוף האתגר יש עמוד אוסף של כל המשתתפים. בחודש ספטמבר האתגר היה עיצוב עמודי סטטוס HTTP. השבוע הראשון היה עיצוב דפי שגיאה 404 ובשאר השבועות האתגרים היו שגיאות 500, 403 ו-408. עמודי 404 יפים תמיד עניינו אותי, אבל לאחרונה יש עוד היבט שהתחלתי להסתכל עליו, בעקבות קבוצת פייסבוק שהצטרפתי אליה: מיקרו-קופי. (מה זה מיקרו-קופי? מתוך וויקיפדיה: אלה המילים שבהם משתמשים במוצרים דיגיטליים – כגון אתרים, אפליקציות וכד’ – הקשורות ישירות לפעולה של המשתמשים (ההנעה שלפני הפעולה, ההנחיות הניתנות למשתמשים תוך כדי הפעולה, התגובות שמקבלים המשתמשים אחרי שביצעו את הפעולה). רשימה חלקית של המרכיבים שבהם משתמשים במיקרו-קופי: כפתורים, הודעות שגיאה, הודעות אישור, טפסים ועוד.”. כלומר, חוץ מלהיות יפה, עמוד ה-404 צריך גם לשרת את הגולש ולהיות רלוונטי עבורו באתר בו הוא נמצא כעת. אז קבלו גם עמודי 404 שמהווים השראה מבחינת מיקרו-קופי.
חוץ מזה, הנה אתר שמספק איורים לדפי 404, עם משפט שמקשר בין האיור לשגיאה. למשל, תמונה של כוס שבורה, ומשפט “This page is broken”.
CSS כיפי במעבר עכבר על קישורים
אפקטים מעניינים במעבר עכבר. למשל, מראים שם איך להשתמש ב-svg מונפש בתור תמונות רקע במעבר עכבר. מגניב.
