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;
  }
}

הוספת Nest דרך ה-CSS

nesting

תמיכה בדפדפן

• 120
• 120
• 117
• 17.2

מקור

בשנת 2023, האפשרות 'סידור פנימי של שירותי CSS' תהיה זמינה בכל הדפדפנים המובילים. אפילו עדכנתי את האתר שלי כדי להסיר את תהליך ה-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
• 17.5

מקור

pretty

תמיכה בדפדפן

• 117
• 117
• X
• X

מקור

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

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

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

cqw

תמיכה בדפדפן

• 105
• 105
• 110
• 16

מקור

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

יש שש יחידות container 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.