Novità di Chrome 90

Pete LePage

Tieni presente quanto segue:

• Un nuovo valore per la proprietà CSS overflow è disponibile.
• L'API Feature Policy è stata rinominata Permissions Policy.
• Esiste un nuovo modo per implementare e utilizzare Shadow DOM direttamente in HTML.
• Negli anni '90 possiedo diverse giacche quasi esattamente come questa.
• E ce ne sono molti altri.

Mi chiamo Pete LePage e ho il 411 per gli sviluppatori in Chrome 90, con lo stile anni '90!

Impedisci l'overflow con overflow: clip

CSS è tutto questo e un sacco di patatine. Ma penso che ogni sviluppatore web abbia visto e sperimentato qualcosa di imbarazzante a un certo punto. Su CSS Tricks è disponibile un ottimo post sui diversi modi per gestire l'overflow, ad esempio l'utilizzo di overflow: hidden o auto.

Nella Specifica di Overflow del CSS, è disponibile una nuova proprietà clip che funziona in modo simile a hidden.

.overflow-clip {
  overflow: clip;
}

L'utilizzo di overflow: clip ti 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.

Tieni presente che c'è anche overflow-clip-margin, che ti consente di espandere il bordo del clip. Questo è utile nei casi in cui è presente un overflow di inchiostro che dovrebbe essere visibile.

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

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

Le norme relative alle funzionalità sono diventate Norme relative alle autorizzazioni

Nella versione precedente di Chrome 74, abbiamo introdotto l'API Feature Policy, che consente di attivare, disattivare e modificare selettivamente il comportamento di determinate API e funzionalità web nel browser. Questi criteri sono un contratto tra l'utente e il browser. Comunicano al browser qual è il tuo obiettivo.

Se il tuo codice o una delle librerie di terze parti che utilizzi viola le regole preselezionate, il browser sostituisce il comportamento con una UX migliore o dice semplicemente "Parla alla mano", bloccando del tutto l'API.

A partire dalla versione 90 di Chrome, l'API Feature Policy verrà rinominata Criterio di autorizzazioni e l'intestazione HTTP è stata rinominata insieme. 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 capire come usare questa funzionalità sul tuo sito, consulta Introduzione alle norme relative alle funzionalità.

DOM shadow dichiarativo

Shadow DOM, parte dello standard Web Componenti, fornisce un modo per definire l'ambito degli stili CSS in un sottoalbero DOM specifico e isolare il sottoalbero dal resto del documento. Finora, l'unico modo per utilizzare Shadow DOM era costruire una radice 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;

Questo funziona bene per il rendering lato client, ma non così bene nel rendering lato server, dove non è presente un modo per esprimere le radici shadow nell'HTML generato dal server. Ma, a partire da Chrome 90, con il DOM dichiarativo Shadow, è tutto a posto. Puoi creare radici shadow solo utilizzando HTML.

Una radice ombra dichiarativa è un elemento <template> con un attributo shadowroot. Viene rilevato dall'analizzatore sintattico HTML e immediatamente applicato come radice shadow dell'elemento principale.

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

Il caricamento del markup HTML puro restituisce questo albero DOM:

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

Questo ci offre i vantaggi dell'incapsulamento e della proiezione degli slot di Shadow DOM nel codice HTML statico. Non è necessario JavaScript per produrre l'intero albero, inclusa la radice ombra.

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

E altro ancora

E ovviamente c'è molto altro.

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

Per il desktop Chrome viene inoltre inviato un encoder AV1, specificamente ottimizzato per le videoconferenze con l'integrazione di WebRTC.

Per approfondire

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

• Novità di Chrome DevTools (90)
• Deprecazioni e rimozioni di Chrome 90
• Aggiornamenti di ChromeStatus.com per Chrome 90
• Novità di JavaScript in Chrome 90
• Elenco delle modifiche al repository di codice sorgente di Chromium

Abbonati

Se vuoi tenerti al corrente sui nostri video, iscriviti al nostro 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 91 di Chrome, sarò qui per raccontarvi le novità di Chrome.

Un ringraziamento speciale

Mi sono divertito a girare questo episodio a tema anni '90 di Novità in Chrome. Un grande grazie a Sean Meehan per l'idea e per aver messo insieme le fantastiche persone che hanno contribuito ad aprire il tempo fino al 1990.

Loren Borja, Lee Carruthers e Lukas Holcek, che lavorano a tutti i miei video Novità di Chrome, mi fanno apparire molto meglio di me. GRAZIE!