Novità di Chrome 133

Rachel Andrew

Ecco cosa devi sapere:

Funzione avanzata attr() del CSS

Questa funzionalità si aggiunge alla funzione attr() esistente, alle funzionalità specificate nel CSS di livello 5. Ciò consente di utilizzare tipi diversi da <string> 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 di questo attributo viene analizzato in un <color> utilizzando attr() e type(). Il valore di riserva è impostato su red.

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

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

Scopri di più in Aggiornamento di CSS attr().

Query sui container dello stato di scorrimento CSS

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

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

  • stuck: un contenitore con posizionamento fisso è bloccato su uno dei bordi della casella di scorrimento.
  • snapped: Un contenitore allineato con lo scorrimento è attualmente allineato orizzontalmente o verticalmente.
  • scrollable: Indica se un contenitore di scorrimento può essere scorrevole nella direzione richiesta.

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à consentono di controllare con precisione la spaziatura verticale utilizzando le metriche del carattere.

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.overallProgressoffre una rappresentazione comoda e coerente dell'avanzamento di un'animazione nelle sue iterazioni e indipendentemente dalla natura della sua sequenza temporale.
  • Node.prototype.moveBefore ti consente di spostare gli elementi in un albero DOM senza reimpostare lo stato dell'elemento.
  • L'interfaccia FileSystemObserver notifica ai siti web le modifiche apportate al file system.
  • Il metodo PublicKeyCredential getClientCapabilities() ti consente di determinare quali funzionalità WebAuthn sono supportate dal client dell'utente.

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

Per approfondire

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

Iscriviti

Per rimanere al corrente, iscriviti al canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che pubblichiamo un nuovo video.

Non appena verrà rilasciato Chrome 133, ti comunicheremo le novità di Chrome.