Novità di Chrome 154

Rachel Andrew

Data di pubblicazione: 22 settembre 2026

Chrome 154 è in fase di implementazione e questo post condivide alcune delle funzionalità chiave della release. Leggi le note di rilascio complete di Chrome 154.

Punti salienti di questa release:

<iframe> Dimensioni adattabili

Chrome 154 aggiunge il supporto degli iframe con dimensioni adattabili, consentendo a un elemento <iframe> in un documento principale di dimensionarsi in base al layout del documento incorporato in modo da evitare lo scorrimento nel documento secondario. Questo sostituisce il pattern in cui misuri manualmente i contenuti iframe, invii le dimensioni con postMessage() e aggiorni le dimensioni dell'iframe nella pagina di incorporamento.

Per dimensionare un iframe in base all'altezza dei contenuti, utilizza la proprietà CSS frame-sizing sull'elemento <iframe> nella pagina di incorporamento:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

Anche il documento incorporato deve attivare l'opzione includendo un elemento <meta name="responsive-embedded-sizing"> nel relativo <head>:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

Per maggiori dettagli e demo, vedi Iframe adattabili in Chrome 154.

Modalità CSS scroll-marker-group

La proprietà scroll-marker-group controlla se un contenitore di scorrimento genera uno pseudo-elemento ::scroll-marker-group prima o dopo i suoi contenuti. Chrome 154 migliora scroll-marker-group con due modalità che impostano l'ordine di messa a fuoco e la semantica di accessibilità WAI-ARIA di ::scroll-marker-group e ::scroll-marker:

/* Links mode (default) */
scroll-marker-group: after links;

/* Tabs mode */
scroll-marker-group: before tabs;

CSS text-decoration-inset

Per impostazione predefinita, la decorazione del testo di un elemento (ad esempio una sottolineatura, una sopralinea o una linea orizzontale) ha la stessa lunghezza del testo sottoposto a rendering. La proprietà CSS text-decoration-inset ti consente di regolare i punti iniziale e finale della decorazione del testo di un elemento in modo che sia rientrata, estesa oltre o spostata rispetto ai bordi della sequenza di testo.

text-decoration-inset accetta valori di auto, lunghezza e percentuale utilizzando la sintassi a uno o due valori, ad esempio per inserire entrambi i lati di 10 px:

text-decoration-inset: 10px;

I valori positivi inseriscono la decorazione (rendendola più corta), mentre i valori negativi la estraggono (rendendola più lunga). In questo modo puoi perfezionare la spaziatura della decorazione e creare effetti di rivelazione della sottolineatura animata con le decorazioni di testo CSS anziché sfumature di sfondo o elementi aggiuntivi.

Per saperne di più, consulta la documentazione di text-decoration-inset su MDN.

Per approfondire

Questi sono solo alcuni dei punti salienti. Consulta i seguenti link per ulteriori modifiche in Chrome 154:

Iscriviti

Per rimanere aggiornato, iscriviti al canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che pubblichiamo un nuovo video. Oppure seguici su X o LinkedIn per nuovi articoli e post del blog.

Non appena verrà rilasciato Chrome 155, ti informeremo sulle novità di Chrome.