W Chrome 120 włączone jest zagnieżdżanie w widoku z wyprzedzeniem.
Na początku tego roku Chrome wdrożył funkcję zagnieżdżania CSS w wersji 112, która obecnie znajduje się w każdej głównej przeglądarce.
W pierwszym artykule z przykładami nieprawidłowego zagnieżdżania pojawił się jednak jeden rygorystyczny i potencjalnie nieoczekiwany wymóg dotyczący składni. Z tego artykułu dowiesz się, co się zmieniło w specyfikacji i od Chrome 120.
Nazwy tagów elementów Nest
Jednym z najbardziej zaskakujących ograniczeń w pierwszej wersji usługi zagnieżdżania CSS jest brak możliwości zagnieżdżania nazw tagów samych elementów. Usunęliśmy tę niemożność, dzięki czemu poniższe zagnieżdżenie elementów CSS jest prawidłowe:
.card {
h1 {
/* this is now valid! */
}
}
/* the same as */
.card {
& h1 {
/* this is now valid! */
}
}
Jest to naprawdę przydatne podczas zagnieżdżania list uporządkowanych, nieuporządkowanych lub definicji:
dl {
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
Co się zmieniło, aby umożliwić zagnieżdżanie?
To głównie zasługa badań i prototypów wykonanych przez inżynierów Chrome, w połączeniu z chęcią społeczności i grupy roboczej CSS.
Wiele wątpliwości co do tego, że parsera CSS można nauczyć się odróżniać nazwę tagu (div) od nazwy właściwości (visibility), ponieważ parser nie ma obecnie możliwości patrzenia w przyszłość. Aby zrozumieć, że token jest właściwością, przeglądarka musi sprawdzić, czy : podąża za nieznanym tokenem. Dlatego w pierwotnej specyfikacji symbol & był używany do informowania przeglądarki, że poniższy kod jest zagnieżdżony, a nie zwykłej właściwości i wartości CSS.
Na szczęście inżynier odkrył, że gdy parser nie przetworzy zagnieżdżonego selektora jako właściwości zgodnie z przekazem standardowego wykorzystania, można go ponownie uruchomić w trybie, który zakładał selektor, a nie właściwość. Analiza zagnieżdżenia zostanie wznowiona, a zagnieżdżenie zostanie uznane za zagnieżdżenie selektora. Jest wystarczająco szybka i niezawodna, by opublikować składnię.