DanLevy.net

חידון: האם אתה מכיר CSS מודרני? (ל-2025)

האם אתה פרונט-אנד מספיק?

חידון: האם אתה מכיר CSS?

1. 

חימום

מהי הדרך הנכונה להשתמש במשתנה CSS בשם --main-color כדי לקבוע את צבע הרקע של אלמנט?

:root {
  --main-color: blue;
}
div {
  /* How do we use --main-color here? */
}

משתני CSS משמשים עם הפונקציה var, לכן התשובה הנכונה היא background-color: var(--main-color);. תחביר זה שולף את הערך של --main-color ומחיל אותו.

האפשרויות האחרות עשויות להיות מוכרות משפות אחרות או מתחבירי מעבדים מקדימים, כמו Sass או Less.

2. 

פונקציות CSS

אם רוחב האלמנט ההורה/מכיל הוא 400px, מה יהיה הרוחב המחושב של האלמנט הבא?

div {
  width: min(250px, 50%);
}

הפונקציה min() תבחר את הערך הקטן ביותר בין 250px ל-50% מרוחב ההורה.

כדי להבין את הערך המחושב, עלינו להמיר את היחידות היחסיות לפיקסלים:

  • 50% מ-400px הוא 200px
  • 250px הוא כבר בפיקסלים
/* This gets computed to */
width: min(250px, 200px);
/* -> 200px wins */

הפונקציה min() שימושית במיוחד לעיצוב רספונסיבי, שבו ניתן להבטיח שרכיב (או גודל גופן) לא יחרוג מגבול מסוים.

3. 

פונקציות CSS

בהינתן מיכל ברוחב 200px, מה יהיה הרוחב המחושב של ה-<div>?

div {
  width: max(50px, 10%, 6rem);
}

הפונקציה max() מקבלת 2 קלטים או יותר, ותשתמש בערך הגדול ביותר באופן אוטומטי. בהנחה שגודל הגופן הבסיסי הוא ברירת המחדל של הדפדפן 16px, הרוחב יוצא 96px.

כדי להבין את הערך המחושב, עלינו להמיר את היחידות היחסיות לפיקסלים:

  • 50px כבר בפיקסלים
  • 10% מ-200px הוא 20px
  • 6rem הוא 6 * 16px (גודל הגופן הבסיסי) שהוא 96px
/* This gets computed to */
width: max(50px, 20px, 96px);
/* -> 96px wins */

4. 

פונקציות Grid ב-CSS

מה ההשפעה של שימוש ב-minmax(100px, 200px) עבור מסלול Grid ב-CSS?

grid-template-columns: minmax(100px, 200px);

שימוש ב-minmax(100px, 200px) מאפשר למסלול הגריד לשנות גודל בין 100px ל-200px, תוך התאמה לשטח הפנוי אך מבלי לרדת מתחת ל-100px או לעלות מעל 200px.

ניתן ליצור פריסות מתכווננות אוטומטית שבהן המיכל והילדים כל אחד ממלא תפקיד בחישוב הפריסות. זה חזק במיוחד בשילוב עם repeat() ו-auto-fill או auto-fit, שייצרו כמה שיותר מסלולים בתוך המגבלות.

5. 

משתני CSS

באיזה צבע יהיה הרקע עבור ה-CSS הבא?

div {
  background: var(--primary, olivedrab);
}

הפונקציה var() מאפשרת להגדיר ערך גיבוי אם המשתנה לא מוגדר. במקרה זה, הרקע יהיה olivedrab (#6b8e23) מכיוון ש---primary לא מוגדר.

זוהי דרך מצוינת להבטיח שהסגנונות שלך לא ישברו אם משתנה חסר או לא נתמך.

6. 

פונקציות CSS

מה עושה הפונקציה clamp()?

.card {
  width: clamp(200px, 50vw, 500px);
}

הפונקציה clamp() מאפשרת לרוחב להתכוונן לפי 50vw, אך שומרת אותו בטווח שבין 200px ל-500px.

המשמעות היא שהרוחב יהיה 200px כאשר 50vw יהיה קטן מ-200px, 500px כאשר 50vw יהיה גדול מ-500px, וליניארי בין הגבולות הללו.

זה מאפשר לך להיות רספונסיבי באופן אוטומטי! הדבר שחשוב לדעת על clamp הוא שהיא משלבת יחידות קבועות עם יחידות רספונסיביות או מחושבות.

בדרך כלל לא היית רוצה להשתמש ביחידות viewport עבור גדלי גופנים, אבל עם clamp() אנחנו יכולים להבטיח שגודל הגופן לא יהיה קטן מדי או גדול מדי.

7. 

קינון CSS

האם CSS תומך בקינון באופן טבעי?

כן! סוף סוף יש לנו קינון CSS טבעי! CSS הציגה תחביר קינון טבעי בשנים האחרונות (2023), המאפשר עיצוב היררכי ישירות ב-CSS.

8. 

קינון CSS

האם זה שימוש נכון בקינון CSS טבעי?

.container {
  color: black;
  .title {
    color: white;
    background: black;
  }
}

המחלקה .title מקוננת בתוך המחלקה .container, והמאפיינים מוחלים כצפוי.

זוהי דרך מצוינת לשמור סגנונות קשורים יחד ולהימנע מסלקטורים ארוכים.

9. 

קינון ב-CSS

איזה צבע רקע יוחל על divים שהם ילדים ישירים של .container?

.container {
  background-color: red;
  > div {
    background-color: white;
  }
  background-color: blue !important;
}

הסלקטור > בכלל המקונן מחיל background-color: white רק על אלמנטי div שהם ילדים ישירים בתוך .container.

הכלל האחרון, background-color: blue !important;, הוא קצת הסחת דעת. הוא מחוץ לכלל המקונן ויוחל על כל האלמנטים של .container.

10. 

משתני CSS

איך אפשר לשנות את הערך של משתנה CSS בזמן ריצה?

ניתן להגדיר משתני CSS באמצעות מחלקות ו-JavaScript. אפשר אפילו להגדיר אותם ‘אחרי’ שהם כבר בשימוש טכני.

document.documentElement.style.setProperty('--main-color', 'blue');

זה ישנה את הערך של --main-color ל-blue עבור כל המסמך.

משתני CSS ניתנים לשינוי, וניתן לשנות אותם בזמן ריצה באמצעות JavaScript.

אפשר גם לשנות אותם על ידי הוספה או הסרה של מחלקות, שזה דפוס נפוץ לעיצוב נושאים (theming).

11. 

משתני CSS

מה יהיה הרוחב המחושב של האלמנט?

:root {
  --base-width: 100px;
}
div {
  width: calc(var(--base-width) + 10px);
}

הפונקציה calc() משלבת את הערך של --base-width (100px) עם תוספת של 10px, ומתקבל רוחב של 110px.

Loading comments...