Aktualizacja składni w ramach luźnej zagnieżdżania CSS

W Chrome 120 włączono zagnieżdżanie prognozowania.

Adam Argyle

W tym roku wprowadziliśmy w Chrome 112 zagnieżdżanie CSS, a teraz jest ono dostępne we wszystkich głównych przeglądarkach.

Jednak w języku składni pojawiło się jedno surowe i potencjalnie nieoczekiwane wymaganie, opisane w pierwszym artykule w sekcji nieprawidłowe przykłady zagnieżdżania. Ten artykuł będzie dotyczył zmian w specyfikacji i w Chrome 120.

Zagnieżdżanie nazw tagów elementów

Jednym z najbardziej zaskakujących ograniczeń w pierwszej wersji składni zagnieżdżania CSS była niemożność zagnieżdżania nazw tagów elementu bez elementów. Ta niedogodność została usunięta, dzięki czemu następujące zagnieżdżanie CSS jest prawidłowe:

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

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

Ta funkcja staje się naprawdę przydatna, gdy zagnieżdżasz listy uporządkowane, nieuporządkowane lub definicji:

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

  dd {
    /* dl dd styles */
  }
}

Co się zmieniło, że umożliwiło to zagnieżdżenie?

Jest to w dużej mierze zasługa inżynierów Chrome, którzy przeprowadzili badania i utworzyli prototypy, a także chęć społeczności i grupy roboczej CSS.

Istniały poważne wątpliwości, czy parser CSS można nauczyć rozróżniania nazwy tagu (div) od nazwy właściwości (visibility), ponieważ obecnie nie ma on możliwości przewidywania. Aby zrozumieć, że token jest właściwością, przeglądarka musi sprawdzić, czy po nieznanym tokenie następuje znak :. Dlatego w oryginalnej specyfikacji użyto symbolu &, aby wskazać przeglądarce, że elementy, które następują, są zagnieżdżone, a nie są zwykłą właściwością i wartością CSS.

Na szczęście jeden z inżynierów odkrył, że gdy parser nie może przeanalizować zagnieżdżonego selektora jako usługi zgodnie z normalnym przetwarzaniem, można go ponownie uruchomić w trybie, który zakłada selektor zamiast usługi. Przetwarzanie wznawia się, uznając zagnieżdżenie za zagnieżdżenie selektora. Jest wystarczająco szybki i wystarczająco niezawodny, aby uznać go za wystarczająco dobry do opublikowania składni.