מה חדש באתר

Rachel Andrew

תאריך פרסום: 20 במאי 2025

בנאום המרכזי בנושא מה חדש באינטרנט ב-Google I/O 2025, שיתפנו את כל ההודעות על Baseline, וגם הצגנו רק חלק מהתכונות שהפכו לחלק מ-Baseline השנה. הייתה שנה מדהימה לאינטרנט ול-Baseline. בפוסט הזה ריכזנו את כל מה שהוזכר, עם קישורים למידע נוסף.

לוח הבקרה של פלטפורמת האינטרנט ותכונות האינטרנט

בשנת 2024 הודענו על ההשקה הראשונית של לוח הבקרה של פלטפורמת האינטרנט, שמבוסס על מערך הנתונים של תכונות האינטרנט ומאפשר לכם לבדוק את כל התכונות שכלולות ב-Baseline.

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

כלים שיעזרו לכם לגלות את יעד הבסיס שלכם

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

בשנה שעברה, בכנס I/O, הודענו ש-RUMvision תטמיע את Baseline במוצר שלה, והשילוב הזה פעיל עכשיו.

הכלי משתמש בנתוני RUM שלכם, ולכן הוא עוזר לכם לזהות איזו שנת בסיס כדאי לאמץ על סמך הנתונים האלה ולא על סמך ממוצע גלובלי. הוא יכול גם לעזור לכם להבין אם כדאי לכם להשתמש בתכונה 'זמינות בסיסית'.

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

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

לאחרונה השיקה קבוצת הקהילה Web DX תוסף ל-Netlify שתומך בשנים שונות של Baseline וזמין באופן נרחב באתרים שלכם. התוסף עוזר לכם להחליט מה לטרגט בכלי הבנייה. בקרוב נשיק שילובים עם מוצר ה-RUM של Cloudflare Observatory ועם Contentsquare.

שילוב הנתונים בכלים שלכם

הנתונים של תכונות האינטרנט פתוחים וזמינים לשילובים שלכם. אנחנו מנסים להקל על התהליך הזה.

אפשר להשתמש ב-Web Platform Dashboard API או לצרוך את נתוני התכונות של האינטרנט ישירות מחבילת npm.

מעכשיו אפשר למפות גרסאות של דפדפנים ליעד Baseline באמצעות מודול baseline-browser-mapping של קבוצת הקהילה WebDX של W3C. אפשר להשתמש במודול הזה בסביבת JavaScript בצד השרת, או להוריד קובצי JSON או CSV שמתעדכנים מדי יום מהמאגר.

הנתונים האלה כוללים מיפויים לא רק של קבוצת הדפדפנים הבסיסית, אלא גם של דפדפנים במורד הזרם כמו Samsung Internet,‏ Opera,‏ UC Browser ו-Android Webview.

איך בודקים אם התכונות נתמכות ביעד הבסיסי

מידע על קו בסיס זמין עכשיו ברוב הדפים של MDN ו-Can I Use, וגם בלוח הבקרה של פלטפורמת האינטרנט ובמאמרים ב-web.dev וב-CSS Tricks. אבל כדי לעשות את כל זה, צריך לחפש תמיכה. יהיה הרבה יותר שימושי אם המידע על הבסיס יופיע בסביבת הפיתוח המשולבת בזמן שאתם כותבים קוד, וגם כחלק מכל שאר הכלים שבהם אתם משתמשים.

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

browserslist-config-baseline

הרבה כלים כמו Babel ו-PostCSS משתמשים ב-browserslist כדי לקבוע באילו דפדפנים לתמוך.

צוות Chrome, יחד עם WebDX CG וחברי הקהילה, עזר להשיק כלי חדש בשם browserslist-config-baseline. כך תוכלו להגדיר את יעדי browserslist במונחים של Baseline, כמו widely available או Baseline years.

כך, כל כלי שמקבל יעד של browserslist יכול עכשיו להיות מבוטא במונחים של Baseline.

מידע נוסף זמין במאמר בנושא שימוש ב-Baseline עם browserslist.

ערך בסיס בבודקי קוד – ESLint ו-Stylelint

לאחרונה הוספנו כמה כלים חדשים ל-linters, שמאפשרים להשתמש ב-Baseline, החל מ-ESLint for CSS.

ל-ESLint הבסיסי יש כלל use-baseline. אתם יכולים להגדיר את זה ליעד הבסיסי המועדף עליכם, ותוצג לכם אזהרה אם תשתמשו בתכונות חדשות יותר מהיעד שהגדרתם. אתם יכולים לבחור איך לפתור את האזהרות האלה: או להחליף את התכונה בפרימיטיבים, או להשבית את האזהרה של הכלי לבדיקת קוד. זו אפשרות טובה אם אתם יודעים שאתם משתמשים בתכונה חדשנית בצורה בטוחה, למשל אם מדובר בשיפור הדרגתי.

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

בנוסף, יש גם תוסף קהילתי בשם html-eslint שמתאים לניתוח קוד HTML.

‫Stylelint תומך רשמית בפלאגין שנקרא stylelint-plugin-use-baseline. הכלל הזה מתנהג בדיוק כמו כלל ESLint ל-CSS, אבל הוא פועל ב-Stylelint במקום זאת.

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

ערך הבסיס ב-VS Code וב-JetBrains WebStorm

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

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

כדי לפתור את הבעיה הזו, שיתפנו פעולה עם VS Code, סביבת הפיתוח המשולבת (IDE) הפופולרית ביותר שמשמשת מיליוני מפתחי אתרים, כדי לשלב את נתוני ה-Baseline ישירות בכרטיסי המידע האלה.

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

התכונות הנתמכות כוללות מאפייני CSS, רכיבי HTML ומאפייני HTML. מידע נוסף זמין במאמר Visual Studio Code now supports Baseline.

השילוב הזה מאפשר לכל סביבות הפיתוח המשולבות (IDE) שמבוססות על VS Code ליהנות גם מכרטיסי המידע האלה.

אנחנו גם שמחים להודיע ש-JetBrains מטמיעה כרטיסי מידע בהעברת העכבר ב-IDE של JavaScript ו-TypeScript ב-WebStorm.

האינטרנט משתפר מהר יותר מאי פעם

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

במרכז הבקרה של פלטפורמת האינטרנט אפשר לראות את כל התכונות שהפכו לזמינות ב-Baseline ב-12 החודשים האחרונים – מאז Google I/O 2024.

בנוסף, יש מספר תכונות שניתן להיות בטוחים שיהיו זמינות בקרוב מאוד כחלק מהפרויקט Interop 2025. במאמר Interop2025: עוד שנה של שיפורים בפלטפורמת האינטרנט אפשר לקרוא על כל התכונות הכלולות.

מצבי כתיבה לרוחב

כבר ראינו תכונה אחת שהפכה לזמינה ב-Baseline Newly available, הערכים sideways-rl ו-sideways-lr של מאפיין ה-CSS‏ writing-mode. אם אתם משתמשים במצב כתיבה אנכי רק למטרות פריסה, סביר להניח שערכי הצד הם אלה שצריך להשתמש בהם.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

מיקום מודעות העוגן

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

היא נכללת עכשיו ב-Interop 2025, ולכן אנחנו צפויים לראות אותה מצטרפת ל-Baseline השנה.

מדדי הליבה לבדיקת חוויית המשתמש באתר: LCP ו-INP

LCP API

Event Timing API (ל-INP)

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

‫Interop 2025 כולל את המדדים Largest Contentful Paint ‏ (LCP)‏ ומהירות התגובה לאינטראקציה באתר (INP) באמצעות הטמעה של LargestContentfulPaint API ו-Event Timing API בדפדפנים.

שיפורים ברכיב <details>

הרכיב <details> עצמו כבר זמין באופן נרחב ב-Baseline. הוא נכלל ב-Interop 2025 כי יש כמה תכונות שהופכות את הווידג'טים של הגילוי הנאות עם <details> לשימושיים יותר.

הרכיב <details> מכיל רכיב <summary> שהוא החלק שגלוי בדף כשהרכיב <details> מכווץ. מחוץ לתג <summary> נמצא התוכן של רכיב <details>, והוא מוסתר עד שהמשתמש לוחץ על הסיכום.

אחד הדברים שיוגדרו כניתנים להפעלה הדדית במהלך Interop 2025 הוא הסתרת התוכן באמצעות content-visibility ולא באמצעות display, כלומר אם התוכן לא יורחב, הוא לא יעבור עיבוד בכלל.

::marker פסאודו-אלמנט הוא גם חלק מהעבודה על Interop 2025. הפסאודו-אלמנט ::marker מאפשר להגדיר סגנון למשולש החשיפה של האלמנט <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

אחר כך, עוד פסאודו-אלמנט – ::details-content.

‫::details-content מייצג את התוכן – החלק ברכיב details שאפשר להרחיב ולכווץ, ואפשר להגדיר לו סגנון.

[open]::details-content {
  border: 5px dashed hotpink;
}

יש גם שיפורים נחמדים כמו הרחבה אוטומטית של רכיב <details> עם התאמות לחיפוש בדף, והעברת הערך until-found של מאפיין hidden HTML ל-Baseline Newly available (זמין בסיסית). הפעולה הזו מסתירה אלמנט עד שהוא נמצא באמצעות החיפוש בדף של הדפדפן, או עד שמנווטים אליו ישירות באמצעות מעקב אחרי קטע של כתובת URL.

CSS @scope

הכלל @scope ב-CSS מאפשר להגביל את טווח ההגעה של הסלקטורים. אם מגדירים שורש היקף באמצעות @scope, כל כללי הסגנון שמוטמעים בתוך כלל ה-at חלים רק על עץ ה-DOM הזה.

לדוגמה, אם רוצים לטרגט רק רכיבי <img> בתוך רכיב עם סיווג .card, אז .card יהפוך לשורש ההיקף.

@scope (.card) {
    img {
        border-color: green;
    }
}

מידע נוסף על הגבלת טווח ההגעה של הסלקטורים באמצעות כלל ה-@scope ב-CSS

scrollend

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

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

עם האירוע scrollend, הדפדפן מבצע את כל ההערכה המורכבת הזו בשבילכם.

document.onscrollend = event => {…}

דוגמאות נוספות זמינות במאמר Scrollend, a new JavaScript event (סיום גלילה, אירוע חדש של JavaScript).

מעברים בין תצוגות באותו מסמך

ולסיום, אבל לא פחות חשוב, מעברי תצוגה הם חלק מ-Interop 2025. העבודה כוללת מעברים בין תצוגות באותו מסמך, כך שהיא מתאימה לאפליקציות חד-דף וגם למחלקות של מעברים בין תצוגות.

כדי לראות איך הפרויקט מתקדם במהלך השנה, אפשר לעקוב אחרי לוח הבקרה של Interop 2025.

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

זו רק ההתחלה

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

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