M

MLOG

Polski

Odkryj CSS Container Style Queries – podejście do responsywnego designu, gdzie komponenty adaptują się do stylu kontenera, a nie widoku. Poznaj ich zastosowania.

CSS Container Style Queries: responsywny design oparty na stylach dla globalnych aplikacji

Tradycyjny responsywny design opiera się w dużej mierze na zapytaniach o media (media queries), dostosowując układ i style strony internetowej w zależności od rozmiaru widoku (viewport). Chociaż jest to skuteczne, podejście to może prowadzić do niespójności i trudności w przypadku złożonych komponentów, które muszą dostosowywać się do różnych kontekstów w tym samym widoku. CSS Container Style Queries oferują bardziej granularne i intuicyjne rozwiązanie, pozwalając elementom reagować na style zastosowane w ich elemencie zawierającym, co zapewnia prawdziwie responsywne zachowanie oparte na komponentach.

Czym są zapytania o styl kontenera w CSS?

Zapytania o styl kontenera rozszerzają możliwości zapytań kontenerowych poza proste warunki oparte na rozmiarze. Zamiast sprawdzać szerokość lub wysokość kontenera, pozwalają one sprawdzać obecność określonych właściwości i wartości CSS zastosowanych w tym kontenerze. Umożliwia to komponentom dostosowywanie swojego stylu w oparciu o kontekst kontenera, a nie tylko jego wymiary.

Pomyśl o tym w ten sposób: zamiast pytać „Czy widok jest szerszy niż 768px?”, możesz zapytać „Czy ten kontener ma ustawioną właściwość niestandardową --theme: dark;?”. Otwiera to zupełnie nowy świat możliwości tworzenia elastycznych i reużywalnych komponentów, które mogą płynnie dostosowywać się do różnych motywów, układów lub wariantów marki na całej Twojej stronie internetowej lub w aplikacji.

Zalety zapytań o styl kontenera

Jak używać zapytań o styl kontenera w CSS

Oto opis sposobu implementacji zapytań o styl kontenera:

1. Konfiguracja kontenera

Najpierw musisz wyznaczyć element jako kontener. Możesz to zrobić za pomocą właściwości container-type:

.container {
  container-type: inline-size;
}

Wartość inline-size jest najczęstsza i najbardziej użyteczna, ponieważ pozwala kontenerowi odpytywać o swój rozmiar w osi wbudowanej (poziomej). Można również użyć size, które odpytuje zarówno o rozmiar w osi wbudowanej, jak i blokowej. Używanie samego size może mieć implikacje wydajnościowe, jeśli nie będziesz ostrożny.

Alternatywnie, użyj container-type: style, aby używać kontenera tylko dla zapytań o styl, a nie o rozmiar, lub container-type: size style, aby używać obu. Aby kontrolować nazwę kontenera, użyj container-name: my-container, a następnie odwołuj się do niego za pomocą @container my-container (...).

2. Definiowanie zapytań o styl

Teraz możesz użyć reguły @container style(), aby zdefiniować style, które mają być zastosowane, gdy spełniony jest określony warunek:

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

W tym przykładzie style wewnątrz reguły @container zostaną zastosowane do elementu .component tylko wtedy, gdy jego element zawierający ma ustawioną właściwość niestandardową --theme na dark.

3. Stosowanie stylów do kontenera

Na koniec musisz zastosować właściwości CSS, które sprawdzają Twoje zapytania o styl, do elementu kontenera:

<div class="container" style="--theme: dark;">
  <div class="component">This is a component. </div>
</div>

W tym przykładzie .component będzie miał ciemne tło i biały tekst, ponieważ jego kontener ma styl --theme: dark; zastosowany bezpośrednio w HTML (dla uproszczenia). Najlepszą praktyką jest stosowanie stylów za pomocą klas CSS. Możesz także użyć JavaScriptu, aby dynamicznie zmieniać style kontenera, co wywoła aktualizację zapytań o styl.

Praktyczne przykłady dla globalnych aplikacji

1. Komponenty z motywami

Wyobraź sobie stronę internetową, która obsługuje wiele motywów. Możesz użyć zapytań o styl kontenera, aby automatycznie dostosowywać styl komponentów w zależności od aktywnego motywu.

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>Card Title</h2>
    <p>Card content.</p>
  </div>
</div>

W tym przykładzie komponent .card automatycznie przełączy się między ciemnym a jasnym motywem w zależności od właściwości --theme jego kontenera. Jest to bardzo korzystne dla witryn, w których użytkownicy mogą wybierać różne motywy w zależności od swoich preferencji.

2. Warianty układu

Możesz używać zapytań o styl kontenera do tworzenia różnych wariantów układu dla komponentów w zależności od dostępnej przestrzeni lub ogólnego układu strony. Rozważmy komponent do wyboru języka. W głównej nawigacji może to być kompaktowe menu rozwijane. W stopce może to być pełna lista dostępnych języków.

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* Styles for compact dropdown */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* Styles for full list of languages */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

To podejście jest cenne dla stron internetowych przeznaczonych dla zróżnicowanych interfejsów użytkownika na różnych urządzeniach i platformach. Pamiętaj, że struktury witryn mobilnych i desktopowych często znacznie się różnią, a to może pomóc komponentom w adaptacji.

3. Dostosowywanie do typu treści

Rozważmy stronę z wiadomościami zawierającą streszczenia artykułów. Możesz użyć zapytań o styl kontenera, aby dostosować prezentację streszczeń w zależności od tego, czy zawierają obrazek, czy nie.

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (with image) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (without image) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

Umożliwia to bardziej atrakcyjną wizualnie i informacyjną prezentację streszczeń artykułów, poprawiając doświadczenie użytkownika. Zauważ, że ustawianie właściwości `--has-image` bezpośrednio w HTML nie jest idealne. Lepszym podejściem byłoby użycie JavaScriptu do wykrywania obecności obrazka i dynamicznego dodawania lub usuwania klasy (np. `.has-image`) do elementu `.article-summary`, a następnie ustawienie właściwości niestandardowej `--has-image` w regule CSS dla klasy `.has-image`.

4. Stylizacja zlokalizowana

Dla międzynarodowych stron internetowych, zapytania o styl kontenera mogą być używane do dostosowywania stylów w zależności od języka lub regionu. Na przykład, możesz chcieć użyć różnych rozmiarów czcionek lub odstępów dla języków z dłuższym tekstem.

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

Pozwala to na tworzenie bardziej dopasowanych i przyjaznych dla użytkownika doświadczeń dla różnych grup językowych. Pamiętaj, że niektóre języki, takie jak arabski i hebrajski, są pisane od prawej do lewej i wymagają zastosowania specyficznych stylów. W przypadku japońskiego i innych języków wschodnioazjatyckich mogą być potrzebne inne odstępy i rozmiary czcionek, aby poprawnie renderować znaki.

5. Kwestie dostępności

Zapytania o styl kontenera mogą również poprawić dostępność, dostosowując style komponentów w oparciu o preferencje użytkownika lub możliwości urządzenia. Na przykład, możesz zwiększyć kontrast komponentu, jeśli użytkownik włączył tryb wysokiego kontrastu w swoim systemie operacyjnym.

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

Zapewnia to, że Twoja strona jest użyteczna i dostępna dla każdego, niezależnie od jego możliwości. Zwróć uwagę na użycie zapytania o media `@media (prefers-contrast: more)` do wykrywania trybu wysokiego kontrastu na poziomie systemu operacyjnego, a następnie ustawienie właściwości niestandardowej `--high-contrast`. Pozwala to na wywoływanie zmian stylu za pomocą zapytania o styl w oparciu o ustawienia systemowe użytkownika.

Dobre praktyki

Wsparcie przeglądarek

Zapytania o styl kontenera mają doskonałe wsparcie w nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari i Edge. Jednak starsze przeglądarki mogą nie w pełni obsługiwać tej funkcji. Pamiętaj, aby używać zapytań o funkcje, aby zapewnić style zastępcze dla tych przeglądarek lub użyć polyfilla.

Podsumowanie

CSS Container Style Queries oferują potężne i elastyczne podejście do responsywnego designu, pozwalając na tworzenie prawdziwie komponentowych i adaptacyjnych stron internetowych oraz aplikacji. Wykorzystując stylizację elementów kontenera, możesz odblokować nowy poziom kontroli i szczegółowości w swoich projektach, co skutkuje bardziej łatwymi w utrzymaniu, skalowalnymi i przyjaznymi dla użytkownika doświadczeniami dla globalnej publiczności.

Wykorzystaj zapytania o styl kontenera, aby budować responsywne komponenty, które płynnie dostosowują się do różnych motywów, układów, języków i wymagań dostępności, tworząc prawdziwie globalne doświadczenie internetowe.

Zasoby