חדש ב-Chrome 74

Pete LePage

ב-Chrome 74 הוספנו תמיכה בתכונות הבאות:

ויש עוד עוד המון.

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

יומן שינויים

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

שדות לכיתה פרטית

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

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

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

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

חשוב לזכור, שדות private הם פשוט פרטי. הם נגישים בתוך הכיתה, אבל לא זמינים מחוץ לגוף הכיתה.

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

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

prefers-reduced-motion

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

Chrome מספק עכשיו שאילתת מדיה, prefers-reduced-motion – חלק מהמפרט של רמה 5 של שאילתות מדיה, שמאפשר לזהות מתי האפשרות הזו מופעלת.


@media (prefers-reduced-motion: reduce)

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

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

קראו את המאמר של טום Move Ya! או אולי לא, אם המשתמש מעדיף הילוך מופחת! לפרטים נוספים.

אירועי transition בשירות CSS

לפי המפרט של מעברים ב-CSS, יש לשלוח אירועי העברה כשמוסיפים מעבר לתור, מתחיל, מסתיים או מבוטל. האירועים האלה נתמכו בדפדפנים אחרים כבר זמן מה...

אבל עד עכשיו לא הייתה תמיכה בתכונות האלה ב-Chrome. ב-Chrome 74 תוכלו להאזין ל:

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

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

עדכונים במדיניות בנושא תכונות API

מדיניות התכונות מאפשרת לכם להפעיל, להשבית ולשנות באופן סלקטיבי את ההתנהגות של ממשקי API ותכונות אינטרנט אחרות. אפשר לעשות זאת באמצעות הכותרת Feature-Policy או המאפיין allow ב-iframe.

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation self">
</iframe>

מופיעה ב-Chrome 74 סדרה חדשה של ממשקי API שנועדו לבדוק אילו תכונות מופעלות:

  • אתם יכולים לקבל רשימה של התכונות שמותרות באמצעות document.featurePolicy.allowedFeatures().
  • אפשר לבדוק אם תכונה מסוימת מותרת באמצעות document.featurePolicy.allowsFeature(...).
  • בנוסף, בדף הנוכחי תוכלו לראות רשימה של דומיינים שמאפשרים להשתמש בתכונה מסוימת ב-document.featurePolicy.getAllowlistForFeature().

למידע נוסף, קראו את הפוסט 'מבוא למדיניות בנושא תכונות'.

ופעולות נוספות.

אלה רק כמה מהשינויים שב-Chrome 74 למפתחים, כמובן, יש עוד הרבה יותר. באופן אישי, אני די מתרגשת לקראת KV Storage, שירות אסינכרוני ומהיר במיוחד לאחסון מפתחות/ערך, שזמין בתור גרסת מקור לניסיון.

Google I/O מתחיל בקרוב!

ואל תשכחו - Google I/O נמצא במרחק שבועות אחד בלבד (7 עד 9 במאי) ואנחנו יהיו לכם המון דברים חדשים. אם לא תוכלו להגיע, כל המפגשים יועברו בסטרימינג בשידור חי, ויהיו זמינים בערוץ YouTube של מפתחי Chrome לאחר מכן.

להרשמה

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

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