חדש ב-Chrome 99

Pete LePage

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

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

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

Chrome 100 ו-Firefox 100

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

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

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

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

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

בקרוב Chrome ו-Firefox יגיעו לגרסה 100 הראשית לקבלת פרטים מלאים.

שכבות CSS

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

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

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

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

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

  .link {
    color: blue;
  }
}

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

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

show Picker() לרכיבי קלט

במשך תקופה ארוכה, נאלצנו להשתמש בפריצות או בספריות ווידג'טים בהתאמה אישית כדי להציג בוחר תאריכים. יש שיטת 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!