מדריך מקיף ל-CSS Variables

ללא צורך בקימפול, עם תמיכה די רחבה ותחביר נוח, CSS Variables הוא חידוש מרהיב שכל מפתח Web חייב להכיר.
שנתחיל?

אז מה זה CSS Variables?

CSS Variables (שם נוסף: CSS Custom Properties) הוא תחביר ליצירת משתנים במסמך CSS.
השימוש ב-CSS Variables מאפשר לנו ליצור משתנה שהערך שלו חוזר על עצמו מספר פעמים במסמך, ובכך במקום להזין את הערך בכל פעם, נזין את שם המשתנה. המשמעות היא שכאשר נרצה לשנות את הערך (למשל צבע טקסט), נשנה אותו פעם אחת והערך ישתנה בכל המקומות באופן אוטומטי.

רגע, זה מוכר לי!

נכון, שימוש במשתנים אפשרי כבר ממזמן כאשר משתמשים ב-LESS או SASS (ואפילו כתבתי אחלה מאמר בנושא: SASS: פונקציות שימושיות שכדאי לכם להכיר), אבל ישנו הבדל משמעותי, השימוש ב-CSS Variables אינו מצריך תהליך קומפילציה, המסמך נשאר כפי שהוא וכך הדפדפן מפענח אותו.
מצד אחד מדובר ביתרון שכן תהליך הכתיבה פשוט וקצר יותר, מצד שני, דפדפנים אשר לא תומכים ב-CSS Variables ייגרמו לשיבושים (אפרט על התמיכה ממש עוד כמה שורות).
כאשר כותבים ב-LESS או SASS המסמך מקופל ל-CSS רגיל לגמרי והערכים פשוט מוזנים במקום המשתנים עצמם, תהליך הקומפילציה עלול לסרבל מעט את תהליך העבודה (במיוחד שרק רוצים לעדכן משהו קטן) אך מצד שני מספק תמיכת דפדפנים מלאה.

תמיכה

תמיכת הדפדפנים ב-CSS Variables מרשימה, הדפדפנים המודרניים תומכים באופן די מספק.
IE אינו תומך.
תוכלו לראות את הפירוט המלא של הדפדפנים הנתמכים כאן.

הגענו לקוד!

אז איך כותבים CSS Variables? די פשוט.
כל משתנה צריך לקבל את הקידומת – – לפני שמו, כך:

--myVarName

אך מלבד הקידומת, יש לדעת כי כל משתנה חייב להיכתב בתוך selector שבו הוא יקבל תוקף.
על מנת ליצור משתנה אשר יקבל תוקף ויאפשר להשתמש בו בכל המסמך, נכתוב אותו בתוך selector בשם root:, זה נראה כך:

:root {
    --main-color: black;
}

ועכשיו ניתן להשתמש בו איפה שנרצה באמצעות var, כך:

.div p {
    color: var(--main-color);
}

יצירת משתנים בתוך selector ספציפי

כמובן שלא חייב ליצור משתנים תחת root:, ניתן ליצור אותם גם תחת selector ספציפי, למשל:

.mainBox {
    --main-background-color: #DCDCDC;
}

אך חשוב לזכור, כאשר יוצרים משתנה בתוך selector ספציפי, הוא יקבל תוקף אך ורק בתוך selector זה.
קוד שיעשה קצת סדר:

קוד ה-HTML:

<div class="mainBox">
    <p>MainDiv Text</p>
</div>

<footer>
    <p>Footer Text</p>
</footer>

קוד ה-CSS:

.mainBox {
    --mainBox-background-color: gray;
    --mainBox-links-color: white;
    background-color: var(--mainBox-background-color);
    color: var(--mainBox-links-color);
}

footer {
    background-color: var(--mainBox-background-color);
    color: var(--mainBox-links-color);
}

אז מה יקרה? וודאי שכל כללי העיצוב שקשורים ל-mainBox יעבדו ואילו ה-footer לא יקבל שום כלל עיצובי מאחר והמשתנים נוצרו תחת הסלקטור mainBox בלבד.
וודאי שבמידה והמשתנים היו נוצרים תחת root: גם ה-footer היה מקבל את כללי ה-CSS.

דריסת משתנים

ניתן "לדרוס" משתנים, מה הכוונה? הקוד הבא יסביר את זה בצורה הטובה ביותר 🙂

קוד ה-HTML:

<header>
    Header Text
</header>

<p>
    Some Text
</p>

קוד ה-CSS:

:root {
    --bg-color: blue;
    --text-color: white;
}
body {
   background-color: var(--bg-color);
   color: var(--text-color);
}
header {
    --bg-color: black;
    background-color: var(--bg-color);
    color: var(--text-color);
}

וזוהי התוצאה:

אז מה קרה כאן?
ב-root הוגדרו שני משתנים, צבע רקע (bg-color) וצבע טקסט (text-color).
ב-body וב-header הייתה "קריאה" למשתנים אלו אך ב-header צבע הרקע הוא שחור ולא כחול, מדוע? מכיוון שתחת סלקטור זה המשתנה bg-color הוגדר מחדש תחת ערך חדש, ולכן באלמנט header ובכל האלמנטים תחתיו המשתנה bg-color יהיה בעל הערך החדש והעדכני (צבע שחור במקרה זה).

שימוש בתוך media query

יתרון גדול שיש ל-CSS Variables על פני שימוש ב-LESS או SASS הוא היכולת להשתמש במשתנים בתוך media query.
media query "מפוענח" בצד הלקוח, בדיוק כמו CSS Variables ולכן ניתן להגדיר משתנים לפי media query.
דוגמה:

ב-HTML תגית H1 פשוטה:

<h1>Hello World!</h1>

ה-CSS מעט מורכב יותר:

:root {
    --bg-color: green;
    --text-color: #FFFFFF;
    --h1-title-size: 2rem;
}

@media (max-width: 768px) {
    :root {
        --bg-color: red;
        --h1-title-size: 1rem;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

body h1 {
    font-size: var(--h1-title-size);
}

אז מה שהקוד הנ"ל יבצע זה דבר מאוד פשוט. כאשר רוחב המסך הוא מעל 768 פיקסלים, צבע הרקע יהיה כפי שהוגדר ב-root הכללי, ירוק, וגודל ה-H1 יהיה 2rem.
כאשר רוחב המסך הוא 768 או נמוך מזה, צבע הרקע יהיה אדום והטקסט יהיה קטן יותר, 1rem, מאחר והערכים הקודמים "נדרסו" באמצעות ה-media query.

כך זה נראה בדסקטופ:

כך זה נראה במובייל:

סיכום

אין ספק ש-CSS Variables הוא חידוש די מרהיב ומאוד שימושי ל-CSS.
אין ספק כי LESS ו-SASS עדיין חשובים מאוד והשימוש בהם לפעמים הכרחי, אך בפרויקטים קטנים או עבור מי שמעדיף להימנע מהתעסקות עם קומפילציה – CSS Variables הוא פתרון נפלא!

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)