משתנים ב-CSS – מה הם פותרים, יישומים מעניינים ועוד

CSS variables, או CSS Custom Properties, הם נושא די מדובר לאחרונה. כשראיתי שהצטברו אצלי הרבה קישורים בנושאי משתנים ב-CSS, איגדתי אותם פה בפוסט משלהם.

1. ליה ורו כתבה מדריך מפורט מאוד למשתמש על משתני CSS. היא מתחילה עם הסבר קצר על מה הם משתנים, ממשיכה בשאלה אילו דפדפנים תומכים בהם ואיך להשתמש בערכי גיבוי (fallback), ובמה הם שונים ממשתני פרי-פרוססים. החלק הזה הוא ארוך ומפורט מפני שיש הבדלים רבים – הן מבחינת תחום השליטה (scope) והן מבחינת השלב בו מחושבים הערכים שלהם. אחרי זה היא מדגימה איך משתנים חוסכים כפילויות ומעודדים כמיסה (encapsulation). בסוף היא מדברת על צבעים וירושה. כמובן הכול מלווה בדוגמאות.
2. CodyHouse מספרים איך ב-CSS שלהם היו להם הגדרות ל-grid-gap שהשתנו לפני גדלים, וזה יצר קובץ CSS גדול. הם החליטו להמיר את זה לשימוש במשתנים וצמצמו משמעותית את כמות השורות. טריק קטן ומגניב.
3. מעבר לכוח הידוע שיש כשמשתמשים במשתנים, ישנו גם כוח ה-scope, שלעתים שוכחים ממנו. CSS-Tricks בפוסט שמזכיר את העוצמה הנוספת של משתנים מההיבט הזה.
4. פוסט של אלעד שכטר על שימוש במשתני CSS כדי ליצור גוונים בצבעים, עם הסבר על צבעי HSL ולמה הם עדיפים לשימוש.
5. הפוסט הזה מעניין לא רק מפני שהוא מראה דרך יצירתית להשתמש במשתנים, אלא מפני שהתוצאה מעוררת התפעלות: יצירת פלטות של צבעים מתוך שני צבעי יסוד באמצעות שימוש במשתני CSS, צבעי HSL ו-calc().
6. הפוסט הזה מראה שבעה שימושים במשתני CSS: פונקציות צבע, מאפייני shrothand, ערכים חוזרים, חישובים מורכבים, אנימציות מדורגות, גרידים רספונסיביים ותחיליות-ספק (Vendor prefixes).
7. שרה סוודיאן על סגנון בעזרת משתנים. שרה מספרת על בניית מהלך העבודה שלה (workflow). היא מתחילה עם קובץ הגדרות SCSS, עוברת לבניית ספריית קומפוננטות UI, ומשתפת במבנה תיקיות הקוד שלה. מאחר שבקומפוננטות שלה יש דברים קבועים שמשתנים, כגון פונטים וצבעים, היא יצרה למאפיינים האלה משתנים כדי שאפשר יהיה בקלות לשנות אותם.
8. עוד פוסט של ליה ורו: מיקום היברידי עם משתנים ו-max. ליה רצתה אלמנט שמתנהג כאילו יש לו position: absolute כשהוא בטווח הראייה, ו-position: fixed אחרי זה. היא מספרת על שיטות שהיא פסלה ואז מסבירה איך היא עשתה את זה עם משתנים ועם פונקציית max().
9. בפוסט אבל הם ייכשלו אם לא תהיה להם גיבוי מסביר המחבר איך עובד הדפדפן כשהוא נתקל במאפיין שהוא לא מכיר, ושיטות שונות להתמודד עם זה, למשל עם supports(), או, אם מדובר רק בהגדרות מעטות, אז עם מדיה קוורי של color-gamut.
10. פוסט קצר שמדגים ומסביר איך לתכנת את CSS להשתמש בצבעי SASS
11. ב-CSS Tricks כתבו פוסט על שימוש ב-custom proerty כדי לבנות stack כדי לאלף את ה-cascade. המחברת מסבירה איך לבנות אגודת הגדרות (stack) עם משתנים, ולשלוט בהם באמצעות תחום שליטה.
12. להחליף משתני CSS עם כפתורי רדיו
13. האם משתני CSS הם “תפריט של מה אפשר לשנות“?