Novità di Chrome 131

Mariko Kosaka
X

Tieni presente quanto segue:

Sono Mariko Kosaka. Vediamo le novità per gli sviluppatori in Chrome 131.

Miglioramenti allo stile di <details> e <summary>

Ora hai più opzioni per definire lo stile della struttura degli elementi <details> e <summary> al fine di creare widget di riepilogo o a scomparsa.

Le modifiche introdotte in questa release consentono l'utilizzo della proprietà display e aggiungono uno pseudo-elemento ::details-content per applicare uno stile alla parte che si espande e si comprime.

In passato non era possibile modificare il tipo di visualizzazione dell'elemento details. Ora questa limitazione è stata allentata, il che ti consente di utilizzare, ad esempio, layout a griglia o flessibili.

In questo esempio di accordion esclusivo, composto da diversi elementi details, quando uno degli elementi details viene espanso, i relativi contenuti vengono posizionati accanto a summary.

Widget a fisarmonica con layout flessibile

Ciò si ottiene utilizzando un layout flessibile nell'elemento details. Puoi anche provare altri pattern di layout con altri valori di visualizzazione, ad esempio grid.

Per una spiegazione più approfondita, consulta l'articolo di Bramus Altre opzioni per lo stile <details>.

@page riquadri di margine

È stato aggiunto il supporto per le caselle dei margini di pagina quando si stampa un documento web o lo si esporta in formato PDF.

Le caselle dei margini della pagina ti consentono di definire i contenuti nell'area del margine di una pagina. In questo modo, puoi fornire intestazioni e piè di pagina personalizzati anziché utilizzare quelli integrati generati dal browser.

Il margine della pagina è definito utilizzando la regola @page in CSS.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

L'aspetto e i contenuti di una casella del riquadro vengono specificati con le proprietà CSS all'interno delle regole at che rappresentano le 16 caselle del riquadro che utilizzano i contenuti generati.

Per la numerazione delle pagine, sono supportati anche i contatori con page per il numero di pagina corrente e pages per il numero totale di pagine.

Per una spiegazione più approfondita, consulta l'articolo di Rachel Aggiungere contenuti ai margini delle pagine web quando vengono stampate utilizzando CSS .

E tanto altro.

E ovviamente c'è molto altro.

  • Supporto per le risorse SVG esterne per "clip-path", "fill", "stroke" e "marker".
  • WebHID è abilitato all'interno di contesti di worker dedicati.
  • Controlla il comportamento degli emoji con la proprietà CSS font-variant-emoji.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i seguenti link per ulteriori modifiche in Chrome 131.

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Mariko Kosaka e, non appena verrà rilasciata la versione 132 di Chrome, sarò qui per dirti le novità del browser.