Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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 פאנלים, לכל אחד מהם יש תמונה וכיתוב.
בכל תמונה מוצג מוח שמפעיל יותר ויותר כוח מוח. החלונית הראשונה היא
says :has(). החלונית השנייה היא figure:has(caption) as a parent selector.
החלונית השלישית מציגה את המחרוזת .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 ביקשה להוסיף תכונה של רשת משנה כדי להשלים את מנוע פריסת ה-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. אפילו עדכנתי את האתר שלי כדי להסיר את תהליך הבנייה שקומפל את הקינון, ועכשיו אני שולח גיליון סגנונות קטן יותר! כן, גיליונות סגנונות עם קינון קטנים יותר וכל כלי הפיתוח בדפדפן מוכנים לייצג אותם.

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

pretty

Browser Support

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

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

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

cqw

Browser Support

Source

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

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

וריאנט בתוך השורה 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

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

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

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