Novità di Chrome 131

Mariko Kosaka

Tieni presente quanto segue:

• L'ereditarietà degli elementi in evidenza del CSS sta cambiando.
• Altri stili CSS per l'elemento <details>.
• Layout di stampa più semplice con le caselle dei margini di pagina.
• E c'è molto altro.

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

Ereditarietà degli elementi in evidenza del CSS

L'eredità degli elementi evidenziati CSS sta cambiando per le pseudoclassi ::selection e ::target-text. In questo modo viene creato un modello più intuitivo per l'eredità degli stili e si allinea alle pseudoclassi ::highlight, ::spelling-error e ::grammar-error aggiunte di recente.

Considera questo snippet di codice con testo in grassetto.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

Nelle versioni precedenti di Chrome, quando selezionavi il testo in grassetto, il colore del testo non diventava blu nonostante l'impostazione della pseudo-classe ::selection sull'elemento paragrafo principale.

Questo perché è stato implementato utilizzando il modello di ereditarietà dell'elemento di origine. Pertanto, in questo caso la pseudo-classe ::selection corrisponde solo agli elementi con la classe blu, che non è presente nell'elemento all'interno di questo paragrafo.

Con la modifica dell'eredità dell'evidenziazione, quando viene selezionato lo stesso testo in Chrome 131, il testo assumerà il colore blu.

Esistono altre modifiche correlate, quindi assicurati di consultare l'articolo Modifiche all'eredità per lo stile di selezione CSS scritto da Stephen Chenney di Igalia, che ha lavorato a questa funzionalità.

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.

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 di margine vengono specificati con le proprietà CSS all'interno delle regole at che rappresentano le 16 caselle del riquadro di margine utilizzando 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 delle 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.

• Note di rilascio di Chrome 131.
• Novità di Chrome DevTools (131)
• Elenco delle modifiche al repository di origine di Chromium
• Calendario delle release di Chrome

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à di Chrome.