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 ti consente di impedire qualsiasi tipo di scorrimento della 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 attivare, disattivare e modificare in modo selettivo il comportamento di determinate API e funzionalità web nel browser. Queste norme costituiscono un contratto tra te e il browser. Informano il browser sulla tua intenzione.
Se il tuo codice o una delle librerie di terze parti che utilizzi violano le regole predefinite, il browser sostituisce il comportamento con un'esperienza utente migliore o semplicemente ignora il problema, bloccando del tutto 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.
Chrome 90 e versioni successive
Permissions-Policy: geolocation=()Chrome 89 e versioni precedenti
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, che fa parte dello standard Web Components, offre un modo per limitare l'ambito degli stili CSS a un sottoalbero DOM specifico 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;
Questo funziona bene per il rendering lato client, ma non così bene per il rendering lato server, in cui non esiste un modo integrato per esprimere le radici nascoste 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, consulta DOM shadow dichiarativo 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 hai configurato un reindirizzamento automatico da HTTP a HTTPS, ora è il momento giusto per farlo.
Inoltre, in Chrome per computer è disponibile un codificatore AV1 ottimizzato specificamente per le videoconferenze con l'integrazione di WebRTC.
Per approfondire
Sono riportati solo alcuni dei 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
Se vuoi rimanere al passo con i nostri video, iscriviti al nostro canale YouTube per sviluppatori di Chrome e riceverai una notifica via email ogni volta che lanceremo 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.
GDS Design
- Fola Akinola
- Derek Bass
- Christopher Bodel
- Nick Krusick
- Chris Walker
Sound design e musica aggiuntiva
- Bryan Gordon
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!