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

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

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

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

בזכות הפענוח הזה, הרינדור של 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

כשמסמנים רכיב DOM כ-inert, מסירים ממנו תנועה או אינטראקציה. המאפיין 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, כולל השינוי שמוסיף ניתוח רגוע.
• בורר המחלקה המדומה של CSS :dir()
• יחידת אורך cap של CSS
• אנונימיזציה של שירותי CSS
• תמיכה בשאילתות מדיה לרכיבי <source> בסרטון HTML
• רכיב ה-HTML <search>
• טעינה מדורגת של רכיבי <iframe> (נחיתה ב-Firefox 121 ב-19 בדצמבר)
• יחידות גובה-רוחב של lh ו-rlh יחידות CSS

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