חדש ב-Chrome 66

Pete LePage

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

ויש עוד הרבה!

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

רוצים לראות את רשימת השינויים המלאה? רשימת השינויים במאגר המקור של Chromium

CSS Typed Object Model

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

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

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

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

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

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

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

בהשוואה למודל האובייקטים הישן של CSS, מדדי השוואה ראשוניים מראים שיפור של כ-30% במספר הפעולות לשנייה – דבר שחשוב במיוחד לאנימציות של JavaScript.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

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

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

כתבתי מאמר הסבר עם כמה הדגמות ודוגמאות.

Async Clipboard API

const successful = document.execCommand('copy');

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

Async Clipboard API החדש הוא תחליף שפועל באופן אסינכרוני, ומשתלב עם ה-API של ההרשאות כדי לספק חוויה טובה יותר למשתמשים.

כדי להעתיק טקסט ללוח, קוראים לפונקציה writeText().

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

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

באופן דומה, אפשר לקרוא טקסט מהלוח על ידי קריאה ל-getText() וחכות שה-Promise שהוחזר יתקבל עם הטקסט.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

מומלץ לעיין בפוסט ובהדגמות של ג'ייסון בהסבר. יש לו גם דוגמאות שמשתמשות בפונקציות async.

הקשר חדש ללוח הציור BitmapRenderer

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

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

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

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

כדי להשתמש בה:

1. כדי ליצור את התמונה, צריך לבצע קריאה ל-createImageBitmap ולהעביר לה blob של תמונה.
2. מקבלים את ההקשר של bitmaprenderer מה-canvas.
3. לאחר מכן מעבירים את התמונה.

const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

סיימתי, השלמת את העיבוד של התמונה!

AudioWorklet

Worklets הגיעו! ‏PaintWorklet שוחרר ב-Chrome 65, ועכשיו אנחנו מפעילים את AudioWorklet כברירת מחדל ב-Chrome 66. אפשר להשתמש בסוג החדש של רכיב ה-Worklet כדי לעבד אודיו בשרשור האודיו הייעודי, במקום ב-ScriptProcessorNode הקודם שפעל בשרשור הראשי. כל AudioWorklet פועל בהיקף גלובלי משלו, כדי לצמצם את זמן האחזור ולהגביר את יציבות תעבורת הנתונים.

ב-Google Chrome Labs יש כמה דוגמאות מעניינות ל-AudioWorklet.

ועוד.

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

• עכשיו יש תמיכה במאפיין autocomplete ב-TextArea וב-Select.
• הגדרת autocapitalize ברכיב form תחול על כל שדות הטופס של הצאצאים, וכך תשפר את התאימות להטמעה של autocapitalize ב-Safari.
• הפונקציות trimStart() ו-trimEnd() זמינות עכשיו כדרך סטנדרטית לחיתוך רווחים לבנים מחרוזות.

מומלץ לקרוא את המאמר מה חדש בכלי הפיתוח ל-Chrome כדי לקבל מידע על התכונות החדשות בכלי הפיתוח ב-Chrome 66. אם אתם מתעניינים באפליקציות אינטרנט מתקדמות (PWA), כדאי לכם לצפות בסדרת הסרטונים החדשה של PWA Roadshow. לאחר מכן, לוחצים על הלחצן הרשמה למינוי בערוץ YouTube שלנו, ומקבלים התראה באימייל בכל פעם שאנחנו משיקים סרטון חדש.

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