Wczesne dni zapytań dotyczących stylu kontenera

Nadal jesteśmy na początku suuuuuper z zapytaniami kontenerowymi. Za wcześnie na szerokie wsparcie przeglądarek, ale Chromium już je obsługuje, Safari zaczął wspierać go w wersji 16, a Firefox jest prawdopodobnie niedaleko w tyle.

W większości wczesnych rozmów dotyczących zapytań kontenerowych składnia jest zwykle porównywana z zapytaniami o media.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Obaj wysyłają zapytania do min-width: 600. Różnica polega na tym, że zapytanie o media patrzy na szerokość widocznego obszaru, aby wywołać zmiany stylu, podczas gdy zapytanie kontenera na obliczoną szerokość .posts element. Słodki!

Ale po wysłuchaniu Odcinek podcastu CSS 59, Una i Adam zagłębiali się w przyszłość zapytań kontenerowych: zapytania dotyczące stylu! Aktualny roboczy projekt specyfikacji CSS Containment Module Level 3 definiuje zapytania w stylu kontenera:

A zapytanie o styl kontenera umożliwia odpytywanie wartości obliczone ukończenia kontener zapytań. Jest to logiczna kombinacja indywidualności cechy stylu (), aby każde zapytanie miało pojedynczą, konkretną właściwość kontenera zapytań.

Ale jeszcze nie ma przykładów na składnię — tylko krótki opis:

Składnia  jest taki sam jak dla a deklaracja, a jego zapytanie jest prawdziwe, jeśli obliczona wartość danej właściwości w kontenerze zapytań jest zgodna z podaną wartością (która jest również obliczana w odniesieniu do kontenera zapytań), nieznana, jeśli właściwość lub jej wartość jest nieprawidłowa lub nieobsługiwana, a w przeciwnym razie fałsz . Składnia logiczna i łączenie logiczne cechy stylu w zapytanie o styl jest taki sam jak dla Zapytania o funkcje CSS. (Widzieć @wspiera.)

Więc tak, z czasem powinniśmy spodziewać się czegoś takiego:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

To dość głupi przykład. Należy zauważyć, że container-type nie bazuje już na kontenerze inline-size lecz przez style. Moglibyśmy to tak opiekować:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…ale wszystkie zapytania dotyczące kontenerów są style zapytania domyślnie. Dobrze. przynajmniej w takim stanie, w jakim jest dzisiaj. Miriam Suzanne ma miłe? zarys możliwych problemów, które mogą się pojawić z tym.

Gdzie może przydać się zapytanie o style kontenera? Jeszcze nie wiem! Ale mój umysł kieruje się do kilku miejsc:

• Wartości właściwości niestandardowych: Widzieliśmy niestandardowe właściwości używane jako wskaźniki stanu, takie jak Metoda przełączania DRY Ana omówiła jakiś czas temu. Zmienia się wartość, podobnie jak style.
• Alternatywne podejście do trybu ciemnego: Zamiast opierać to wszystko na zmianie klasy treści, która ponownie przypisuje wartości właściwości niestandardowych, być może możemy zmienić całą paletę kolorów, jeśli, powiedzmy, tło treści zmieni kolor.
• Bardziej złożone warunki zapytania: Powiedzmy, że chcemy zastosować style, gdy size i style warunki dla kontenera są spełnione.

Una wspomniał również w podkaście CSS, że zapytania dotyczące stylu kontenera mogą pomóc w zapobieganiu niektórym niezręcznym sytuacjom związanym ze stylizacją, na przykład w przypadku, gdy tekst pisany kursywą jest już pisany kursywą. blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}