דף זה תורגם על ידי Cloud Translation API.

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

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

Adam Argyle

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

סקירה כללית

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

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

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

חדשות ב-2022	2022 והלאה
תאימות דפדפנים בשנת 2022	@scope
@layer	@nest
רשת משנה	@media (prefers-reduced-data)
‎@container	‎@custom-media
hwb()‎	טווחים של שאילתות מדיה
lch,‏ oklch,‏ lab,‏ oklab,‏ display-p3 וכו'	@property
color-mix()‎	scroll-start
color-contrast()‎	‎:snap-target
תחביר של צבעים יחסיים	snapChanging() ו-snapChanged()
מרחבי צבעים של טווח צבעים	toggle()‎
accent-color	anchor()‎
inert	<selectmenu>
גופנים צבעוניים v1
וריאציות של יחידת תצוגה
‎:has()‎

תאימות דפדפן

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

Compat 2021

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

sticky מיקום
aspect-ratio sizing
פריסה של flex
פריסה של grid
מיקום ואנימציה של transform

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

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

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

@layer
פונקציות ומרחבי צבעים
בלימה
<dialog>
תאימות טפסים
גלילה
רשת משנה
טיפוגרפיה
יחידות באזור התצוגה
תאימות לאינטרנט

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

עדכונים חדשים לשנת 2022

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

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

תמיכה בדפדפנים

מקור

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

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

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

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

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

משאבים

רשת משנה

תמיכה בדפדפן

מקור

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

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

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

צילום מסך של הדגמה של רשת משנה, באמצעות הכלים של שכבת-העל של הרשת ב-Chrome DevTools כדי להציג את הקווים שמוגדרים ב-CSS.

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

צילום מסך של חלונית הרכיבים ב-Chrome Devtools עם תוויות שמציינות לאילו רכיבים יש פריסות של רשת או רשת משנה. — צילום מסך מ-Firefox Devtools

משאבים

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

תמיכה בדפדפנים

מקור

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

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

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

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

הדגמה מאת Una Kravets

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

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

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

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

הדגמה מאת Max Böck

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

משאבים

`accent-color`

תמיכה בדפדפן

מקור

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

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

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

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

רכיבי HTML עם הדגשה בהירה וחשוכה זה לצד זה לצורך השוואה.

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

משאבים

רמת צבע 4 ו-5

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

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

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

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

משאבים

מרחבי צבעים

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

ב-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-contrast()`

תמיכה בדפדפנים

מקור

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

צילום מסך של 3 לוחות צבעים, שבהם מוצגים 14 צבעים וצבעי הניגודיות הלבנים או השחורים שלהם לטקסט. — דוגמה מלוחות הצבעים של עיצוב חדשני תלת-ממדי מ-2014

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

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

צילום מסך של הדגמה של 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 עצמה.

משאבים

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

תמיכה בדפדפנים

מקור

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

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

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

צילום מסך עם 3 עמודות, כל עמודה כהה או בהירה יותר מהעמודה במרכז. — הדגמה

אפשר להשתמש בפונקציה הזו גם ליצירת גלריית צבעים. הנה הדגמה שבה יצירת פלטות שלמות על סמך צבע בסיס שסופק. קבוצת ה-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);
}

צילום מסך של 15 פלטות שנוצרו באופן דינמי באמצעות CSS. — הדגמה

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

משאבים

מרחבי צבעים בגוון מדורג

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

4 צבעים כהים בתוך רשת, כולם מ-cyan עד deeppink. ב-LCH וב-LAB יש רמת חיות עקבית יותר, בעוד שב-sRGB יש ירידה מסוימת ברמת הרוויה באמצע.

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

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

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

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

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

11 מרחבי צבעים שמוצגים בהשוואה בין שחור ללבן.

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

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

11 מרחבי צבעים שמוצגת בהם השוואה בין כחול לשחור.

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

משאבים

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

משאבים

גופנים מסוג COLRv1

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

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

תצוגה חזותית של השוואה ותרשים עמודות, שמראים שהגופנים של COLRv1 חדים וקטנים יותר. — התמונה מופיעה באתר https://developer.chrome.com/blog/colrv1-fonts/

הנה דוגמה מפוסט בבלוג למפתחים של 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;
}

צילום מסך של הגופן באנג'י ספייס עם המילה DUNE. — גופן Bungee Spice מוצג עם צבעים מותאמים אישית, המקור מ-https://developer.chrome.com/blog/colrv1-fonts/

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

משאבים

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

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

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

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

משאבים

`: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) {...}

הערה: :focus-within כבר מתנהג באופן דומה ל-section:has(*:focus-visible), ועדיף להשתמש בו במקום זאת.

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

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

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

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

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

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

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

משאבים

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 הרבה יותר, אבל הפעולות הקטנות האלה יכולות להועיל מאוד.

משאבים

המחיר היה `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) {
  …
}

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

משאבים

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

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

משאבים

איך נהדר להשתמש בסלקטורים בתצוגת עץ

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

משאבים

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

תמיכה בדפדפנים

מקור

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

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

בדוגמה הבאה, אפשר להפוך את ההיקפים של המוסכמה למתן שמות ל-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;
  }
}

משאבים

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

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

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

צילום מסך של פריסה של 'לבנים', שבה המספרים נעים בחלק העליון ואז יורדים. — תמונה והדגמה מ-Smashing Magazine
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

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

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

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

משאבים

שירות ה-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 יכול לעזור כאן.

משאבים

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

לפני שההצעות האלה יתנו לכם את הגלילה, תהליך כתיבת 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;
}

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

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

משאבים

רכיבה בין מצבים מוכרים

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

משאבים

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

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

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

סקירה כללית

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

תאימות דפדפן

Compat 2021

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

עדכונים חדשים לשנת 2022

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

משאבים

רשת משנה

משאבים

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

משאבים

accent-color

משאבים

רמת צבע 4 ו-5

hwb()

משאבים

מרחבי צבעים

color-mix()

משאבים

color-contrast()

משאבים

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

משאבים

מרחבי צבעים בגוון מדורג

משאבים

inert

משאבים

גופנים מסוג COLRv1

משאבים

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

משאבים

:has()

משאבים

2022 והלאה

מאפיינים מותאמים אישית עם סיווג רופף

Animation

משאבים

המחיר היה min-width או max-width

משאבים

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

משאבים

איך נהדר להשתמש בסלקטורים בתצוגת עץ

משאבים

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

משאבים

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

משאבים

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

משאבים

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

ממשקי API חדשים

snapChanging()

snapChanged()

scroll-start

:snap-target

משאבים

רכיבה בין מצבים מוכרים

משאבים

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

משאבים

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

משאבים

`accent-color`

`hwb()`

`color-mix()`

`color-contrast()`

`inert`

`:has()`

המחיר היה `min-width` או `max-width`

`snapChanging()`

`snapChanged()`

`scroll-start`

`:snap-target`