תמונת הבסיס 2023

דף Baseline מגיע ל-caniuse.com! בפוסט הזה נסביר על השילוב ונסביר גם על חלק מהתכונות שהפכו לחלק מ-Baseline ב-2023.

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

• Safari (macOS ו-iOS)
• Firefox (מחשב ו-Android)
• Chrome (מחשב ו-Android)
• Edge (מחשב)

אפליקציית Baseline מגיעה ליעד 'מותר להשתמש'

השלב הבא בהבהרת הזמינות של התכונות, ב-Baseline מתחיל השירות 'Can I Use' החל מהיום. בביקור בחלק מהדפים בתוכנית Can I Use, יופיע תג שמציין אם התכונה זמינה לכולם ב-Baseline.

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

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

שאילתות של קונטיינרים ויחידות של שאילתות מאגר

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

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

פונקציות ומרחבי צבע חדשים

עכשיו יש ב-CSS תמיכה במרחבי צבעים שמאפשרים לגשת לצבעים מחוץ ללוח ה-sRGB. פירוש הדבר הוא שתוכל לתמוך בצגי HD (איכות גבוהה), באמצעות צבעים מלוחות איכות HD.

מודלים חדשים של צבע

עכשיו ב-Baseline, פונקציות הצבע lch(), lab(), oklch() ו-oklab() נותנות גישה למודלים של הצבעים LCH, Lab, OKLCH ו-OKLab.

הפונקציה color-mix()

בנוסף, פונקציות צבע חדשות הפכו לחלק מ-Baseline. הפונקציה color-mix() מאפשרת שילוב של צבע אחד לצבע אחר, בכל מרחב צבעים. בקובץ ה-CSS הבא, 25% מהכחול מעורבבים בלבן, במרחב הצבעים srgb.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

מידע נוסף על color-mix()

הפונקציה color()

אפשר להשתמש בפונקציה color() לכל מרחב צבעים שמציין צבעים בערוצים R, G ו-B. הפרמטר color() לוקח קודם פרמטר של מרחב צבעים, אחר כך סדרה של ערכי ערוצים עבור RGB, ובאופן אופציונלי גם פרמטר אלפא. ניתן להשתמש בכל אחת מהאפשרויות הבאות: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 וגם xyz-d65. לדוגמה:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

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

זרמי דחיסה

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

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

אזור העריכה מחוץ למסך

לפני OffscreenCanvas, אפשרויות השרטוט של הקנבס היו קשורות לרכיב <canvas>, כלומר התבססו ישירות על ה-DOM. OutscreenCanvas, כפי מהשם, מחלק את ה-DOM ל-Canvas API על ידי העברתו אל מחוץ למסך.

בזכות הפענוח הזה, הרינדור של OffscreenCanvas נותק לגמרי מה-DOM, ולכן יש שיפורי מהירות מסוימים על פני אזור העריכה הרגיל, כי אין סנכרון בין שניהם. יותר מזה, אפשר להשתמש בה כדי להעביר את עבודת העיבוד ל-Web Worker למרות שאין DOM זמין, מה שהופך את ה-thread הראשי למהיר יותר ורספונסיבי יותר לאפליקציה.

מידע נוסף ב-OutscreenCanvas – האצה של פעולות על קנבס באמצעות Web worker

טעינה מראש של מודול

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

מידע נוסף זמין במאמר טעינה מראש של מודולים.

פונקציות טריגונומטריות ב-CSS

בשנת 2023, פונקציות טריגונומטריות מהמפרט של ערכי CSS ויחידות ברמה 4 יכולת פעולה הדדית. כלומר, הפונקציות sin(), cos(), tan(), asin(), acos(), atan() ו-atan2() הן חלק מ-Baseline 2023.

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

המאפיין inert

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

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

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

רשת משנה בפריסת רשת של CSS

הערך subgrid של grid-template-columns ו-grid-template-rows מאפשר להשתמש בטראקים שהוגדרו ברשת הורה, ברשתות בתוך רשתות. כלומר, ניתן ליישר רכיבים בתוך הרשתות המקוננות האלה זה עם זה.

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

פורמט מספרים V3

Intl.NumberFormat V3 הוא קבוצה של תכונות חדשות עבור Intl.NumberFormat, שהפך לחלק מ-Baseline במהלך 2023. התכונות הנוספות הן:

• שלוש פונקציות חדשות לעיצוב טווחי מספרים: formatRange, formatRangeToParts ו-SelectRange.
• טיפוסים בני מנייה (enum)
• אפשרויות חדשות לעיגול ולדיוק
• עיגול עדיפות
• פרשו מחרוזות כמספרים עשרוניים
• מצבי עיגול
• סימן 'בתצוגה' שלילית

ההצעה ל-NumberFormat V3 מפרטת כל אחת מהתכונות החדשות.

ממשק ה-API של מסך מלא

ה-API של מסך מלא מאפשר להציב רכיב, כמו <video>, במצב מסך מלא, על-ידי קריאה ל-method requestFullscreen(). הוא מספק גם שיטות לזיהוי אם רכיב נמצא במצב מסך מלא, ואם המסמך נמצא במצב שבו ניתן לבקש מצב מסך מלא.

מידע נוסף זמין במדריך ל-API במסך מלא ב-MDN.

הבורר :has() של CSS

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

ניתן לקבל מידע נוסף ב:has(): הבורר המשפחתי.

תכונות נוספות שהצטרפו ל-Baseline השנה

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

• גיליונות סגנונות ליצירה
• סלקטורים מורכבים של n-th-צאצא ב-CSS
• תחביר הטווח של שאילתות מדיה
• ייבוא מפות
• ערכים מרובים לתצוגה של שירות CSS
• @counter-style
• נכס ה-CSS counter-set
• פונקציית ההתאמה linear()
• מערכת קבצים פרטית מקורית (OPFS)
• CSS Nesting, כולל השינוי שמוסיף ניתוח רגוע.
• בורר המחלקה המדומה של CSS :dir()
• יחידת אורך cap של CSS
• אנונימיזציה של שירותי CSS
• תמיכה בשאילתות מדיה לרכיבי <source> בסרטון HTML
• רכיב ה-HTML <search>
• טעינה מדורגת של <iframe> רכיבים (נחיתה ב-Firefox 121 ב-19 בדצמבר)
• יחידות גובה-רוחב של lh ו-rlh יחידות CSS

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