מה חדש באתר

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-browser-mapping של קבוצת הקהילה W3C WebDX. אפשר להשתמש במודול הזה בסביבת 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.

Baseline ב-linters‏ – ESLint ו-Stylelint

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

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

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

לצורך בדיקת קוד HTML, יש גם תוסף קהילתי בשם html-eslint.

‫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 השנה.

Core Web Vitals: LCP and INP

LCP API

Event Timing API (ל-INP)

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

‫Interop 2025 כולל את המדדים המהירות שבה נטען רכיב התוכן הכי גדול (LCP) ומהירות התגובה לאינטראקציה באתר (INP) באמצעות הטמעה של LargestContentfulPaintAPI ושל 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 ל'זמין חדש'. ההגדרה הזו מסתירה אלמנט עד שהוא נמצא באמצעות החיפוש בדף של הדפדפן, או עד שמגיעים אליו ישירות באמצעות מעבר לקטע של כתובת 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 כי נמשיך לפרסם הודעות על כלים חדשים, וגם מדריכים שיעזרו לכם להפיק את המרב מכל מה שיש לאינטרנט להציע.