Aggiornamento della sintassi semplificata di nidificazione CSS

Nidificazione anticipata abilitata in Chrome 120.

Adam Argyle

All'inizio di quest'anno, Chrome ha rilasciato il nidificazione CSS nella versione 112 e ora è presente in tutti i principali browser.

Supporto dei browser

• 120
• 120
• 117
• 17.2

Origine

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

Nomi dei tag elemento nidificati

Una delle limitazioni più sorprendenti della prima release della sintassi di nidificazione CSS era l'impossibilità di nidificare i nomi dei tag degli elementi senza attributi. Questa limitazione è stata rimossa, rendendo valido il seguente nidificazione CSS:

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

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

Questa funzionalità diventa davvero utile quando si nidificano elenchi ordinati, non ordinati o di definizioni:

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

  dd {
    /* dl dd styles */
  }
}

Cosa è cambiato per consentire questo nidificazione?

È in gran parte grazie ad alcune esplorazioni e prototipazioni da parte degli ingegneri di Chrome, insieme alla volontà della community e del CSS Working Group.

Esisteva un buon dubbio sul fatto che all'analizzatore sintattico CSS potesse essere insegnato a distinguere tra un nome tag (div) e un nome proprietà (visibility), poiché al momento l'analizzatore non ha alcun concetto di sguardo avanti. Per capire che il token è una proprietà, il browser deve guardare avanti e vedere se segue un :. Pertanto, nella specifica originale, il simbolo & veniva utilizzato per indicare al browser che quanto segue era nidificato e non una proprietà e un valore CSS regolari.

Fortunatamente, un ingegnere ha scoperto che quando l'analisi non riusciva a analizzare il selettore nidificato come proprietà in base al normale passaggio di consumo, poteva essere riavviato in una modalità che presupponeva un selettore anziché una proprietà. L'analisi sintattica riprende, riconoscendo il nidificazione come nidificazione del selettore. È abbastanza veloce e affidabile da essere stato considerato sufficiente per rilasciare la sintassi.