מה חדש באינטרנט

Rachel Andrew

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

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

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

חדש בקבוצת הבסיס

בכנס I/O שיתפתי 12 תכונות של פלטפורמת האינטרנט שהפכו לאחרונה לחלק מ-Baseline Newly Available. התכונות האלה זמינות עכשיו ב-Chrome, ב-Edge, ב-Firefox וב-Safari, ויש מגוון רחב של תוספות – מתוספות קטנות שיכולות לייעל את הפיתוח ועד כמה מהתכונות המבוקשות ביותר של המפתחים – כולל שאילתות של קונטיינרים ו-:has().

שאילתות לגבי מאגרי גודל

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

  • הפיצ'ר החדש יהיה זמין בפברואר 2023.
  • המבצע זמין ברחבי העולם החל מאוגוסט 2025.

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

דף :has() של הבורר

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

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

  • השירות יושק בדצמבר 2023.
  • זמינים באופן נרחב החל מיוני 2026.

למידע נוסף על :has() ב-MDN, בבורר המשפחתי ב-:has() ובמקרים לדוגמה של :has().

תת-רשת בפריסת ה-CSS

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

  • השירות יושק בדצמבר 2023.
  • זמינים באופן נרחב החל מיוני 2026.

מידע נוסף על רשת המשנה ב-MDN ועל רשת המשנה של CSS שמקשרת למספר גדול של משאבים אחרים.

קינון CSS

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

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

  • יהיו זמינים באוגוסט 2023
  • תהיה זמינה באופן נרחב החל מפברואר 2026

אפשר לקרוא מידע נוסף על Nesting ב-CSS ב-MDN וב-CSS Nesting.

רכיב ה-HTML <search>

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

  • יהיו זמינים באוקטובר 2023
  • זמין באופן נרחב החל מאפריל 2026

מידע נוסף על הרכיב <search> ב-MDN.

מודעות וידאו רספונסיביות

התכונה הזו מתייחסת ליכולת להשתמש באלמנט <source> בתוך אלמנט <video>, כדי להציג סרטון בגודל מתאים למכשירים שונים באותו אופן שבו אפשר להציג תמונות בגדלים שונים.

  • יהיו זמינים בנובמבר 2023
  • הגישה תהיה זמינה באופן נרחב במאי 2026

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

המאפיין inert

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

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

  • יהיו זמינים באפריל 2023
  • זמינים לכולם באוקטובר 2025

אפשר לקרוא מידע נוסף על אינרט ב-MDN במאמר על המאפיין 'אינרציה'.

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

הפונקציה color-mix() מאפשרת ערבוב של צבע אחד לאחר בכל מרחבי צבע זמינים. זה כולל את כל דגמי הצבעים החדשים – LCH, Lab, OKLCH ו-OKLab, שהפכו לאחרונה לחלק מ-Baseline Newly Available.

  • יהיו זמינים באפריל 2023
  • זמינים לכולם באוקטובר 2025

תוכל לקרוא מידע נוסף על color-mix() ב-MDN וב-CSS color-mix(). יש לנו גם מדריך צבעים גדול ב-CSS באיכות גבוהה שמכסה את כל המודלים החדשים של צבעים שזמינים ב-CSS. בנוסף, תוכלו להשתמש ב-gradient.style, כדי לשחק עם הצבעים החדשים האלה וליצור הדרגתיים יפים.

:user-valid וגם :user-invalid

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

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

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

  • יהיו זמינים באוקטובר 2023
  • זמין באופן נרחב החל מאפריל 2026

למידע נוסף על :user-valid ועל :user-invalid ב-MDN.

זרמי דחיסה

אפליקציות אינטרנט רבות צריכות לספק למשתמש הורדה בפורמט דחוס, כמו קובץ ZIP. בעבר, האפליקציה חייבה לכלול ספריית דחיסה, קוד שהגדיל את גודל האפליקציה לכל המשתמשים. ה-Compression Streams API מספק דרך מובנית לדחיסת זרם נתונים.

  • יושק במאי 2023
  • זמין באופן נרחב החל מנובמבר 2025

מידע נוסף על Compression Streams API ב-MDN וכאן יש תמיכה ב-Compression Streams בכל הדפדפנים.

DOM של הצל המוצהר

ה-DOM Delarative Shadow הוא דרך חדשה ליצור עץ צל מ-HTML, שבו בעבר אפשר היה ליצור עץ צללים מ-JavaScript רק באמצעות attachShadow(). האפשרות לעשות זאת מ-HTML שימושית במיוחד בסביבות שבהן JavaScript לא יכול לרוץ, כגון לקוח אימייל. זה חשוב גם לרכיבי אינטרנט שמעובדים בצד השרת.

  • יהיו זמינים בפברואר 2024
  • זמינים באופן נרחב החל מאוגוסט 2026

מידע נוסף על Declarative Shadow DOM

ממשק API של Popover

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

  • יהיו זמינים באפריל 2024
  • זמינים באופן נרחב באוקטובר 2026

מידע נוסף על ה-API של Popover ב-MDN, השקת ה-API של Popover ב-Baseline ומקרים לדוגמה של Popover

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