5 קטעי קוד ב-CSS שכל מפתחי ממשק קצה צריכים להכיר בשנת 2024

ספריית CSS חזקה ויציבה שאפשר להשתמש בה כבר היום.

Adam Argyle

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

הפוסט הזה הוא המשך של 6 קטעי הקוד של CSS שכל מפתח ממשק חזית צריך לדעת ב-2023.

CSS:has(.potential-beyond-being-a-parent-selector)

:has()

תמיכה בדפדפנים

• 105
• 105
• 121
• 15.4

מקור

:has() הושק בכל הדפדפנים העיקריים בסוף שנת 2023. הבורר החדש נראה קטן ותמים, אבל תופתעו לגלות את כל התרחישים לדוגמה שבהם אפשר להשתמש בו: משחקים, תגובה מיידית, פריסה מותאמת תוכן, רכיבים חכמים ועוד הרבה דברים שמפורטים היטב במאמר הזה של Jhey.

ריכזנו כאן כמה דוגמאות לשימוש ב-:has() כבורר הורה. השם הזה ניתן לו כי בדרך כלל הנושא של הבורר מופיע בסוף, כמו ul li, שבו li הוא הנושא שמקבל את הסגנונות. בעזרת :has(), הרכיב בתחילת הבורר יכול להפוך לנושא. בדוגמה הבאה, בלחצן יש רווח אם יש בתוכו רכיב עם מחלקה .icon. אם יש תמונה בכרטיס, הכיוון שלו ישתנה.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

בורר שרצינו כבר הרבה זמן הוא שינוי של פריסה על סמך מספר הפריטים שבה. עכשיו אפשר לעשות זאת באמצעות :has() כי הוא יכול לשמור על הקונטיינר כנושא בזמן שליחת השאילתה לגבי מספר הצאצאים.

main:has(> :nth-child(5)) {…}

דוגמה נוספת ברמה גבוהה יותר: שינוי הסגנונות שהוגדרו במסמך כולו כשתיבת סימון ספציפית בדף מופעלת:

html:has(#dark-mode:checked) {…}

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

הקוד הזה מציג אלמנט של שגיאה בטופס אם אחד מהנתונים שהוזנו לא תקין:

form:has(:user-invalid) .error {
  display: block;
}

הקוד הזה מחליק החוצה את אזור התוכן הראשי כשלסרגל הניווט הצדדי יש את הכיתה .--is-open:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

הנה הדגמה מהנה שבה נעשה שימוש ב-:has() כבורר הורה, ב-:has() עם שאילתות כמות ובשאילתות מאגר כדי ליצור פריסה של רשת שיכולה להציג בצורה אלגנטית 1-12 רכיבים בכיוון לאורך או לרוחב:

לניסיון ב-Codepen

יצירת רשת משנה

subgrid

תמיכה בדפדפנים

• 117
• 117
• 71
• 16

מקור

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

כאן אפשר לקרוא מידע נוסף על רשת משנה.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

עיצוב ב-CSS בצורה היררכית

nesting

תמיכה בדפדפנים

• 120
• 120
• 117
• 17.2

מקור

ב-2023, התכונה 'עיצוב CSS מוטמע' הפכה לזמינה בכל הדפדפנים העיקריים. אפילו עדכנתי את האתר שלי כדי להסיר את תהליך ה-build שדרכו קובץ ה-CSS עבר הידור, ועכשיו אני שולח קובץ stylesheet קטן יותר. כן, גיליונות סגנונות עם עץ עיצוב קטנים יותר וכל הכלים של דפדפן הפיתוח מוכנים לייצג אותם.

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

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

איך הדפדפן מאזן בין הכותרות

balance

תמיכה בדפדפנים

• 114
• 114
• 121
• 17.5

מקור

pretty

תמיכה בדפדפנים

• 117
• 117
• x
• x

מקור

בלי text-wrap: balance, המפתחים והכותבים נאלצים להסתמך על רמזים למעבר שורה, כמו רכיבי <wbr> או ­. בדרך כלל זוהי מלחמה שאין לה סיכוי, כי ברגע שהתוכן מתורגם, מתבצע בו זום או שהוא משתנה בכל צורה שהיא, אין ערובה שהטיפים לקיפול יהיו במקום הנכון בהצגה החדשה של התוכן.

כשמשתמשים בקיפול טקסט מאוזן, אפשר להשאיר את העבודה הזו לדפדפן. אפשר לראות השוואה ב-Codepen הבא.

שימוש ביחידות של שאילתות בקונטיינרים

cqw

תמיכה בדפדפנים

• 105
• 105
• 110
• 16

מקור

בפוסט מהשנה שעברה הצגנו את ההמלצה שכל מפתח ממשק קצה צריך לדעת לכתוב שאילתה בקונטיינר. אם עדיין לא למדתם, כדאי להפוך את שנת 2024 לשנה שבה תתחילו להשתמש ב-SQL בקונטיינרים, ולבדוק גם את יחידות השאילתות בקונטיינרים. כסקירה כללית, Ahmad Shadeed כתב מאמר מעולה על יחידות של שאילתות בקונטיינרים בשנת 2021.

יש שש יחידות שאילתות חדשות בקונטיינר:

1. וריאנט בתוך שורה cqi.
2. וריאנט רוחב cqw.
3. וריאנט של בלוק cqb.
4. וריאנט גובה cqh.
5. וריאנט באורך הקצר מבין השניים cqmin.
6. וריאנט באורך הגדול מבין cqmax.

נבחן תרחיש של אנימציות יחסיות ומיידיות בקונטיינר. רכיב צאצא שחוזר לגמרי לקונטיינר שלו באמצעות 100cqi – כלומר 100% מהגודל של הקונטיינר בתוך השורה.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

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

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

אם היחידות האלה חדשות לכם, מומלץ לעיין בכל היחידות שיהיו זמינות לכם בשנת 2024.