מצב שירות ה-CSS 2022

תכונות עיצוב לאתרים שזמינות היום ויהיו זמינות בעתיד, כפי שהוצגו בכנס Google IO 2022, ועוד כמה תוספות.

Adam Argyle

שנת 2022 צפויה להיות אחת השנים הטובות ביותר של CSS, הן מבחינת תכונות והן מבחינת השקות של תכונות בדפדפן בשיתוף פעולה, עם מטרה משותפת להטמעת 14 תכונות!

סקירה כללית

הפוסט הזה הוא גרסת המאמר של ההרצאה שהוצגה ב-Google IO 2022. המדריך הזה לא נועד להיות מדריך מפורט לכל תכונה, אלא להציג סקירה כללית קצרה שתעורר את העניין שלכם, ולספק מידע רחב במקום מידע מעמיק. אם הנושא מעניין אתכם, בסוף כל קטע יש קישורים למקורות מידע נוספים.

תוכן העניינים

אפשר להשתמש ברשימה הבאה כדי לדלג לנושאים שמעניינים אתכם:

תאימות דפדפן

אחת הסיבות העיקריות לכך שהרבה תכונות של CSS מוגדרות להשקה שיתופית היא המאמצים של Interop 2022. לפני שמתעמקים במאמצי התאימות, חשוב לעיין במאמצים של Compat 2021.

Compat 2021

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

1. sticky מיקום
2. aspect-ratio מידות
3. פריסה של flex
4. פריסה של grid
5. transform מיקום ואנימציה

הציונים במבחנים עלו בכל התחומים, מה שמעיד על שיפור ביציבות ובמהימנות. כל הכבוד לצוותים!

Interop 2022

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

1. @layer
2. מרחבי צבעים ופונקציות
3. בלימה
4. <dialog>
5. תאימות של טפסים
6. גלילה
7. Subgrid
8. טיפוגרפיה
9. יחידות של אזור התצוגה
10. תאימות לאינטרנט

זו רשימה מרגשת ושאפתנית, ואני לא יכול לחכות לראות איך היא תתפתח.

המלצות חדשות לשנת 2022

כצפוי, העבודה על Interop2022 משפיעה באופן משמעותי על מצב ה-CSS בשנת 2022.

שכבות מדורגות

לפני @layer, הסדר שבו טוענים את גיליונות הסגנונות היה חשוב מאוד, כי סגנונות שנמצאים בסוף יכולים לדרוס סגנונות שנמצאים לפני. הדבר הוביל לגיליונות סגנונות (stylesheet) מנוהלים בקפידה, שבהם המפתחים נדרשו לטעון קודם סגנונות פחות חשובים ואחר כך סגנונות חשובים יותר. קיימות מתודולוגיות שלמות שעוזרות למפתחים לנהל את החשיבות הזו, כמו ITCSS.

באמצעות @layer, אפשר להגדיר מראש את השכבות ואת הסדר שלהן בקובץ הכניסה. לאחר מכן, כשהסגנונות נטענים, נטענים או מוגדרים, אפשר למקם אותם בשכבה, וכך לשמור על חשיבות ההחלפה של הסגנון בלי הצורך בניהול מוקפד של תזמון הטעינה.

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

כלי הפיתוח ל-Chrome עוזרים להבין אילו סגנונות מגיעים מאיזו שכבה:

משאבים

• מפרט CSS Cascade 5
• הסבר על שכבות מדורגות
• שכבות מדורגות ב-MDN
• ‫Una Kravets: Cascade Layers
• ‫Ahmad Shadeed: Hello, CSS Cascade Layers

Subgrid

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

אחרי subgrid, ילד של רשת יכול לאמץ את העמודות או השורות של ההורים שלו כעמודות או שורות משלו, וליישר את עצמו או את הילדים שלו אליהן.

בדוגמה הבאה, רכיב ה-body יוצר רשת קלאסית של שלוש עמודות: העמודה האמצעית נקראת main, והעמודות הימנית והשמאלית מגדירות את השורות שלהן fullbleed. לאחר מכן, כל רכיב בגוף, <nav> ו-<main>, מאמץ את השורות שנקראות מהגוף על ידי הגדרת grid-template-columns: subgrid.

​​body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

לבסוף, ילדים בגיל <nav> או <main> יכולים ליישר את עצמם או לשנות את הגודל שלהם באמצעות העמודות והקווים fullbleed ו-main.

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

אפשר להשתמש בכלי הפיתוח כדי לראות את השורות ואת רשתות המשנה (כרגע רק ב-Firefox). בתמונה הבאה, רשת ההורה ורשתות המשנה מוצגות זו על גבי זו. הוא דומה עכשיו לאופן שבו מעצבים חשבו על הפריסה.

בחלונית Elements בכלי הפיתוח אפשר לראות אילו אלמנטים הם רשתות ורשתות משנה, וזה מאוד שימושי לניפוי באגים או לאימות פריסה.

משאבים

• מפרט של רשת משנה
• Subgrid ב-MDN
• ‫Bramus: Practical CSS Subgrid Video Tutorials

שאילתות בנוגע למאגר

לפני גרסה @container, רכיבים של דף אינטרנט יכלו להגיב רק לגודל של אזור התצוגה כולו. זה מצוין לפריסות מאקרו, אבל בפריסות מיקרו, שבהן הקונטיינר החיצוני שלהן לא תופס את כל אזור התצוגה, אי אפשר להתאים את הפריסה בהתאם.

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

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

הסגנונות האלה מאפשרים לשאול שאילתות לגבי רכיבי האירוע בעמודות Mon,‏ Tues,‏ Wed,‏ Thurs ו-Fri בסרטון הבא.

הנה קוד ה-CSS לשליחת שאילתה למאגר calendar-day כדי לקבל את הגודל שלו, ואז להתאים את הפריסה ואת גדלי הגופן:

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

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

אונה צודקת בהערכת המצב כהחדש רספונסיבי. יש הרבה החלטות מעניינות וחשובות בנוגע לעיצוב שאפשר לקבל כשמשתמשים ב-@container.

משאבים

• מפרט של שאילתות קונטיינרים
• הסבר על שאילתות בנוגע למאגר
• Container Queries on MDN
• התכונה החדשה 'רספונסיביות' באתר web.dev
• הדגמה של היומן מאת Una
• אוסף מעולה של שאילתות בנוגע למאגר
• איך בנינו את Designcember ב-web.dev
• ‫Ahmad Shadeed: Say Hello To CSS Container Queries

accent-color

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

אחרי accent-color, שורה אחת של CSS מוסיפה צבע מותג לרכיבים המובנים. בנוסף לגוון, הדפדפן בוחר בצורה חכמה צבעים מתאימים עם ניגודיות לחלקים משניים של הרכיב, ומתאים את עצמו לערכות הצבעים של המערכת (בהיר או כהה).

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

למידע נוסף על accent-color, מומלץ לעיין בפוסט שלי ב-web.dev שבו אני בוחן היבטים רבים נוספים של מאפיין ה-CSS השימושי הזה.

משאבים

• מפרט של צבע הדגשה
• accent-color ב-MDN
• מידע על accent-color באתר web.dev
• ‫Bramus: Tint User-Interface Controls with CSS accent-color

רמת צבע 4 ו-5

במהלך העשורים האחרונים, מרחב הצבעים sRGB היה הדומיננטי באינטרנט, אבל בעולם הדיגיטלי המתרחב של מסכי HD ומכשירים ניידים שמצוידים מראש במסכי OLED או QLED, מרחב הצבעים sRGB כבר לא מספיק. בנוסף, יש ציפייה לדפים דינמיים שמותאמים להעדפות המשתמשים, וניהול הצבעים הפך לדאגה גוברת בקרב מעצבים, מערכות עיצוב ומתחזקי קוד.

אבל לא ב-2022 – ל-CSS יש מספר פונקציות ומרחבים חדשים של צבעים: - צבעים שמגיעים ליכולות הצבעים באיכות HD של המסכים. ‫– מרחבי צבעים שתואמים לכוונת המשתמש, כמו אחידות תפיסתית. ‫- מרחבי צבעים למעברי צבעים שמשנים באופן משמעותי את תוצאות האינטרפולציה. – פונקציות צבע שיעזרו לכם לערבב ולבדוק ניגודיות, ולבחור את המרחב שבו תרצו לעבוד.

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

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

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

hwb()

‫HWB מייצג גוון, לבן ושחור. הוא מוצג כדרך ידידותית למשתמש לציון צבע, כי הוא כולל רק גוון וכמות של לבן או שחור להבהרה או להכהה. אמנים שמערבבים צבעים עם לבן או שחור עשויים להעריך את התוספת הזו לתחביר הצבעים.

השימוש בפונקציית הצבע הזו יוצר צבעים ממרחב הצבעים sRGB, כמו HSL ו-RGB. מבחינת חידושים לשנת 2022, לא מדובר בצבעים חדשים, אבל יכול להיות שזה יקל על חלק מהמשימות של מעריצי התחביר והמודל המנטלי.

משאבים

• מפרט HWB
• HWB ב-MDN
• ‫Stefan Judis: hwb() – a color notation for humans?

מרחבי צבעים

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

בשנת 2022, שירות CSS אמור להציע 10 מרחבי צבעים חדשים, שלכל אחד מהם יש תכונות ייחודיות שיעזרו למעצבים ולמפתחים להציג, לבחור ולערבב צבעים. בעבר, sRGB הייתה האפשרות היחידה לעבודה עם צבעים, אבל עכשיו CSS פותח אפשרויות חדשות ומרחב צבעים חדש שמוגדר כברירת מחדל, LCH.

color-mix()

לפני color-mix(), מפתחים ומעצבים היו צריכים להשתמש במעבדים מקדימים כמו Sass כדי לערבב את הצבעים לפני שהדפדפן הציג אותם. ברוב הפונקציות של ערבוב צבעים לא הייתה אפשרות לציין את מרחב הצבעים שבו יתבצע הערבוב, ולפעמים התוצאות היו מבלבלות.

אחרי color-mix(), מפתחים ומעצבים יכולים לערבב צבעים בדפדפן, לצד כל הסגנונות האחרים שלהם, בלי להריץ תהליכי בנייה או לכלול JavaScript. בנוסף, הם יכולים לציין את מרחב הצבעים שבו יתבצע המיזוג, או להשתמש במרחב הצבעים למיזוג שמוגדר כברירת מחדל – LCH.

לרוב, משתמשים בצבע המותג כבסיס ויוצרים ממנו וריאציות, כמו צבעים בהירים או כהים יותר לסגנונות של מצב ריחוף. כך זה נראה עם color-mix():

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

ואם רוצים לערבב את הצבעים האלה במרחב צבעים אחר, כמו srgb, אפשר לשנות אותו:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

בהמשך מופיעה הדגמה של שימוש בערכות נושא באמצעות color-mix(). כדאי לנסות לשנות את צבע המותג ולראות את העדכון של העיצוב:

אתם יכולים ליהנות ממיזוג צבעים במרחבי צבע שונים בגיליונות הסגנונות שלכם בשנת 2022!

משאבים

• מפרט של color-mix()
• ‫color-mix()‎ ב-MDN
• הדגמה של עיצוב
• הדגמה נוספת של עיצוב
• ‫Fabio Giolito: Create a color theme with these upcoming CSS features

color-contrast()

לפני color-contrast(), מחברים של גיליונות סגנונות היו צריכים לדעת מראש אילו צבעים נגישים. לרוב, בלוח צבעים מוצג טקסט שחור או לבן על דוגמית צבע, כדי להראות למשתמש במערכת הצבעים איזה צבע טקסט נדרש כדי ליצור ניגודיות מתאימה עם הדוגמית.

אחרי color-contrast(), יוצרים של גיליונות סגנונות יכולים להעביר את המשימה לדפדפן באופן מלא. אתם יכולים להשתמש בדפדפן לא רק כדי לבחור באופן אוטומטי צבע שחור או לבן, אלא גם כדי לתת לו רשימה של צבעים שמתאימים למערכת העיצוב, ולבקש ממנו לבחור את הצבע הראשון שעומד ביחס הניגודיות הרצוי.

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

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

color: color-contrast(gray);

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

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

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

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

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

משאבים

• color-contrast() specification
• ‫color-contrast() on MDN
• הדגמה

תחביר של צבעים יחסיים

לפני תחביר הצבעים היחסי, כדי לבצע חישובים על צבע ולבצע התאמות, היה צריך להציב את ערוצי הצבע בנפרד במאפיינים מותאמים אישית. בגלל המגבלה הזו, הפונקציה HSL הפכה לפונקציית הצבע העיקרית לשינוי צבעים, כי אפשר לשנות את הגוון, הרוויה או הבהירות בצורה פשוטה באמצעות calc().

אחרי תחביר של צבע יחסי, אפשר לפרק, לשנות ולהחזיר כל צבע בכל מרחב כצבע, והכול בשורה אחת של CSS. אין יותר מגבלות על HSL – אפשר לבצע מניפולציות בכל מרחב צבעים שרוצים, וצריך ליצור הרבה פחות מאפיינים מותאמים אישית כדי לעשות את זה.

בדוגמה הבאה של תחביר, מסופק ערך הקסדצימלי בסיסי ושני צבעים חדשים נוצרים ביחס אליו. הצבע הראשון --absolute-change יוצר צבע חדש במרחב הצבעים LCH מהצבע הבסיסי, ואז מחליף את הבהירות של הצבע הבסיסי ב-75%, תוך שמירה על הכרומה (c) והגוון (h). הצבע השני --relative-change יוצר צבע חדש במרחב הצבעים LCH מהצבע הבסיסי, אבל הפעם הוא מפחית את הכרומה (c) ב-20%.

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

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

בדמו הבא השתמשתי בתחביר של צבעים יחסיים כדי ליצור וריאציות בהירות וכהות יותר של צבע בסיסי, והשתמשתי ב-color-contrast() כדי לוודא שלתוויות יש ניגודיות מתאימה:

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

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

אני מקווה שעכשיו ברור לכם איך אפשר להשתמש במרחבי צבעים ובפונקציות צבע שונות למטרות שונות, בהתאם ליתרונות ולחסרונות שלהם.

משאבים

• מפרט תחביר של צבעים יחסיים
• יצירת לוחות צבעים באמצעות תחביר של צבעים יחסיים
• יצירת וריאציות של צבעים באמצעות תחביר של צבעים יחסיים

מרחבי צבעים של מעברי צבע

לפני שהיו מרחבי צבעים של מעברי צבעים, מרחב הצבעים שהיה בשימוש כברירת מחדל היה sRGB. בדרך כלל אפשר לסמוך על sRGB, אבל יש לו כמה חולשות, כמו אזור אפור מת.

אחרי מרחבי הצבעים של המעבר ההדרגתי, מציינים לדפדפן באיזה מרחב צבעים להשתמש לאינטרפולציה של הצבע. כך מפתחים ומעצבים יכולים לבחור את הגרדיאנט שהם מעדיפים. גם מרחב הצבעים שמוגדר כברירת מחדל משתנה ל-LCH במקום ל-sRGB.

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

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

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

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

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

משאבים

• מפרט של אינטרפולציה של מעברי צבע
• הדגמה של השוואת מעברי צבעים במרחבים
• השוואה של גרדיאנטים ב-Notebook של Observable

inert

לפני inert, נהוג היה להפנות את תשומת הלב של המשתמש לאזורים בדף או באפליקציה שדרשו טיפול מיידי. האסטרטגיה הזו של מיקוד מודרך נקראת 'לכידת מיקוד', כי מפתחים היו ממקמים את המיקוד במרחב אינטראקטיבי, מאזינים לאירועי שינוי מיקוד, ואם המיקוד היה יוצא מהמרחב האינטראקטיבי, הם היו מחזירים אותו בכוח. משתמשים במקלדות או בקוראי מסך מופנים חזרה לאזור האינטראקקטיבי כדי לוודא שהמשימה הושלמה לפני שהם ממשיכים.

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

דוגמה טובה לכך היא הפונקציה alert() של JavaScript:

בסרטון הקודם אפשר לראות איך הייתה גישה לדף באמצעות העכבר והמקלדת עד שהופעלה הפונקציה alert(). אחרי שחלון הקופץ של תיבת הדו-שיח עם ההתראה הוצג, שאר הדף קפא או inert. המיקוד של המשתמש נמצא בתוך תיבת הדו-שיח של ההתראה, ואין לו לאן לעבור. אחרי שהמשתמש מקיים אינטראקציה עם ההתראה ומשלים את בקשת הפונקציה שלה, הדף הופך שוב לאינטראקטיבי. ‫inert מאפשר למפתחים ליהנות בקלות מאותה חוויה מודרכת וממוקדת.

הנה קוד לדוגמה שממחיש איך זה עובד:

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

תיבת דו-שיח היא דוגמה מצוינת, אבל inert יכול לעזור גם במקרים כמו חוויית המשתמש של תפריט צדדי שנפתח בהזזה. כשמשתמש פותח את התפריט הצדדי, אסור לאפשר לעכבר או למקלדת לקיים אינטראקציה עם הדף שמאחוריו. זה עלול להטעות את המשתמשים. במקום זאת, כשהתפריט הצדדי מוצג, צריך להגדיר את הדף כלא פעיל, ועכשיו המשתמשים צריכים לסגור את התפריט הצדדי או לנווט בתוכו, ולא ימצאו את עצמם במקום אחר בדף עם תפריט פתוח.

משאבים

• Inert specification
• Inert on MDN
• Chrome Developers: Introducing inert

גופני COLRv1

לפני גופני COLRv1, באינטרנט היו גופני OT-SVG, שהם גם פורמט פתוח לגופנים עם מעברי צבעים, צבעים מובנים ואפקטים. הן יכולות להיות גדולות מאוד, ואף שאפשר לערוך את הטקסט, אין הרבה אפשרויות להתאמה אישית.

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

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

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

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

התאמה אישית של גופן COLRv1 מתבצעת באמצעות @font-palette-values, כלל CSS מיוחד שמאפשר לקבץ ולתת שם לקבוצה של אפשרויות התאמה אישית כדי להשתמש בהן בהמשך. שימו לב איך מציינים שם מותאם אישית בדיוק כמו מאפיין מותאם אישית, שמתחיל ב---:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

אם --colorized הוא הכינוי להתאמות האישיות, השלב האחרון הוא להחיל את הפלטה על רכיב שמשתמש במשפחת הגופנים של הצבע:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

עם הזמינות הגוברת של גופנים משתנים וגופנים צבעוניים, הטיפוגרפיה באינטרנט מתפתחת לכיוון של התאמה אישית עשירה וביטוי יצירתי.

משאבים

• מפרט Colrv1 ב-Github
• מפתחי Chrome: גופני Colrv1 ‎
• סרטון הסבר למפתחים על BlinkOn

יחידות של אזור התצוגה

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

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

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

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

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

​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

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

משאבים

• מפרט של יחידות יחסיות לאזור התצוגה
• ‫Bramus: The Large, Small, and Dynamic Viewports

:has()

לפני גרסה :has(), הנושא של סלקטור תמיד היה בסוף. לדוגמה, הנושא של בורר זה הוא פריט ברשימה: ul > li. סלקטורים פסאודו יכולים לשנות את הסלקטור, אבל הם לא משנים את הנושא: ul > li:hover או ul > li:not(.selected).

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

הנה דוגמה לתחביר בסיסי שבה המחלקה .parent נשארת הנושא, אבל היא נבחרת רק אם לרכיב צאצא יש את המחלקה .child:

.parent:has(.child) {...}

דוגמה שבה רכיב <section> הוא הנושא, אבל הסלקטור תואם רק אם לאחד מרכיבי הצאצא יש :focus-visible:

section:has(*:focus-visible) {...}

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

a:has(> img) {...}

בדוגמאות האלה, :has() נראה כמו סלקטור של רכיב אב. כדאי לשקול את תרחיש השימוש בתמונות בתוך רכיבי <figure> ולהתאים את הסגנונות של התמונות אם יש לרכיב <figcaption>. בדוגמה הבאה, נבחרו דמויות עם כיתובים, ואז תמונות בהקשר הזה. השימוש ב-:has() לא משנה את הנושא, כי הנושא שאנחנו מתמקדים בו הוא תמונות ולא נתונים:

figure:has(figcaption) img {...}

נראה שהשילובים הם אינסופיים. משלבים את :has() עם שאילתות quantity queries ומשנים את פריסות ה-CSS grid על סמך מספר הצאצאים. אפשר לשלב את :has() עם מצבי מחלקה פסאודו אינטראקטיביים וליצור אפליקציות שמגיבות בדרכים יצירתיות חדשות.

קל לבדוק אם יש תמיכה באמצעות הפונקציה @supports ו-selector() שלה, שבודקת אם הדפדפן מבין את התחביר לפני שמשתמשים בו:

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

משאבים

• :has() specification
• ‫:has()‎ ב-MDN
• הסלקטור :has() ב-CSS הוא הרבה יותר מ'סלקטור של רכיב אב'

‫2022 ואילך

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

הקטעים הבאים נועדו להראות שבעיות רבות שמופיעות ברשימה נפוצות בקרב אנשים מחברות שונות, ולא שהפתרונות האלה יפורסמו ב-2023.

מאפיינים מותאמים אישית עם הקלדה חלשה

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

נניח שיש תרחיש שבו box-shadow משתמש במאפיינים מותאמים אישית בשביל הערכים שלו:

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

הכול עובד בצורה טובה עד שאחד מהמאפיינים משתנה לערך ש-CSS לא מקבל, כמו --x: red. הצללית כולה נשברת אם אחד מהמשתנים המקוננים חסר או מוגדר לסוג ערך לא חוקי.

כאן נכנס לתמונה @property: --x יכול להפוך למאפיין מותאם אישית עם הקלדה, הוא כבר לא גמיש ופתוח, אלא בטוח עם גבולות מוגדרים:

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

עכשיו, כשהאפליקציה box-shadow משתמשת ב-var(--x) ומאוחר יותר מתבצע ניסיון להשתמש ב---x: red, המערכת תתעלם מ-red כי הוא לא <length>. המשמעות היא שה-Shadow ממשיך לפעול, גם אם ניתן ערך לא תקין לאחד מהמאפיינים המותאמים אישית שלו. במקום להיכשל, הוא חוזר לערך initial-value של 0px.

Animation

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

בדוגמה הבאה, נעשה שימוש במעבר צבעים רדיאלי כדי ליצור חלק משכבת-על, וכך ליצור אפקט של זרקור. ‫JavaScript מגדיר את המיקום של העכבר בציר X ובציר Y כשמקש Alt או Opt נלחץ, ואז משנה את גודל המיקוד לערך קטן יותר כמו 25%, ויוצר את עיגול המיקוד של הזרקור במיקום העכבר:

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

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

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

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

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

אפשר לעשות הרבה יותר עם @property, אבל גם הפעלה של התכונות הקטנות האלה יכולה לעזור מאוד.

משאבים

• @property specification
• ‎@property ב-MDN
• מידע על@property באתר web.dev
• הדגמה של מיקוד בזום
• CSS Tricks: Exploring @property and its animating powers

היית במקום min-width או במקום max-width

לפני טווחי שאילתות מדיה, שאילתת מדיה מסוג CSS משתמשת ב-min-width וב-max-width כדי לציין תנאים של מעל ומתחת. הוא עשוי להיראות כך:

@media (min-width: 320px) {
  …
}

אחרי טווחי שאילתות מדיה, אותה שאילתת מדיה יכולה להיראות כך:

@media (width >= 320px) {
  …
}

שאילתת מדיה של CSS שמשתמשת גם ב-min-width וגם ב-max-width יכולה להיראות כך:

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

אחרי טווחי שאילתות מדיה, אותה שאילתת מדיה יכולה להיראות כך:

@media (320px <= width <= 1280px) {
  …
}

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

משאבים

• תחביר של טווח שאילתות מדיה מפרט
• תחביר של טווח שאילתות מדיה ב-MDN
• Media query range syntax PostCSS plugin

אין משתנים של שאילתות מדיה

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

אחרי @custom-media, אפשר להשתמש ב-CSS כדי ליצור כינויים לשאילתות מדיה ולהפנות אליהן, בדיוק כמו למאפיין מותאם אישית.

חשוב מאוד לתת שמות לדברים: כך אפשר להתאים את המטרה לתחביר, ולשתף ולהשתמש בדברים בקלות בצוותים. ריכזנו כאן כמה שאילתות מדיה מותאמות אישית שמופיעות בכל הפרויקטים:

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

אחרי שהגדרתי אותם, אני יכול להשתמש באחד מהם כך:

@media (--OSdark) {
  :root {
    …
  }
}

אני רוצה לקבל רשימה מלאה של שאילתות מדיה מותאמות אישיתשבהן אני משתמש בספריית המאפיינים המותאמים אישית של ה-CSS שלי Open Props.

משאבים

• מפרט של שאילתות מדיה בהתאמה אישית
• Custom media queries PostCSS plugin

הקינון של הסלקטורים הוא נוח מאוד

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

אחרי @nest, החזרה נעלמת. כמעט כל התכונות של קינון עם מעבד מקדים יהיו זמינות כחלק מ-CSS.

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

הדבר הכי חשוב לי לגבי קינון, חוץ מזה שלא צריך לחזור על article בבורר המקונן, הוא שהקשר הסגנון נשאר בתוך בלוק סגנון אחד. במקום לעבור ממַסמן אחד, והסגנונות שלו, למַסמן אחר עם סגנונות (דוגמה 1), הקורא יכול להישאר בהקשר של מאמר ולראות את הקישורים ששייכים למאמר בתוכו. הקשר והסגנון משולבים יחד, כך ש-article יכול להופיע עם הסגנונות שלו.

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

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

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

‫@nest עוזר לארגן את הסגנונות בצורה בריאה יותר, לרכז אותם ולשלוט בהם. רכיבים יכולים לקבץ סגנונות משלהם ולשלוט בהם, במקום שהם יהיו מפוזרים בין בלוקים אחרים של סגנונות. בדוגמאות האלה השינוי נראה קטן, אבל הוא יכול להשפיע מאוד על הנוחות והקריאות.

משאבים

• @nest specification
• @nest PostCSS plugin
• ‫Bramus: The future of CSS: Nesting Selectors

קשה מאוד להגדיר סגנונות

לפני @scope, היו הרבה אסטרטגיות כי הסגנונות ב-CSS מועברים, עוברים בירושה ומוגדרים כברירת מחדל בהיקף גלובלי. התכונות האלה של CSS מאוד נוחות לשימושים רבים, אבל באתרים ובאפליקציות מורכבים, עם הרבה סגנונות שונים של רכיבים, המרחב הגלובלי והאופי של העיצוב יכולים לגרום לסגנונות להיראות כאילו הם דולפים.

אחרי @scope, אפשר להגדיר את ההיקף של הסגנונות רק בתוך הקשר מסוים, כמו class, אבל אפשר גם לציין איפה הסגנונות מסתיימים ולא ממשיכים להסתעף או לעבור בירושה.

בדוגמה הבאה, אפשר להפוך את ההיקף של מוסכמת השמות BEM לכוונת השימוש בפועל. הבורר BEM מנסה להגדיר את הצבע של רכיב header בתוך מאגר .card באמצעות מוסכמות שמות. כדי להשלים את היעד, צריך לוודא שהכותרת כוללת את שם המחלקה הזה. עם @scope, לא נדרשים כללי מתן שמות כדי להשיג את אותה מטרה בלי לתייג את רכיב הכותרת:

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

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

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

כדי להשלים את הסיפור כאן, @scope מאפשר גם לקבוע איפה מסתיים היקף הסגנון. אי אפשר לעשות את זה באמצעות מוסכמות שמות או מעבדי קדם. זה משהו מיוחד שרק CSS מובנה בדפדפן יכול לעשות. בדוגמה הבאה, הסגנונות img ו-.content מוחלים באופן בלעדי כשאלמנט צאצא של .media-block הוא אח או הורה של .content:

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

משאבים

• @scope specification
• @scope explainer

אין דרך להשתמש ב-CSS כדי ליצור פריסת masonry

לפני CSS masonry עם grid, ‏ JavaScript הייתה הדרך הכי טובה ליצור פריסת masonry, כי כל אחת מהשיטות של CSS עם עמודות או flexbox לא הציגה את סדר התוכן בצורה מדויקת.

אחרי השימוש בפריסת CSS עם רשת, לא יהיה צורך בספריות JavaScript וסדר התוכן יהיה נכון.

הדמו שלמעלה נוצר באמצעות ה-CSS הבא:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

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

משאבים

• מפרט של פריסת Masonry
• פריסת לבנים ב-MDN
• Smashing Magazine: Native CSS Masonry Layout with CSS Grid

אי אפשר להשתמש ב-CSS כדי לעזור למשתמשים לצמצם את הנתונים

לפני prefers-reduced-data שאילתת המדיה, JavaScript ושרת יכלו לשנות את ההתנהגות שלהם על סמך מערכת ההפעלה או הדפדפן של המשתמש, או על סמך האפשרות 'חיסכון בנתונים', אבל CSS לא יכל.

אחרי prefers-reduced-data שאילתת המדיה, CSS יכול להצטרף לשיפור חוויית המשתמש ולמלא את חלקו בשמירת נתונים.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

קוד ה-CSS שלמעלה משמש ברכיב הזה של גלילה במדיה, והחיסכון יכול להיות משמעותי. ככל שאזור התצוגה של המבקר גדול יותר, כך אפשר לחסוך יותר זמן בטעינת הדף. השמירה נמשכת בזמן שהמשתמשים יוצרים אינטראקציה עם רכיבי הגלילה של המדיה. לכל התמונות יש מאפייני loading="lazy", ובשילוב עם הסתרת הרכיב לחלוטין באמצעות CSS, זה אומר שלעולם לא תישלח בקשה לרשת לגבי התמונה.

בבדיקה שלי, באזור תצוגה בגודל בינוני, נטענו בהתחלה 40 בקשות ו-700kb של משאבים. כשהמשתמש גולל את רשימת המדיה, נטענות עוד בקשות ומשאבים. עם CSS ושאילתת המדיה של הנתונים המצומצמים, נטענות 10 בקשות ו-172kb של משאבים. זה חצי מגה-בייט של חיסכון, והמשתמש אפילו לא גלל את המדיה, כך שלא מתבצעות בקשות נוספות.

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

משאבים

• prefers-reduced-data specification
• העדפה לצמצום נתונים (prefers-reduced-data) ב-MDN
• העדפה לצמצום נתונים בממשק משתמש גרפי אתגר
• Smashing Magazine: Improving Core Web Vitals, A Smashing Magazine Case Study

התכונות של גלילה עם הצמדה מוגבלות מדי

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

ממשקי API חדשים

snapChanging()

האירוע הזה מופעל ברגע שהדפדפן משחרר חלון צאצא שמוצמד. כך ממשק המשתמש יכול לשקף את העובדה שאין רכיב צאצא של הצמדה ואת מצב ההצמדה הלא קבוע של רכיב ה-scroller, כי הוא נמצא בשימוש וימוקם במקום חדש.

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

האירוע הזה מופעל ברגע שהדפדפן נצמד לחלון צאצא חדש והגלילה מסתיימת. כך כל ממשק משתמש שתלוי בצאצא המוצמד יכול להתעדכן ולשקף את החיבור.

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

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

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

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

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

אחרי הצעות ה-scroll snap האלה, קל הרבה יותר ליצור סליידר, קרוסלה או גלריה, כי הדפדפן מציע עכשיו נוחות למשימה, ומבטל את הצורך ב-observers ובקוד של scroll orchestration לטובת שימוש בממשקי API מובנים.

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

משאבים

• Scroll Snap 2 draft specification
• Scroll Snap 2 explainers
• הדגמות של Snap

רכיבה על אופניים בין מדינות מוכרות

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

אחרי toggle(), אפשר ליצור מצבים מותאמים אישית בכל רכיב כדי ש-CSS ישנה את הסגנון וישתמש בו. הוא מאפשר לקבץ חלונות, להחליף בין חלונות, להחליף בין חלונות בכיוון מסוים ועוד.

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

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

וסגנונות ה-CSS הרלוונטיים:toggle()

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

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

משאבים

• טיוטת המפרט של toggle()‎
• ‫Bramus: The Future of CSS: CSS Toggles

התאמה אישית של אלמנטים נבחרים

לפני <selectmenu>, לא הייתה אפשרות להתאים אישית רכיבי <option> עם HTML עשיר או לשנות הרבה דברים בתצוגה של רשימת אפשרויות. לכן, מפתחים נאלצו לטעון ספריות חיצוניות ששחזרו חלק גדול מהפונקציונליות של <select>, וזה דרש הרבה עבודה.

אחרי <selectmenu>, מפתחים יכולים לספק HTML עשיר לרכיבי אפשרויות ולעצב אותם ככל שצריך, תוך עמידה בדרישות הנגישות ומתן HTML סמנטי.

בדוגמה הבאה, שנלקחה מ<selectmenu> דף ההסבר, נוצר תפריט בחירה חדש עם כמה אפשרויות בסיסיות:

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

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

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

אתם יכולים לנסות את רכיב <selectmenu> ב-Chromium ב-Canary עם הדגל web experiments מופעל. בשנת 2023 והלאה, כדאי לשים לב לרכיבי תפריט נפתח שניתן להתאים אישית.

משאבים

• מפרט של selectmenu
• הדגמה של תפריט בחירה

הצמדת אלמנט לאלמנט אחר

לפני anchor(), האסטרטגיות position absolute ו-relative היו זמינות למפתחים כדי להזיז רכיבי צאצא בתוך רכיב אב.

אחרי anchor(), מפתחים יכולים למקם רכיבים ביחס לרכיבים אחרים, בלי קשר להיותם צאצאים או לא. המאפיין הזה גם מאפשר למפתחים לציין את השוליים שביחס אליהם ימוקם הרכיב, וכולל אפשרויות נוספות ליצירת קשרים בין מיקומי הרכיבים.

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

משאבים

• anchor() explainer