Aggiornamento della sintassi semplificata di nidificazione CSS

Nidificazione anticipata abilitata in Chrome 120.

Adam Argyle

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

Tuttavia, c'era 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! */
  }
}

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?

Ciò è dovuto in gran parte all'esplorazione e alla prototipazione da parte degli ingegneri di Chrome, unite al desiderio 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 gli elementi seguenti erano nidificati e non una proprietà e un valore CSS normali.

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 riprende, riconoscendo la nidificazione come nidificazione del selettore. È abbastanza veloce e affidabile da essere stato considerato sufficiente per rilasciare la sintassi.