תמונת הבסיס 2023

Rachel Andrew

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

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

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

נקודת הבסיס נוחתת ב-Can I Use

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

צילום מסך של האם אוכל להשתמש עם התג שזמין לכולם ב-CSS Grid Layout.

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

צילום מסך של Can I Use עם התג החדש הזמין בשאילתות קונטיינר.

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

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

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

תמיכה בדפדפן

  • Chrome: 105.
  • קצה: 105.
  • Firefox: 110.
  • Safari: 16.

מקור

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

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

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

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

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

תמיכה בדפדפן

  • Chrome: 111.
  • קצה: 111.
  • Firefox: 113.
  • Safari: 15.

מקור

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

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

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

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

תמיכה בדפדפן

  • Chrome: 111.
  • קצה: 111.
  • Firefox: 113.
  • Safari: 15.

מקור

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

שידורי דחיסה

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

תמיכה בדפדפן

  • Chrome: 80.
  • קצה: 80.
  • Firefox: 113.
  • Safari: 16.4.

מקור

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

קנבס שלא מוצג במסך

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

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

תמיכה בדפדפן

  • Chrome: 69.
  • קצה: 79.
  • Firefox: 105.
  • Safari: 16.4.

מקור

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

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

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

תמיכה בדפדפן

  • Chrome: 66.
  • קצה: 79 או פחות.
  • Firefox: 115.
  • Safari: 17.

מקור

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

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

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

תמיכה בדפדפן

  • Chrome: 111.
  • קצה: 111.
  • Firefox: 108.
  • Safari: 15.4.

מקור

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

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

המאפיין הפנימי

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

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

תמיכה בדפדפן

  • Chrome: 102.
  • קצה: 102.
  • Firefox: 112.
  • Safari: 15.5.

מקור

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

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

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

תמיכה בדפדפן

  • Chrome: 117.
  • קצה: 117.
  • Firefox: 71.
  • Safari: 16.

מקור

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

פורמט NumberFormat V3

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

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

תמיכה בדפדפן

  • Chrome: 106.
  • קצה: 106.
  • Firefox: 116.
  • Safari: 15.4.

מקור

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

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

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

תמיכה בדפדפן

  • Chrome: 71.
  • קצה: 79.
  • Firefox: 64.
  • Safari: 16.4.

מקור

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

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

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

תמיכה בדפדפן

  • Chrome: 105.
  • קצה: 105.
  • Firefox: 121.
  • Safari: 15.4.

מקור

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

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

תכונות אחרות שהפכו לחלק מ-Baseline השנה:

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