חדש ב-Chrome 93

Pete LePage

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

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

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

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

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

התכונה החדשה CSS Module Scripts מתאימה במיוחד לרכיבים בהתאמה אישית. ובניגוד לדרכים אחרות להחלת 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.

Multi-Screen Window Placement 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;
  }
});

כדי לקבל מידע נוסף, כדאי לקרוא את המאמר של טום Managing several displays with the Multi-Screen Window Placement API באתר web.dev.

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

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

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

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

אם אתם מפתחים אפליקציית אינטרנט מתקדמת (PWA), כדאי לכם לבדוק שתי גרסאות מקור חדשות לניסיון.

רכיבי 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 יטפל בקישורים ממקורות אחרים שבבעלותכם.

כל הפרטים על גרסת המקור לניסיון מופיעים במאמר PWAs as URL Handlers (אפליקציות אינטרנט פרוגרסיביות כמטפלים בכתובות URL) ב-web.dev.

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

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

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

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

PWA Summit

כנס PWA יתקיים באוקטובר. זהו כנס אונליין בחינם, שמתמקד בעזרה לכולם להצליח עם Progressive Web Apps. כנס PWA Summit הוא שיתוף פעולה בין אנשים מכמה חברות שונות שמעורבות ביצירת טכנולוגיות 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.

הרשמה

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

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