חדש ב-Chrome 74

Pete LePage

בגרסה 74 של Chrome הוספנו תמיכה באפשרויות הבאות:

ויש עוד הרבה!

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

יומן שינויים

זוהי רק רשימה חלקית של השינויים העיקריים. בקישורים שבהמשך מפורטים שינויים נוספים בגרסה 74 של Chrome.

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

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

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

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

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

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

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

מידע נוסף על כיתות ציבוריות ופרטיות זמין בפוסט של Mathias בנושא שדות של כיתות.

prefers-reduced-motion

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

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


@media (prefers-reduced-motion: reduce)

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

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

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

כדאי לקרוא את המאמר של Tom‏ Move Ya! יכול להיות גם שלא, אם המשתמש מעדיף צמצום התנועה! לפרטים נוספים.

אירועי transition של CSS

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

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

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

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

עדכוני API של מדיניות התכונות

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

Feature-Policy: geolocation 'self'

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

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

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

פרטים נוספים זמינים בפוסט 'מבוא למדיניות התכונות'.

ועוד.

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

Google I/O ייערך בקרוב!

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

להרשמה

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

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 75 תפורסם, אספר לכם מה חדש ב-Chrome.