חדש ב-Chrome 93

Pete LePage

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

  • עכשיו אפשר לטעון גיליונות סגנונות של CSS עם הצהרות import, בדיוק כמו מודולים של JavaScript.
  • אפליקציות PWA מותקנות יכולות להירשם כרכיבי handler של כתובות URL, וכך המשתמשים יכולים להיכנס ישירות ל-PWA.
  • בהתאם למשוב שקיבלנו מכם, ה-Multi-Screen window Placement API עודכן, והוא מתחיל תקופת מקור שנייה.
  • כנס PWA יתקיים ב-6-7 באוקטובר.
  • ויש הרבה עוד.

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

סקריפטים של מודול CSS

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

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

כדי להשתמש בו, יש לייבא את גיליון הסגנונות באמצעות assert {type: 'css'}, ולאחר מכן להחיל אותו על document או על shadowRoot על ידי קריאה ל-adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

אבל היזהרו, אם תצאו מה-assert – המערכת תתייחס לקובץ כאל JavaScript והוא לא יעבוד!

לקבלת פרטים מלאים, קראו את המאמר שימוש בסקריפטים של מודול CSS כדי לייבא גיליונות סגנונות ב-web.dev.

API למיקום של חלון מרובה מסכים

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

ה-Multi-Screen window Placement API מאפשר לספור את המסכים שמחוברים למחשב של המשתמש, ולהציב חלונות במסכים ספציפיים. זוהי גרסת המקור השנייה לניסיון, וערכנו מספר שינויים בהתאם למשוב שלכם.

אפשר לבדוק במהירות אם יש יותר ממסך אחד שמחובר למכשיר:

const isExtended = window.screen.isExtended;
// returns true/false

אבל הפונקציות העיקריות נמצאות ב-window.getScreens(), שמספק את כל הפרטים על המסכים המצורפים.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

לדוגמה, אפשר לקבוע איזה מסך ראשי ואז להשתמש ב-requestFullscreen() כדי להציג רכיב במסך הזה.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

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

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

כדי להתעמק בנושא, קראו את המאמר של טום בנושא ניהול של מספר מסכים באמצעות Multi-Screen window Placement API ב-web.dev.

מחזור גרסאות מקוצר

במרץ הודענו על התוכניות שלנו לקצר את מחזור הגרסאות ולשלוח גרסה חדשה של Chrome כל ארבעה שבועות.

זה הגיע, וב-21 בספטמבר נשלח את Chrome 94. ביומן Chrome ניתן למצוא תאריכי הפצה מתוכננים לכל גרסה.

תכונות PWA חדשות

אם אתם מפתחים Progressive Web App, יש שתי גרסאות מקור חדשות שכדאי לבדוק.

רכיבי handler של כתובות URL לאפליקציות PWA

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

כשמציינים url_handlers בקובץ המניפסט של אפליקציית האינטרנט ומוסיפים קובץ web-app-origin-association לספרייה .well-known/, אפשר להגדיר לדפדפן שאם משתמש ילחץ על קישור ל-PWA, הוא אמור להיפתח בתוך ה-PWA שמותקנת.

דוגמה url_handlers בקובץ manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

קובץ web-app-origin-association לדוגמה:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

ואם יש לכם קצת אימות נוסף, תוכלו אפילו לקבל קישורים ל-PWA ממקורות אחרים שבבעלותכם.

כל הפרטים על גרסת המקור לניסיון מופיעים במאמר PWA כרכיבי Handlers של כתובות URL באתר web.dev.

שכבת-על של פקדי החלונות

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

אפשר להשתמש בתכונה הזו כדי לגרום ל-PWA המותקנות להיראות כמו אפליקציות מותקנות אחרות.

מידע נוסף על גרסת המקור לניסיון זמין במאמר התאמה אישית של שכבת-העל של פקדי החלונות בסרגל הכותרת של ה-PWA.

כנס PWA

כנס PWA יחול באוקטובר. זוהי כנס אונליין חינמי שמטרתו לעזור לכולם להצליח עם Progressive Web Apps. כנס PWA הוא שיתוף פעולה בין מספר חברות שונות שמעורבות ביצירה של טכנולוגיות PWA: Google, Intel, Microsoft ו-Samsung.

יש המון שיחות ותכנים מעולים. אפשר לקרוא מידע נוסף ולהירשם בכתובת PWASummit.org.

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

כמובן שיש עוד המון אפשרויות.

  • פריטים מסוג Flexbox ו-flexbox נוספו תמיכה במילות המפתח ליישור: start, end, self-start, self-end, left ו-right.
  • ממשק ה-API של הלוח האסינכרוני תומך עכשיו בקובצי SVG.
  • נוסף על כך, המאפיין media יכובד כשמגדירים את meta theme-color, כך שאפשר לציין צבעי עיצוב שונים למצבי תאורה כהים.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

קריאה נוספת

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

להרשמה

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

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