חדש ב-Chrome 99

Pete LePage

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

  • נותרו רק כמה שבועות עד להשקת גרסה 100 של Chrome ו-Firefox.
  • שכבות מדורגות של CSS נותנות לכם יותר שליטה על ה-CSS, ומונעות התנגשויות בין סגנונות ספציפיים.
  • השיטה showPicker() מאפשרת להציג באופן פרוגרמטי בורר דפדפנים לאלמנטי <input> כמו date,‏ color ו-datalist.
  • ויש עוד הרבה.

קוראים לי Pete LePage. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 99.

Chrome 100 ו-Firefox 100

הגרסה 100 של Chrome תשוחרר בסוף מרץ (2022), והגרסה 100 של Firefox תשוחרר זמן קצר לאחר מכן, בתחילת מאי. שתי הגרסאות האלה הן ציון דרך חשוב במספר הגרסה הראשית, והן יכללו שלוש ספרות. עם זאת, אם הקוד מצפה לשתי ספרות, מספר הגרסה החדש יכול לגרום לבעיות.

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

דף הדגלים של Chrome שבו מודגשת האפשרות החדשה #force-major-version-to-100

ב-Chrome, הדגל #force-major-version-to-100 ישנה את מספר הגרסה הנוכחי ל-100.

ובתפריט ההגדרות של Firefox Nightly, אתם יכולים להפעיל את האפשרות Firefox 100 User-Agent String. כדאי לבדוק את האתר כדי לוודא שהכול פועל כמצופה.

למידע מלא, אפשר לעיין במאמר בקרוב: הגרסה הראשית 100 של Chrome ו-Firefox.

שכבות CSS ברצף

תמיכה בשכבות CSS ברצף ותמיכה בכלל CSS @layer מתווספות ל-Chrome 99. הם מספקים שליטה מפורשת יותר בקובצי ה-CSS כדי למנוע התנגשויות בין סגנונות ספציפיים. האפשרות הזאת שימושית במיוחד לבסיסי קוד גדולים, למערכות עיצוב ולניהול סגנונות של צדדים שלישיים באפליקציות.

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

איור מהדגמה של הפרויקט של הפרדת ממשק המשתמש

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

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

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

יש תמיכה בשכבות מדורגות באמצעות הכלל @layer ב-CSS בגרסאות Chrome 99,‏ Firefox 97 ו-Safari 15.4 Beta. למידע נוסף, ראו שכבות מדורגות מגיעות לדפדפן.

showPicker() לרכיבי קלט

במשך זמן רב נאלצנו להשתמש בספריות ווידג'טים בהתאמה אישית או בהאקים כדי להציג בורר תאריכים. יש שיטה חדשה של showPicker() ב-HTML InputElements. זוהי הדרך הקנונית להצגת בורר בדפדפן, לא רק עבור date, אלא גם עבור time, color ורכיבי <input> אחרים עם בוחרים.

צילומי מסך של בוררי דפדפנים
בוררי התאריכים בדפדפנים: Chrome במחשב, Chrome בנייד, Safari במחשב, Safari בנייד ו-Firefox במחשב (יולי 2021).

כדי להשתמש בו, צריך להפעיל את showPicker() ברכיב <input>. בדוגמה הזו, עטפתי אותו בבלוק try…catch. כך אוכל לספק חלופה, אם הדפדפן לא תומך ב-API או לא יכול להציג את הבורר. כך, כדי להבטיח שהמשתמשים עדיין ייהנו מחוויה טובה.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

תוכלו להיעזר במאמר הצגת בורר בדפדפן להצגת תאריך, שעה, צבע וקבצים, כדי לקבל פרטים מלאים על כל הסוגים השונים של <input> שאפשר להשתמש בהם ב-showPicker().

ועוד.

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

Canvas2D API עודכן, והוספה לו פונקציונליות חדשה, כולל:

  • שני אירועים חדשים ב-ContextLost וב-ContextRestored
  • אפשרות willReadFrequently
  • תמיכה נוספת במודיפיקציות טקסט של CSS
  • ועוד.

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

וגם ממשק ה-API לזיהוי כתב יד זמין עכשיו.

קריאה נוספת

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

להרשמה

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

אני פיט לעמוד, וברגע ש-Chrome 100 יושק, אהיה כאן כדי לספר לך מה חדש ב-Chrome!