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

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

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

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

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

חלק מהדפדפנים :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 רכיבים בפריסה לאורך או לרוחב:

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

במשך שנים רבות, חברי קהילת הקצה באינטרנט ביקשו רשת משנה כדי להשלים את הסידור והסיום מנוע הפריסה הפופולרי והעוצמתי מאוד של פריסת רשת של 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

בשנת 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;
  }
}

לאפשר לדפדפן לאזן את הכותרות

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

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

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

בפוסט בשנה שעברה נטען שכל מפתח קצה קדמי צריך לדעת איך לכתוב שאילתה בקונטיינר. אם עדיין לא למדתם, 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.