Nidificazione del Lookahead attivata in Chrome 120.
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.