חדש ב-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;
  }
}

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

יש תמיכה בשכבות מדורגות באמצעות כלל ה-CSS @layer ב-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
  • ועוד.

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

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

קריאה נוספת

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

להרשמה

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

קוראים לי פיט לייפיג', ואחרי שגרסת Chrome 100 תפורסם, אספר לכם מה חדש ב-Chrome.