Novità di Chrome 142

Rachel Andrew

Data di pubblicazione: 28 ottobre 2025

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

Punti salienti di questa release:

:target-before e :target-after pseudo-classi

Queste pseudo-classi corrispondono ai marcatori di scorrimento che precedono o seguono il marcatore attivo (corrispondente a :target-current) all'interno dello stesso gruppo di marcatori di scorrimento, come determinato dall'ordine dell'albero piatto:

  • :target-before: Corrisponde a tutti i marcatori di scorrimento che precedono il marcatore attivo nell'ordine dell'albero piatto all'interno del gruppo.
  • :target-after: corrisponde a tutti i marcatori di scorrimento che seguono il marcatore attivo nell'ordine dell'albero piatto all'interno del gruppo.

Sintassi dell'intervallo per le query sui contenitori di stili e if()

Chrome migliora le query di stile CSS e la funzione if() aggiungendo il supporto per la sintassi dell'intervallo.

Estende le query di stile oltre la corrispondenza esatta dei valori (ad esempio, style(--theme: dark)). Gli sviluppatori possono utilizzare operatori di confronto (come > e <) per confrontare proprietà personalizzate, valori letterali (ad esempio, 10 px o 25%) e valori di funzioni di sostituzione come attr() e env(). Per un confronto valido, entrambi i lati devono essere risolti nello stesso tipo di dati. È limitato ai seguenti tipi numerici: <length>, <number>, <percentage>, <angle>, <time>, <frequency> e <resolution>.

Esempi:

Confronta una proprietà personalizzata con una lunghezza letterale:

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

Confrontare due valori letterali

@container style(1em < 20px) {
  /* ... */
}

Utilizzo degli intervalli di stili in if():

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

Invoker degli interessi (attributo interestfor)

Chrome aggiunge un attributo interestfor agli elementi <button> e <a>. Questo attributo aggiunge comportamenti di "interesse" all'elemento. Quando un utente mostra interesse per l'elemento, vengono attivate azioni sull'elemento di destinazione, ad esempio la visualizzazione di un popup.

Lo user agent rileva quando un utente mostra interesse per l'elemento tramite metodi quali il posizionamento del puntatore sopra l'elemento, la pressione di tasti di scelta rapida speciali sulla tastiera o la pressione prolungata dell'elemento sui touchscreen. Quando l'interesse viene mostrato o perso, viene attivato un InterestEvent sul target, che ha azioni predefinite per i popup, come la visualizzazione e l'occultamento.

Per approfondire

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

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 143, ti aggiorneremo sulle novità di Chrome.