Novità di Chrome 133

Rachel Andrew

Ecco ciò che devi sapere:

Funzione attr() avanzata CSS

Questa funzionalità aggiunge alla funzione attr() esistente le funzionalità specificate nel livello 5 del CSS. Ciò consente di utilizzare tipi diversi da <string> e di utilizzarli in tutte le proprietà CSS (oltre al supporto esistente per i contenuti degli pseudo-elementi).

Nell'esempio seguente il valore della proprietà color per div utilizza il valore dell'attributo data-color. Il valore dell'attributo viene analizzato in un <color> utilizzando attr() e type(). Il valore alternativo è impostato su red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

Scopri di più nell'articolo Il CSS attr() riceve un upgrade.

Query del contenitore dello stato di scorrimento CSS

Utilizza le query dei contenitori per definire lo stile dei discendenti dei contenitori in base al loro stato di scorrimento.

Il contenitore della query è un contenitore con scorrimento o un elemento interessato dalla posizione di scorrimento di un contenitore con scorrimento. È possibile eseguire query sui seguenti stati:

  • stuck: un contenitore con posizione fissa è attaccato a uno dei bordi della casella di scorrimento.
  • snapped: un contenitore allineato con lo snap di scorrimento è attualmente agganciato orizzontalmente o verticalmente.
  • scrollable: indica se è possibile scorrere un contenitore con scorrimento nella direzione specificata nella query.

Un nuovo tipo di contenitore: scroll-state consente di eseguire query sui contenitori. Ad esempio:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Scopri di più e guarda alcune demo nelle query sullo stato di scorrimento CSS.

CSS text-box, text-box-trim e text-box-edge

La proprietà text-box-trim specifica i lati da tagliare, sopra o sotto, mentre la proprietà text-box-edge specifica come deve essere tagliato il bordo.

Queste proprietà ti consentono di controllare con precisione la spaziatura verticale utilizzando le metriche dei caratteri.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Scopri come utilizzare queste nuove proprietà in CSS text-box-trim.

E tanto altro.

Ovviamente ce ne sono molti altri.

  • Animation.overallProgressti offre una rappresentazione comoda e coerente dell'avanzamento di un'animazione nelle sue iterazioni e indipendentemente dalla natura della sequenza temporale.
  • Node.prototype.moveBefore ti consente di spostare gli elementi all'interno di una struttura DOM senza reimpostare lo stato dell'elemento.
  • L'interfaccia FileSystemObserver notifica ai siti web le modifiche al file system.
  • Il metodo PublicKeyCredential getClientCapabilities() consente di determinare quali funzionalità WebAuthn sono supportate dal client dell'utente.

Per informazioni dettagliate su queste e su molte altre funzionalità, consulta le note di rilascio complete di Chrome 133.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i seguenti link per altre modifiche in Chrome 133.

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.

Non appena verrà rilasciata la versione 133 di Chrome, ti comunicheremo le novità.