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

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

Adam Argyle

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

סקירה כללית

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

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

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

תאימות דפדפן

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

תחרויות 2021

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

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

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

פעולות הדדיות 2022

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

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

זוהי רשימה מרגשת ושאפתנית שאשמח מאוד לגלות.

סיכום של שנת 2022

באופן לא מפתיע, מצב שירות ה-CSS 2022 מושפע באופן משמעותי מהפעילות של הכלי 'שיתוף וסנכרון' לשנת 2022.

דרג שכבות

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

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

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

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

משאבים

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

רשת משנה

לפני 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;
}

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

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

משאבים

• מפרט של רשת משנה
• רשת משנה ב-MDN
• Bramus: סרטוני הדרכה מעשיים בנושא תת-רשתות של CSS

שאילתות לגבי קונטיינר

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

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

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

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

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

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

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

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

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

משאבים

• מפרט שאילתות של קונטיינרים
• הסבר על שאילתות לגבי קונטיינר
• שאילתות על קונטיינר ב-MDN
• הגרסה החדשה והרספונסיבית ב-web.dev
• הדגמה של יומן Google מאת Una
• אוסף של שאילתות קונטיינר מעולה
• איך יצרנו את Designcember באתר web.dev
• Ahmad Shadeed: אמירת שלום לשאילתות קונטיינר של CSS

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 השימושי הזה.

משאבים

• מפרט צבעי הדגשה
• צבע הדגשה ב-MDN
• accent-color ב-web.dev
• Bramus: פקדי גוון בממשק המשתמש עם צבע הדגשה של CSS

רמת צבע 4 ו-5

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

אבל לא בשנת 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() – סימון צבע לבני אדם?

מרחבי צבעים

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

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

color-mix()

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

אחרי color-mix(), מפתחים ומעצבים יוכלו לשלב צבעים בדפדפן לצד כל הסגנונות האחרים שלהם, בלי להפעיל תהליכי build או לכלול את 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: יצירת עיצוב צבעים באמצעות תכונות ה-CSS הבאות

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()
• color-contrast() ב-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
);

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

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

לחקירות עומק, לדוגמאות ולתגובות, קראו את השרשור הזה ב-Twitter.

משאבים

• מפרט של אינטרפולציה הדרגתית
• הדגמה של השוואה בין הדרגתיים במרחבים משותפים
• notebook ניתן לצפייה שמשווה בין הדרגתיים

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
• הטמעת נתונים ב-MDN
• מפתחי Chrome: השקת 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: תצוגות גדולות, קטנות ודינמיות

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

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

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

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

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

משאבים

• המפרט של:has()
• :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>. המשמעות היא שהצל ימשיך לפעול, למרות שניתן ערך לא חוקי לאחד מהמאפיינים המותאמים אישית שלו. במקום להיכשל, היא חוזרת לגרסה 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
• @property ב-MDN
• @property on web.dev
• הדגמה של התמקדות בזום
• הטריקים של CSS: Exploring @property ואת כוחות האנימציה שלו

היית במקום 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
• תחביר של טווח שאילתות מדיה בפלאגין PostCSS

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

לפני @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.

משאבים

• מפרט של שאילתות מדיה מותאמות אישית
• הפלאגין של PostCSS לשאילתות מדיה מותאמות אישית

הבוררים מקננים זה כל כך נחמד

לפני @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
• פלאגין של@nest PostCSS
• Bramus: העתיד של CSS: סלקטורים Nesting

בחירת סגנונות היא ממש קשה

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

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

בדוגמה הבאה, ניתן להפוך את ההיקף של מוסכמות מתן השמות ל-BEM ל-Intent בפועל. הבורר 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
• @scope הסברer

אין דרך CSS לפריסת בטון

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

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

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

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

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

משאבים

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

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

לחוויית השימוש המצומצמת הזו בנתונים יש יותר יתרונות מאשר חיסכון בנתונים. אפשר לראות יותר שמות ואין תמונות שער שמסיחות את הדעת שיגנבו תשומת לב. משתמשים רבים גולשים במצב חוסך הנתונים (Data Saver) כי הם משלמים לפי מגה-בייט של נתונים. זה ממש נהדר לראות ששירות CSS יכול לעזור.

משאבים

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

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

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

ממשקי API חדשים

snapChanging()

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

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

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

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

משאבים

• מפרט טיוטה של Snap 2 עם גלילה
• הסברים על גלילה של Snap 2
• הדגמות Snap

רכיבה בין מדינות ידועות

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

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

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

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

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

li {
  toggle-root: check self;
}

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

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

משאבים

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

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

לפני <selectmenu>, ל-CSS לא הייתה אפשרות להתאים אישית רכיבי <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, אם הפעלתם את הסימון של ניסויים באינטרנט. בשנת 2023 ואילך מומלץ להיזהר מבחירת רכיבים בתפריט שאפשר להתאים אישית.

משאבים

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

עיגון של רכיב אחר

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

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

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

משאבים

• anchor()