Novità di Chrome 93

Pete LePage

Tieni presente quanto segue:

Sono Pete LePage, lavoro e filmo da casa. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 93.

Script del modulo CSS

Ora puoi caricare gli stili CSS con istruzioni import, proprio come i moduli JavaScript. I fogli di stile possono quindi essere applicati al documento o alle radici shadow nello stesso modo dei fogli di stile costruibili.

La nuova funzionalità Script modulo CSS è ottima per gli elementi personalizzati. Inoltre, a differenza di altri modi per applicare il CSS da JavaScript, non è necessario creare elementi o modificare le stringhe di testo CSS di JavaScript.

Per utilizzarlo, importa il foglio di stile con assert {type: 'css'}, quindi applicalo al document o al shadowRoot chiamando adoptedStyleSheets.

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

Ma attenzione, se non inserisci assert, il file verrà trattato come JavaScript e non funzionerà.

Per informazioni dettagliate, consulta Utilizzare gli script del modulo CSS per importare gli stili su web.dev.

API Multi-Screen Window Placement

Per alcune app, l'apertura di nuove finestre e il loro posizionamento in punti specifici o su display specifici è una funzionalità importante. Ad esempio, quando utilizzo Presentazioni per fare una presentazione, voglio che le slide vengano visualizzate a schermo intero sul display principale e che le mie note dell'oratore vengano visualizzate sull'altro display.

L'API Multi-Screen Window Placement consente di enumerare i display collegati al computer dell'utente e di posizionare le finestre su schermate specifiche. Questa è la seconda prova dell'origine e abbiamo apportato una serie di modifiche in base al tuo feedback.

Puoi verificare rapidamente se sono connessi più schermi al dispositivo:

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

Tuttavia, la funzionalità principale è in window.getScreens(), che fornisce tutti i dettagli sui display collegati.

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

Ad esempio, puoi determinare la schermata principale e poi utilizzare requestFullscreen() per visualizzare un elemento in quella schermata.

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

Inoltre, fornisce un modo per rilevare le modifiche, ad esempio se un nuovo display viene collegato o rimosso.

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

Per approfondire, consulta l'articolo di Tom Gestire più display con l'API Multi-Screen Window Placement su web.dev.

Ciclo di rilascio abbreviato

A marzo abbiamo annunciato i nostri piani per accorciare il ciclo di rilascio e rilasciare una nuova versione di Chrome ogni quattro settimane.

Il momento è arrivato e pubblicheremo Chrome 94 il 21 settembre. Puoi trovare le date di rilascio pianificate per ogni versione nel calendar di Chrome.

Nuove funzionalità PWA

Se stai creando un'app web progressiva, ci sono due nuove prove dell'origine che vale la pena provare.

Gestori di URL per le PWA

Se hai installato una PWA e fai clic su un link a quella PWA, probabilmente vorrai che si apra nella PWA, non in una scheda del browser.

Se specifichi url_handlers nel file manifest dell'app web e aggiungi un file web-app-origin-association alla directory .well-known/, puoi indicare al browser che se un utente fa clic su un link alla tua PWA, questo deve aprirsi all'interno della PWA installata.

Esempio di url_handlers nel file manifest.json:

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

File web-app-origin-association di esempio:

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

Inoltre, con un po' di verifica in più, puoi anche fare in modo che la tua PWA gestisca i link provenienti da altre origini di tua proprietà.

Tutti i dettagli sulla prova dell'origine sono disponibili in PWA come gestori degli URL su web.dev.

Overlay dei controlli della finestra

L'overlay dei controlli della finestra estende l'area client per coprire l'intera finestra, inclusa la barra del titolo e i pulsanti di controllo della finestra, come i pulsanti di chiusura, massimizzazione e riduzione al minimo.

Puoi utilizzare questa funzionalità per rendere la PWA installata più simile alle altre app installate.

Per ulteriori informazioni sulla prova dell'origine, consulta Personalizzare l'overlay dei controlli delle finestre della barra del titolo della PWA.

PWA Summit

A ottobre si terrà il PWA Summit. Si tratta di una conferenza online senza costi incentrata sull'aiutare tutti a ottenere risultati con le app web progressive. Il PWA Summit è una collaborazione tra persone di alcune diverse aziende coinvolte nella creazione di tecnologie PWA: Google, Intel, Microsoft e Samsung.

Ci sono tantissimi contenuti e talk interessanti. Per scoprire di più e registrarti, visita il sito PWASummit.org.

E tanto altro.

Ovviamente ce ne sono molti altri.

  • Gli elementi flexbox e flexbox hanno aggiunto il supporto per le parole chiave di allineamento: start, end, self-start, self-end, left e right.
  • L'API Appunti async ora supporta i file SVG.
  • Inoltre, l'attributo media verrà rispettato quando imposti meta theme-color, in modo da poter specificare colori di temi diversi per le modalità Luce e Buio.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

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

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i link di seguito per altre modifiche in Chrome 93.

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 94, sarò qui per dirti quali sono le novità di Chrome.