Baseline מגיע אל caniuse.com! בפוסט הזה נסביר על השילוב ונציג כמה מהתכונות שהפכו לחלק מ-Baseline בשנת 2023.
לפי ההגדרה החדשה של Baseline, יש שני שלבים במחזור החיים של תכונה: השלב שבו היא זמינה לראשונה, ואז השלב שבו היא זמינה לכולם אחרי 30 חודשים. תכונה הופכת לחלק מ-Baseline כשהיא זמינה לפעולה הדדית בדפדפנים הבאים:
- Safari (ב-macOS וב-iOS)
- Firefox (במחשב וב-Android)
- Chrome (במחשב וב-Android)
- Edge (במחשב)
קו הבסיס נוחת על 'האם אפשר להשתמש'
כחלק מהשלב הבא בהבהרת זמינות התכונות, החל מהיום תכונות Baseline מתחילות להופיע בדף 'האם אפשר להשתמש?'. בדפים מסוימים ב-Can I Use תוצג תגית שמציינת אם התכונה זמינה באופן נרחב ב-Baseline.
תכונות חדשות שנוספו ל-Baseline יופיעו גם הן עם תג, לצד השנה שבה הן הפכו לזמינות. כל מה שהפך לתואם בין קבוצת הדפדפנים העיקריים השנה הוא חלק מ-Baseline 2023.
בהמשך הפוסט נסביר על התכונות שהגיעו לציון הדרך הזה במהלך 2023. כל התכונות האלה הן בסיס להשוואה 2023 – תכונות חדשות שזמינות עכשיו.
שאילתות בקונטיינרים בגודל שונה ויחידות של שאילתות בקונטיינרים
שאילתות מאגר של גודל מאפשרות לבצע שאילתות לגבי הגודל של רכיב, בדומה לשאילתות מדיה שמאפשרות לבצע שאילתות לגבי הגודל של אזור התצוגה. בעזרת רכיבים אלה קל יותר ליצור רכיבים לשימוש חוזר, כי אפשר ליצור רכיבים שתגובתם משתנה בהתאם לגודל האזור שבו הם ממוקמים.
העיצוב של הכרטיס הבא משתנה בהתאם לרוחב הרכיב. מידע נוסף זמין במאמר שאילתות בקונטיינרים מגיעות לדפדפנים יציבים.
פונקציות ומרחבי צבעים חדשים
עכשיו יש ב-CSS תמיכה במרחבי צבעים שמאפשרים לגשת לצבעים מחוץ לטווח הצבעים של sRGB. פירוש הדבר הוא שאפשר לתמוך במסכים באיכות HD (High Definition) באמצעות צבעים מ-gamut של HD.
מודלים חדשים של צבעים
עכשיו ב-Baseline, פונקציות הצבע lch()
, lab()
, oklch()
ו-oklab()
נותנות גישה למודלים של צבע LCH, Lab, OKLCH ו-OKLab.
![צילום מסך של הכלי לעריכת gradient.style עם פס צבעים ורוד עד כחול.](https://web.dev/static/blog/baseline2023/image/gradient-style.png?hl=he)
הפונקציה color-mix()
בנוסף, פונקציות צבע חדשות הפכו לחלק מ-Baseline. הפונקציה color-mix()
מאפשרת לערבב צבע אחד עם צבע אחר בכל אחד ממרחב הצבעים.
בקוד ה-CSS הבא, 25% כחול מעורבב עם לבן במרחב הצבעים srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
הפונקציה 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. באמצעות OffscreenCanvas, ה-DOM מופרד מ-Canvas API על ידי העברת הקנבס מחוץ למסך.
בזכות ההפרדה הזו, היצירה של OffscreenCanvas מנותקת לחלוטין מ-DOM, כך שיש שיפורים מסוימים במהירות בהשוואה לקנבס רגיל כי אין סנכרון בין השניים. אפשר גם להשתמש בו כדי להעביר את עבודת הרינדור ל-Web Worker, גם אם אין DOM זמין, וכך לפנות את השרשור הראשי ולשפר את תגובת האפליקציה.
מידע נוסף זמין במאמר OffscreenCanvas – האצת פעולות ב-Canvas באמצעות Web Worker
טעינה מראש של מודול
טעינת מודולים מראש יכולה לקצר את זמן ההורדה והעיבוד. מוסיפים את הערך rel="modulepreload"
לאלמנט הקישור שמפנה למודול JavaScript, והדפדפן מקבל את המודול, מנתח אותו ומעבד אותו, ומכניס את התוצאות למפת המודול כדי להריץ אותו.
מידע נוסף זמין במאמר טעינה מראש של מודולים.
פונקציות טריגונומטריות ב-CSS
בשנת 2023, פונקציות טריגונומטריות מהמפרט של CSS Values and Units ברמה 4 הפכו לניתנות לפעולה הדדית. כלומר, הפונקציות sin()
, cos()
, tan()
, asin()
, acos()
, atan()
ו-atan2()
הן חלק מ-Baseline 2023.
במאמר פונקציות טריגונומטריות ב-CSS מוסבר איך משתמשים בפונקציות האלה ומפורטות דוגמאות לשימוש.
המאפיין inert
כשמסמנים רכיב DOM כ-inert
, מסירים ממנו תנועה או אינטראקציה. המאפיין inert
גורם לדפדפן להתעלם מהרכיב:
- האירוע
click
לא מופעל אם משתמש לוחץ על הרכיב. - הרכיב לא יקבל את המיקוד.
- הרכיב והתוכן שלו לא נכללים בעץ הנגישות.
מוסיפים את המאפיין הזה לאלמנטים שנמצאים מחוץ למסך או מוסתרים בדרך אחרת. למידע נוסף, ראו המאפיין inert
.
רשת משנה בפריסת רשת של CSS
הערך subgrid
עבור grid-template-columns
ו-grid-template-rows
מאפשר להשתמש בטראקים שהוגדרו ברשת הורה, ברשתות בתים. המשמעות היא שאפשר ליישר רכיבים ברשתות מוערמות נפרדות זה לזה.
במאמר CSS subgrid מפורטות דוגמאות וקישורים למאמרים ודוגמאות רבים נוספים שמציגים תרחישי שימוש של רשתות משנה.
NumberFormat V3
Intl.NumberFormat V3 היא קבוצה של תכונות חדשות ל-Intl.NumberFormat שהפכו לחלק מ-Baseline במהלך 2023. התכונות הנוספות הן:
- שלוש פונקציות חדשות לפורמט של טווחי מספרים:
formatRange
,formatRangeToParts
ו-selectRange
- קיבוץ של טיפוסים בני מנייה (enum)
- אפשרויות חדשות של עיגול ודיוק
- עדיפות העיגול
- פרשנות מחרוזות כמספרים עשרוניים
- מצבי עיגול
- חתימת תצוגה שלילית
הצעה ל-NumberFormat V3 מפרטה כל אחת מהתכונות החדשות האלה.
Fullscreen API
כדי להציב רכיב כמו <video>
במצב מסך מלא, אפשר להפעיל את השיטה requestFullscreen()
ב-Fullscreen API. בנוסף, הוא מספק שיטות לזיהוי אם רכיב מסוים נמצא במצב מסך מלא, ואם המסמך נמצא במצב שמאפשר לבקש מצב מסך מלא.
במדריך הזה ל-Fullscreen API ב-MDN מפורט מידע נוסף.
הסלקטור :has()
ב-CSS
האפשרות היחידה ליצירת Baseline 2023 היא הבורר :has()
, שיגיע ל-Firefox 121 ב-19 בדצמבר. בין היתר, הסלקטור הזה משמש כבורר הורה, ומאפשר לכם לבחור רכיב על סמך דברים שנמצאים בתוכו. לדוגמה, אפשר להחיל קובץ CSS שונה בהתאם לכך שיש תמונה בתוך רכיב או לא.
מידע נוסף זמין במאמר :has(): הבורר של הקבוצה המשפחתית.
תכונות נוספות שנוספו ל-Baseline השנה
תכונות נוספות שהצטרפו ל-Baseline השנה כוללות את התכונות הבאות:
- גיליון סגנונות שניתן ליצור
- סלקטורים מורכבים מסוג nth-child ב-CSS
- התחביר של טווחים לשאילתות מדיה
- ייבוא מפות
- הצגת מספר ערכים ב-CSS
- @counter-style
- מאפיין ה-CSS
counter-set
- פונקציית העקומה
linear()
- Origin Private File System (OPFS)
- עיצוב עץ ב-CSS, כולל השינוי הכולל ניתוח משוחרר.
- סלקטור של פסאודו-סיווג
:dir()
ב-CSS - יחידת אורך
cap
ב-CSS - אנונימיזציה של CSS
- תמיכה בשאילתות מדיה לרכיבי
<source>
של סרטונים ב-HTML - הרכיב
<search>
ב-HTML - טעינה מדורגת של רכיבי
<iframe>
(התכונה תגיע ל-Firefox 121 ב-19 בדצמבר) - יחידות line-height ב-CSS
lh
ו-rlh
תכונות רבות מאלה הגיעו ליכולת פעולה הדדית דרך שיתוף הפעולה ב-Interop 2023. אנחנו שמחים לראות איך אפשר להעביר תכונות דרך התהליך הזה ולהציג אותן ב-Baseline כתכונות חדשות, וכך להפעיל את הטיימר עד שהן יהיו זמינות לכולם. כך תוכלו לקבל החלטות ברורות יותר לגבי הזמן שבו כדאי להטמיע תכונות בפרויקטים שלכם.