Novità di Chrome 90

Pete LePage

Tieni presente quanto segue:

• Esiste un nuovo valore per la proprietà CSS overflow.
• L'API Norme relative alle funzionalità è stata rinominata Norme relative alle autorizzazioni.
• Inoltre, esiste un nuovo modo per implementare e utilizzare Shadow DOM direttamente in HTML.
• Negli anni '90 avevo diverse giacche quasi identiche a questa.
• E non è tutto.

Sono Pete LePage e ho le informazioni più importanti per gli sviluppatori in Chrome 90, in stile anni '90!

Evitare il sovraccarico con overflow: clip

Il CSS è tutto questo e molto altro! Tuttavia, penso che ogni sviluppatore web abbia visto e sperimentato qualcosa che a un certo punto si verifica in modo inaspettato. Su CSS Tricks c'è un ottimo post sui diversi modi per gestire l'overflow, ad esempio utilizzando overflow: hidden o auto.

Nella specifica CSS Overflow è presente una nuova proprietà clip che funziona in modo simile a hidden.

.overflow-clip {
  overflow: clip;
}

L'utilizzo di overflow: clip consente di impedire qualsiasi tipo di scorrimento per la casella, incluso lo scorrimento programmatico. Ciò significa che la casella non è considerata un contenitore di scorrimento e non avvia un nuovo contesto di formattazione. Se necessario, puoi applicare il ritaglio a un singolo asse tramite overflow-x e overflow-y.

A proposito, c'è anche overflow-clip-margin, che ti consente di espandere il bordo del clip. Questa opzione è utile nei casi in cui è presente un'eccedenza di inchiostro che deve essere visibile.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

Prova overflow: clip all'indirizzo https://petele-css-is-awesome.glitch.me/

Le norme relative alle funzionalità ora si chiamano Norme relative alle autorizzazioni

In Chrome 74 abbiamo introdotto l'API Feature Policy, che consente di abilitare, disabilitare e modificare selettivamente il comportamento di alcune API e funzionalità web nel browser. Queste norme costituiscono un contratto tra te e il browser. Comunicano al browser qual è il tuo intento.

Se il tuo codice o qualsiasi libreria di terze parti che utilizzi viola le tue regole preselezionate, il browser sostituisce il comportamento con una migliore esperienza utente o dice semplicemente "parlare a mano", bloccando completamente l'API.

A partire da Chrome 90, l'API Feature Policy verrà rinominata Permissions Policy e l'intestazione HTTP verrà rinominata di conseguenza. Allo stesso tempo, la community ha adottato una nuova sintassi, basata sui valori dei campi strutturati per HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Se vuoi scoprire come utilizzarla sul tuo sito, consulta la sezione Introduzione alle norme relative alle funzionalità.

DOM shadow dichiarativo

Shadow DOM, parte dello standard dei componenti web, offre un modo per limitare l'ambito degli stili CSS a uno specifico sottoalbero DOM e isolare questo sottoalbero dal resto del documento. Fino ad ora, l'unico modo per utilizzare Shadow DOM era costruire un'origine shadow utilizzando JavaScript.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

Funziona bene per il rendering lato client, ma non molto bene nel rendering lato server, dove non è possibile esprimere le radici shadow nell'HTML generato dal server. Tuttavia, a partire da Chrome 90, con il DOM ombra dichiarativo, puoi procedere. Puoi creare radici ombra utilizzando solo HTML.

Un'origine animata dichiarativa è un elemento <template> con un attributo shadowroot. Viene rilevato dal parser HTML e applicato immediatamente come radice nascosta dell'elemento principale.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Il caricamento del markup HTML puro genera questa struttura DOM:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

In questo modo, possiamo usufruire dei vantaggi dell'incapsulamento e della proiezione degli slot di Shadow DOM in HTML statico. Non è necessario JavaScript per produrre l'intero albero, incluso lo Shadow Root.

Per maggiori dettagli, visita il sito Declarative Shadow DOM su web.dev.

E altro ancora

E naturalmente c'è molto altro.

Per contribuire a migliorare la privacy e persino le velocità di caricamento per gli utenti che visitano siti che supportano HTTPS, la barra degli indirizzi di Chrome utilizzerà https:// per impostazione predefinita. Se non avete impostato un reindirizzamento automatico da HTTP a HTTPS, questo sarebbe il momento ideale.

Inoltre, in Chrome per computer è disponibile un codificatore AV1 ottimizzato specificamente per le videoconferenze con integrazione WebRTC.

Per approfondire

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

• Novità di Chrome DevTools (90)
• Ritiro e rimozione di funzionalità in Chrome 90
• Aggiornamenti di ChromeStatus.com per Chrome 90
• Novità di JavaScript in Chrome 90
• Elenco delle modifiche al repository di origine di Chromium

Iscriviti

Vuoi tenerti al corrente sui nostri video, iscriviti al nostro canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

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

Un saluto speciale

Mi sono divertito molto a girare questa puntata di Novità di Chrome a tema anni '90. Un enorme ringraziamento a Sean Meehan per l'idea e per aver riunito le persone fantastiche che hanno contribuito a creare il salto temporale fino al 1990.

E, naturalmente, Loren Borja, Lee Carruthers e Lukas Holcek, che lavorano a tutti i miei video Novità di Chrome e mi fanno sembrare molto più bravo di quanto non sia. MOLTO GRAZIE!