Novità di Chrome 93

Pete LePage

Tieni presente quanto segue:

Sono Pete LePage, lavoro e lavoro da casa, approfondiamo l'argomento e scopriamo le novità di Chrome 93 per gli sviluppatori.

Script di moduli CSS

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

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

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

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

Tuttavia, se tralascia assert, il file verrà considerato come JavaScript e non funzionerà.

Per informazioni dettagliate, consulta Utilizzo degli script dei moduli CSS per importare fogli di stile su web.dev.

API Multi-Screen Window Placement

Per alcune app, aprire nuove finestre e posizionarle in posizioni specifiche o in 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 le note del relatore sull'altro display.

L'API Multi-Screen Window Placement consente di enumerare i display collegati al computer dell'utente e 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 controllare rapidamente se al dispositivo sono collegati più schermi:

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 quindi utilizzare requestFullscreen() per visualizzare un elemento su 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);
}

Offre anche un modo per ascoltare i cambiamenti, ad esempio se un nuovo display è collegato alla corrente 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 un approfondimento più dettagliato, leggi l'articolo di Tom Gestire diversi display con l'API Multi-Screen Window Placement su web.dev.

Ciclo di rilascio abbreviato

A marzo abbiamo annunciato il nostro programma di abbreviare il ciclo di rilascio e distribuire una nuova versione di Chrome ogni quattro settimane.

È arrivato il momento, pertanto spediremo Chrome 94 il 21 settembre. Puoi trovare le date di rilascio pianificate per ogni versione nel Calendario di Chrome.

Nuove funzionalità PWA

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

Gestori di URL per PWA

Se hai installato una PWA e fai clic su un link alla PWA, probabilmente vorrai aprirla nella PWA e non in una scheda del browser.

Specificando url_handlers nel file manifest dell'app web e aggiungendo 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, il browser dovrebbe aprirsi all'interno della PWA installata.

Esempio url_handlers nel file manifest.json:

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

Esempio di file web-app-origin-association:

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

E con una piccola verifica aggiuntiva, puoi persino fare in modo che la PWA gestisca i link provenienti da altre tue origini.

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

Overlay dei controlli delle finestre

L'overlay dei controlli delle finestre estende l'area client fino a coprire l'intera finestra, tra cui la barra del titolo e i pulsanti di controllo delle finestre, come i pulsanti Chiudi, Ingrandisci e Riduci a icona.

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

Per saperne di più sulla prova dell'origine, consulta Personalizzare l'overlay dei controlli delle finestre della barra del titolo della PWA.

Summit PWA

Il summit PWA si terrà a ottobre. Si tratta di una conferenza online senza costi incentrata sull'aiutare tutti ad avere successo con le applicazioni web progressive. Il PWA Summit nasce dalla collaborazione tra i membri di un gruppo di poche aziende diverse coinvolte nella creazione delle tecnologie PWA: Google, Intel, Microsoft e Samsung.

Ci sono moltissimi discorsi e contenuti interessanti. Puoi scoprire di più e registrarti all'indirizzo PWASummit.org.

E tanto altro.

Ovviamente c'è molto altro.

  • 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 per gli appunti asincroni ora supporta i file SVG.
  • Inoltre, l'attributo media verrà rispettato quando imposti il theme-color di meta, così puoi specificare colori del tema 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

Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 93.

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Mi chiamo Pete LePage e non appena verrà rilasciata la versione 94 di Chrome, sarò qui per raccontarti le novità di Chrome.