חדש בגרסה 123 של Chrome

דברים שעליך לדעת:

קוראים לי Adriana Jara. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 123.

פונקציית CSS מסוג light-dark().

הפונקציה light-dark() ב-CSS מאפשרת ליצור צבעים שמתאימים להעדפת המשתמש במצב בהיר או כהה. אפשר להשתמש בפונקציה light-dark() כדי לציין שני ערכים שונים של צבע בתוך מאפיין CSS יחיד.

הדפדפן יבחר באופן אוטומטי את הצבע המתאים על סמך הערך המחושב של color-scheme ברכיב. לדוגמה, באמצעות הקוד הבא ב-CSS:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • אם המשתמש בחר עיצוב בהיר, לרכיב יהיה רקע ליים.
  • אם המשתמש בחר עיצוב כהה, לרכיב יהיה רקע ירוק.

Long Animation Frames API.

Long Animation Frames API זמין כדי לעזור לכם למצוא את הגורמים להתקהלות בשרשור הראשי, שזו בדרך כלל הסיבה ל-INP נמוך (אינטראקציה לציור הבא) – מדד ליבה לבדיקת חוויית המשתמש באתר שמודד את הרספונסיביות של האתר.

ה-API החדש הוא גרסה משופרת של Long Tasks API, שמאפשרת להבין טוב יותר עדכונים איטיים בממשק המשתמש. Long Animation Frames API מאפשר למדוד עבודה חוסמת. הוא מודד את המשימות יחד עם עדכון הרינדור הבא, ומוסיף מידע כמו סקריפטים ארוכים, זמן רינדור והזמן שהושקע בפריסה ובסגנון מאולצים, שנקרא layout thrashing.

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

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Service worker Static Routing API.

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

עם זאת, יכול להיות עלות ביצועים כשדף נטען בפעם הראשונה מזה זמן מה, וקובץ השירות (service worker) השולט לא פועל באותו רגע. מאחר שכל האחזורים צריכים להתבצע דרך ה-service worker, הדפדפן צריך להמתין עד שה-service worker יופעל ויתחיל לפעול כדי לדעת איזה תוכן לטעון.

בעזרת Service Worker Static Routing API, אפשר להצהיר על נתיבים שיוצגו תמיד מהרשת בזמן ההתקנה. כשכתובת URL מבוקרת נטענת מאוחר יותר, הדפדפן יכול להתחיל לאחזר משאבים מהנתיבים האלה לפני ש-service worker מסיים את ההפעלה. כך תוכלו להסיר את קובץ השירות מכתובות ה-URL שאתם יודעים שאין בהן צורך בקובץ שירות.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

ועוד.

כמובן שיש עוד הרבה.

  • אתם יכולים להציע דפים מותאמים אישית על סמך המקום שממנו המשתמש עבר באמצעות ממשק NavigationActivation.

  • עכשיו יש ב-Chrome תמיכה ב-Zstandard (zstd). Content-Encoding הזה עוזר לטעון דפים מהר יותר, להשתמש פחות ברוחב פס ולחסוך זמן, מעבד (CPU) וחשמל בדחיסת נתונים בשרתים, וכתוצאה מכך מפחית את עלויות השרת.

  • notRestoredReasons API עבור bfcache זמין החל מ-Chrome 123. כך בעלי האתרים יכולים לציין בשדה את הסיבות לכך שלא ניתן היה להשתמש ב-bfcache. בעלי אתרים יכולים להשתמש בכך כדי לשפר את השימוש ב-bfcache, שמאפשר ניווט מהיר יותר בהיסטוריה.

  • הערך picture-in-picture של display-mode מאפשר לכתוב כללי CSS ספציפיים שחלים רק כשאפליקציית האינטרנט מוצגת במצב 'תמונה בתוך תמונה'. לדוגמה:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

קריאה נוספת

הרשימה הזו כוללת רק כמה נקודות עיקריות. בקישורים הבאים מפורטים שינויים נוספים ב-Chrome 123.

להרשמה

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

קוראים לי Adriana Jara, ואחרי שגרסת Chrome 124 תפורסם, אספר לכם מה חדש ב-Chrome!