אוסף קישורים מעניינים ב-CSS על מגוון נושאיו – SASS, גבולות, פינות, תזוזות של אלמנטים, ועוד שפע דברים.
- Codepen של סליידרי התקדמות (progress bars) עם פאטרנים ב-SVG. עברו עם העכבר כדי לראות אותם מתמלאים
- Codepen של עיצוב חמוד לקישורים שלא הוכנס בהם ערך ל-href. מצוין לבדיקות בשלב הפיתוח, אבל קצת פחות מתאים לפרודקשן 😉
- אם מתחשק לכם להוסיף קצת אקשן לעיצוב האתר שלכם, קריס קויר כתב פוסט קצר איך לגרום לתמונות רקע לזוז לפי מעבר עכבר. זה CSS משולב עם קצת JavaScript.
- בראד פרוסט חוקר את השאלה אם לקנן סלקטורים ב-SASS באופן כזה ששם של קלאס למעשה יחולק לאבא ולבן – למשל בקלאס
c-btn__iconיחולק ל-c-btnו-&__icon.
היתרונות באי-קינון הם: חיפוש קל (אם מחפשים את הקלאסc-btn__icon, מוצאים אותו בקלות רבה); שזה קריא יותר; שזה לא תלוי ב-SASS; ושומר על שטיחוּת (כי קל מאוד להשתגע עם קינונים ב-SASS). החסרונות הם חזרתיות (חוזרים על סלקטור האב כמספר הסלקטורים הילדים), ושזה מכיל יותר מילים (verbose).
היתרונות בקינון, לעומת זאת, הם הפוכים מהחסרונות באי הקינון; והחסרונות הם, בנוסף לקושי בחיפוש והעמקת ההיררכיה, שקל לאבד קונטקסט.
מה בראד עצמו עושה? מתברר שפעם הוא היה מקנן, וכיום כבר לא. מוזמנים לקרוא את הפוסט שלו כדי להרחיב בכל נקודה ביתרונות ובחסרונות, וכן כדי להבין את הרציונל מאחורי ההחלטה להחליף שיטה. - MDN הכינו “ספר מתכונים” לביצוע פעולות נפוצות כגון מירכוז, פוטרים דביקים, דפדוף, ועוד. כל מתכון מכיל כמובן את ה-CSS וה-HTML, ומעבר לכך הוא נותן גם הסברים לשיטות שנבחרו, שיטות אלטרנטיביות, ותמיכת דפדפנים. מעניין מאוד.
- איזה תוכן מותר להכניס במאפיין ה-content? מאמר ב-css-tricks סוקר תכנים שונים: ערכים מתוך מאפייני HTML – מותר; מספרים (לא בתוך מחרוזת אלא מספרים סתם) – אסור; שרשור מחרוזות לא עובד עם פלוס ולא עם נקודה, אבל כן עובד עם רווחים; אפשר לשים תמונה, אבל אי אפשר לשנות לה את הממדים. קריאה קצרה ומעניינת.
- מכירים את הסרטון של ליאה ורו על border-radius, בשם The Humble Border-Radius? אז יש עכשיו אתר שנותן לשחק עם כל חלקיקי הערכים שהמאפיין יכול לקבל, והתוצאות משעשעות ומפתיעות. תהנו!
- רייצ’ל אנדרו במאמר על ההתייחסות שלנו ל-CSS, לפי צורת הדיבור עליו. פעם CSS היה שפה בלתי מפותחת במיוחד, ונאלצנו להתחכם בכל מיני דרכים כדי להשיג את העיצוב שביקשנו. אבל בשנים האחרונות CSS התפתחה מאוד ונהייתה מורכבת מחלקים רבים. למרות ההתפתחות הזאת, רייצ’ל עדיין רואה מפתחים שמנסים להתחכם, או לעקוף את הספסיפיקציות של מאפיינים מסוימים, כי אותם מפתחים מרגישים שהספסיפיקציות הן “מוזרות”. רייצ’ל מאמינה שכשמפתח מרגיש כך, עליו לבדוק מדוע הספסיפיקציה היא כזאת. אחרת אנחנו מנציחים את התודעה ש-CSS היא שפה נחותה, ושממעטים בערכם של מפתחי CSS.
- Codepen של עיצובים מעניינים לציטוטים, חלקם קצת מונפשים. ואם רוצים רעיונות לעיצובי ציטוטים אבל בלי קוד, חפשו בפריפיק quote.
- Codepen של מגרש משחקים למאפיין ה-border. אפשר להגדיל ולהקטין, לעוות, לשנות את נקודת מפגש הגבולות, והכל עם ויזואליזציה הן של השינויים בתצוגה והן של השינויים בקוד.
