חדש ב-Chrome 93

Pete LePage

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

קוראים לי 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.

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;
  }
});

למידע נוסף, מומלץ לקרוא את המאמר של Tom בנושא ניהול כמה מסכים באמצעות Multi-Screen Window Placement API באתר web.dev.

מחזור הפצה קצר יותר

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

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

תכונות חדשות של אפליקציות PWA

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

רכיבי handler של כתובות URL ל-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 כמפעילי כתובות URL באתר web.dev.

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

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

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

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

PWA Summit

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

להרשמה

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

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