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

Adriana Jara

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

קוראים לי 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);
}
  • אם המשתמש בחר עיצוב בהיר, לרכיב יהיה רקע ליים.
  • אם המשתמש בחר עיצוב כהה, לאלמנט יהיה רקע ירוק.

ממשק 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 יופעל ויתחיל לפעול כדי לדעת איזה תוכן לטעון.

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

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;
  }
}

קריאה נוספת

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

להרשמה

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

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