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

שירות CSS איכותי, עוצמתי ויציב שאפשר להשתמש בו כבר היום.

אדם ארגייל

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

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

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

:has()

תמיכה בדפדפן

• 105
• 105
• 121
• 15.4

מקור

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

בהמשך מפורטות כמה דוגמאות לשימוש ב-: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;
  }
}

Nest the CSS בדרך

nesting

תמיכה בדפדפן

• 120
• 120
• 117
• 17.2

מקור

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

כאן תוכלו למצוא סקירה כללית של תחביר של קינון 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

מקור

pretty

תמיכה בדפדפן

• 117
• 117
• x
• x

מקור

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

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

שימוש ביחידות של שאילתות מאגר

cqw

תמיכה בדפדפן

• 105
• 105
• 110
• 16

מקור

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

יש שש cיחידות ארגוניות qחדשות:

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.