Aggiornamento della sintassi semplificata di nidificazione CSS

Nidificazione Lookahead attivata in Chrome 120.

Adam Argyle

All'inizio di quest'anno Chrome ha spedito la nesting dei CSS nella versione 112, ora in tutti i principali browser.

Tuttavia, c'era un requisito rigoroso e potenzialmente imprevisto per le indicata nel primo articolo degli esempi di nidificazione non validi. Questo articolo di follow-up illustra cosa è cambiato nelle specifiche e da Chrome 120.

Nomi dei tag degli elementi di nidificazione

Una delle limitazioni più sorprendenti della prima versione di nidificazione dei CSS la sintassi, era l'impossibilità di nidificare i nomi dei tag degli elementi nudi. Questa incapacità ha rimossa, rendendo valida la seguente nidificazione CSS:

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

Si tratta di una soluzione particolarmente efficace quando si nidificano elenchi ordinati, non ordinati o di definizione:

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

Cosa è cambiato per consentire la nidificazione?

È in gran parte grazie all'esplorazione e alla prototipazione da parte degli ingegneri di Chrome, in combinazione con il desiderio della community e del gruppo di lavoro CSS.

C'era una discreta quantità di dubbi sul fatto che l'analizzatore sintattico CSS potesse essere insegnato a differenzia tra un nome di tag (div) e un nome di proprietà (visibility) l'analizzatore sintattico non ha il concetto di guardare avanti. Per comprendere che il token è una proprietà, il browser deve guardare avanti e vedere se segue un : il token sconosciuto. Pertanto, nella specifica originale, il simbolo & era utilizzato per indicare al browser che ciò che segue è nidificato e non un normale CSS una proprietà e un valore.

Fortunatamente, un ingegnere ha scoperto che quando il parser non riusciva ad analizzare selettore nidificato come proprietà in base al normale passaggio di consumo, è stata riavviata in una modalità che utilizzava un selettore anziché una proprietà. Analisi in corso... riprende, riconoscendo che la nidificazione è stata definita come "selettore". È abbastanza veloce e abbastanza affidabile da essere sufficientemente affidabile per il rilascio della sintassi.