תמונת הבסיס 2023

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

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

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

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

צילום מסך של Can I Use עם התג שזמין לכולם בפריסת רשת של CSS.

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

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

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

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

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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

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

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

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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

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

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

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

לוח ציור מחוץ למסך

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

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

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

מידע נוסף זמין במאמר OffscreenCanvas – האצת פעולות ב-Canvas באמצעות Web Worker

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

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

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

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

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

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

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

המאפיין inert

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

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

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

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

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

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

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

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

NumberFormat V3

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

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

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

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

Fullscreen API

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

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

במדריך הזה ל-Fullscreen API ב-MDN מפורט מידע נוסף.

הסלקטור :has() ב-CSS

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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

תכונות נוספות שנוספו ל-Baseline השנה

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

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