Aggiornamento della sintassi semplificata di nidificazione CSS

Nidificazione del Lookahead attivata in Chrome 120.

Adam Argyle

All'inizio di quest'anno, Chrome ha introdotto la nidificazione CSS 112, che ora è disponibile in tutti i principali browser.

Tuttavia, esisteva un requisito rigoroso e potenzialmente imprevisto per la sintassi, elencato nel primo articolo degli esempi di nidificazione non validi. Questo articolo di follow-up illustra le modifiche apportate alle specifiche e quelle relative a Chrome 120.

Nomi dei tag degli elementi di nidificazione

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

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

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

Ciò diventa molto utile durante la nidificazione di elenchi ordinati, non ordinati o di definizione:

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

  dd {
    /* dl dd styles */
  }
}

Cosa è cambiato per consentire questa nidificazione?

in gran parte grazie ad alcune attività di esplorazione e prototipazione da parte degli ingegneri di Chrome, combinate con il desiderio della community e del CSS Working Group.

C'erano abbastanza dubbi sul fatto che al parser CSS fosse possibile insegnare a distinguere tra il nome di un tag (div) e un nome di proprietà (visibility), in quanto al momento il parser non ha alcun concetto di futuro. Per comprendere che il token è una proprietà, il browser deve guardare avanti e verificare se un oggetto : segue il token sconosciuto. Di conseguenza, nelle specifiche originali, è stato utilizzato il simbolo & per indicare al browser che ciò che segue era nidificato e non è una proprietà e un valore CSS regolari.

Fortunatamente, un ingegnere ha scoperto che quando il parser non riesce ad analizzare il selettore nidificato come una proprietà secondo il normale pass di consumo, è possibile riavviarlo in una modalità che assumeva un selettore anziché una proprietà. L'analisi riprende, confermando la nidificazione come nidificazione del selettore. È abbastanza veloce e affidabile da essere stato determinato in modo sufficiente per rilasciare la sintassi.