תאריך פרסום: 31 במרץ 2025
עבר עוד חודש, ומאז ה-Digest החודשי הקודם של Baseline, קרו הרבה דברים. במהדורה הזו נציג סיכום של כמה פוסטים שפרסמנו כאן ב-web.dev, כמה תכונות חדשות שנוספו ל-Baseline וגם כמה עדכונים בכלים של הקהילה.
הגרסה 0.6.0 של ESLint הושקה
לאחרונה פרסמנו הודעה על השקת התמיכה של ESLint ב-linting של CSS. במסגרת ההשקה הזו הוספנו כלל חדש ל-ESLint – require-baseline – לזיהוי שגיאות בקוד של תכונות ה-CSS שבהן אתם משתמשים בפרויקט, ולבדיקה אם הן מגיעות לסף מסוים של Baseline.
לאחרונה, ESLint השיקה את גרסה 0.6.0 של חבילת @eslint/css, שכוללת עדכון חדש חשוב שבו השם של כלל require-baseline השתנה ל-use-baseline. העדכון הזה נראה קטן, אבל הוא משפר את הקריאוּת של הכלל. יש גם כמה תכונות חשובות אחרות ותיקוני באגים במהדורה הזו, כמו היכולת הנוספת של הכלל use-baseline לזהות שגיאות בקוד של בלוקים בתצוגת עץ של CSS. אם אתם משתמשים בגרסה קודמת של @eslint/css, כדאי לבדוק את העדכון הזה.
איך שולחים שאילתות למרכז הבקרה של פלטפורמת האינטרנט
מוקדם יותר החודש פרסמנו פוסט בנושא שליחת שאילתות למרכז הבקרה של פלטפורמת האינטרנט. אפשר לשלוח שאילתות למרכז הבקרה הזה דרך חזית האתר שלו, וגם דרך ממשק HTTP API. האפשרות הזו יכולה להיות שימושית לכלים של Baseline, כי אפשר לשלוח שאילתה ל-API כדי למצוא תכונות שהגיעו לסף ספציפי של Baseline.
ה-API הזה יכול להיות שימושי בכלים שבהם צריך לקבל במהירות מידע על תכונות ספציפיות. לדוגמה, אפשר להשתמש בכלי מהסוג הזה כדי לכתוב סקריפט שיציג לכם במרווחי זמן מסוימים אילו תכונות הפכו לאחרונה לזמינות בגרסת Baseline או לזמינות רחבה. אם זה נשמע לכם שימושי, כדאי לקרוא את הפוסט.
איך לחשוב על Baseline ועל polyfills
המשימה של Baseline היא להבהיר באילו תכונות אפשר להשתמש בבטחה – אבל גם עם הבהירות הנוספת הזו, עדיין צריך לחשוב איך לאמץ תכונות באופן הגיוני לאפליקציות האינטרנט שלכם. פוליפילים הם חלק גדול מהתהליך הזה. בסיס ההשוואה לא מתייחס ל-polyfills כדי לקבוע אם תכונות הן חדשות או זמינות באופן נרחב, והוא לא מנסה להחליט אם כדאי להשתמש בהן. ההחלטה הזו ספציפית לאפליקציה שלכם, אבל היא שיקול חשוב.
לאחרונה פרסמנו פוסט בנושא Baseline ו-polyfills, ואנחנו חושבים שהוא מספק מסגרת מועילה לשימוש בהם. כשתכונות הופכות לזמינות ברמה הבסיסית או לזמינות רחבה, אנחנו מקווים שהצורך ב-polyfills יהיה קטן יותר. אין ספק ש-polyfills הם כלים שימושיים בכלי הפיתוח, אבל יש להם חסרונות – הם יכולים להשפיע לרעה על ביצועי האתר, ובמקרים מסוימים הם עלולים לגרום לבעיות נגישות. אני מקווה שהמדריך הזה יעזור לך להתמודד עם השאלה הזו.
contenteditable="plaintext-only" זמין עכשיו כבסיס
המאפיין contenteditable ברכיב HTML מאפשר למשתמש לשנות את התוכן שלו כאילו מדובר בשדה טקסט. כלומר, לדוגמה, אפשר למקם את המאפיין ברכיב <p> והמשתמש יוכל לקיים איתו אינטראקציה כמו עם רכיב <textarea>. בחלק מתרחישי השימוש, השימוש ב-contenteditable מציע יתרונות על פני רכיבי טפסים רגילים.
עם זאת, משתמשים מדביקים דברים ברכיבים שניתנים לעריכה, והדברים שהם מדביקים יכולים להכיל עיצוב של טקסט עשיר. המצב הזה עלול לגרום לתסכול בקרב משתמשים שרוצים רק להדביק בשדה טקסט ללא עיצוב. השילוב של המאפיין/הערך contenteditable="plaintext-only" מונע מצב כזה, והוא הפך לאחרונה לזמין ב-Baseline Newly. מידע נוסף זמין בפוסט ההכרזה. בנוסף, תוכלו לקרוא איך אפשר לספק חוויית עריכה טובה יותר למשתמשים שרוצים רק להדביק טקסט ללא כל הדברים הלא רלוונטיים.
Intl.DurationFormat זמין עכשיו כבסיס
סביר להניח שבשלב כלשהו בחיים ביקרתם באתר וראיתם קטע טקסט שמציין את משך הזמן עד לאירוע מסוים או אחריו, לרוב במחרוזת כמו '2 ימים, 6 שעות, 3 דקות'. הנתונים האלה שימושיים לצורך העברת מידע על אירועים שונים, אבל בדרך כלל הם מסופקים על ידי ספרייה. בנוסף, יכול להיות שתרצו להפיק את המידע הזה בכמה שפות.
מזינים את הערך Intl.DurationFormat, תכונה של התאמה לשוק הבינלאומי שנוספה לאחרונה ל-Baseline. בעזרת הכיתה Intl.DurationFormat, אפשר להעביר אובייקט ל-constructor שלה שמכיל את יחידות הזמן שרוצים לעצב כמחרוזת, ובכמעט כל שפה שאפשר לחשוב עליה:
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
החלק המעניין הוא שאם האפליקציה שלכם מסתמכת על ספרייה כדי לעצב מחרוזות כאלה, בקרוב תוכלו לעשות זאת בלי ספרייה, וכך לחסוך בקילובייטים של נתונים אצל המשתמשים. מידע נוסף זמין בפוסט ההכרזה על Intl.DurationFormat, שבו מוסבר איך אפשר לנצל את התכונה החדשה והנוחה הזו.
בסיס להשוואה ב-W3C Breakouts Day 2025
לאחרונה, W3C קיימה את מהדורת 2025 של יום ה-Breakouts, שבו חברים הצגו נושאים שונים, והוצעה סשן שימושי בנושא Baseline ב-26 במרץ.
אם זו הפעם הראשונה שאתם משתמשים ב-Baseline, הסשן הזה יספק לכם סקירה כללית מהירה. במאמר הזה נסביר על היסודות של Baseline, כמו המושגים 'חדש' ו'זמין באופן נרחב', אבל גם נרחיב על האופן שבו ההגדרות האלה נקבעות על סמך נתונים, החל מ-browser-compat-data ועד לנתוני web-features שעוזרים לנו להבין אילו תכונות נמצאות ברף Baseline מסוים.
אם פספסתם את הסשן הזה, אל דאגה! השקפים מהסשן כבר זמינים, אז אם אתם סקרנים, כדאי לכם לעיין בהם.
סיימת!
מהדורת הסיכום החודשי הזו לא מסמלת רק את סוף החודש, אלא גם את סוף הרבעון. אם החמצתם גרסאות קודמות של המאגר, כדאי לעיין במהדורות של ינואר ושל פברואר כדי להתעדכן בכל מה שקרה ב-Baseline ברבעון הראשון של השנה. כמו תמיד, אפשר להודיע לנו אם פספסנו משהו שקשור ל-Baseline, ואנחנו נדאג לכלול אותו במהדורה הבאה. נתראה בעוד חודש!