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

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

Adam Argyle

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

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

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

:has()

Browser Support

Source

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

מוצגים 4 פאנלים, כל אחד עם תמונה וכיתוב.
כל תמונה מציגה מוח שמפעיל יותר ויותר כוח מוח. בחלונית הראשונה כתוב :has(). בחלונית השנייה כתוב figure:has(caption) בתור סלקטור הורה.
הלוח השלישי מציג את המחרוזת .layout:has(> :nth-child(5)) כבורר כמות.
בלוח הרביעי כתוב html:has(#checked) .new-subject בתור בורר לשינוי נושא מותנה.

הנה כמה דוגמאות לשימוש ב-: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() מוגבלת להיות סלקטור הורה. אבל כדאי לעיין בדוגמאות הבאות. הבדיקות האלה בודקות משהו על סמך צאצא משותף, ואז משנות את הנושא של בורר ה-CSS לצאצא שנמצא ברמה עמוקה יותר בדף.

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

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

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

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

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

Try on Codepen

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

subgrid

Browser Support

Source

במשך שנים רבות, קהילת פיתוח ה-Front-End ביקשה להוסיף תמיכה ב-subgrid כדי להשלים את מנוע הפריסה של CSS grid, שהוא פופולרי מאוד ובעל יכולות רבות. הוא זמין עכשיו בכל שלושת המנועים העיקריים.

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

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

Browser Support

Source

התכונה 'קינון 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

Browser Support

Source

pretty

Browser Support

Source

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

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

שימוש ביחידות של שאילתות על רכיבים

cqw

Browser Support

Source

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

יש שש יחידות חדשות של query container:

ווריאנט בתוך השורה cqi.
ווריאנט של רוחב cqw.
ווריאנט של בלוק cqb.
ווריאנט של גובה cqh.
וריאנט לכל אורך שהוא קטן יותר מ-cqmin.
וריאציה של האורך הגדול יותר 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.

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

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

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

הצבה של רכיב בתוך רכיב אחר ב-CSS

איזון הכותרות על ידי הדפדפן

שימוש ביחידות של שאילתות על רכיבים

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