Novità di Chrome 131

Mariko Kosaka
X

Tieni presente quanto segue:

Sono Marik Kosaka. Scopriamo le novità di Chrome 131 per gli sviluppatori.

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.

Testo evidenziato in rosa

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'ereditarietà dell'evidenziazione, quando lo stesso testo viene selezionato in Chrome 131, il colore del testo diventa blu.

Testo evidenziato in blu

Ci sono alcune altre modifiche a questo proposito, quindi dai un'occhiata alla sezione Modifiche all'ereditarietà per gli stili di selezione CSS scritti da Stephen Chenney di Igalia, che ha lavorato a questa funzionalità.

Miglioramenti dello stile per <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 caselle a 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. Pertanto, puoi fornire intestazioni e piè di pagina personalizzati anziché utilizzare le intestazioni e i piè di pagina 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 a margine vengono specificati con le proprietà CSS all'interno delle regole at-rule che rappresentano le 16 caselle a margine 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 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.

Iscriviti

Per rimanere al passo con le 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.