M

MLOG

Polski

Opanuj CSS container queries, aby tworzyć prawdziwie responsywne strony. Naucz się dostosowywać układy na podstawie rozmiaru kontenera, a nie tylko widoku, zapewniając płynne doświadczenie użytkownika na wszystkich urządzeniach.

Odkrywanie responsywnego projektowania: Kompleksowy przewodnik po CSS Container Queries

Przez lata responsywne projektowanie stron internetowych opierało się głównie na media queries, pozwalając stronom na dostosowywanie ich układu i stylów w oparciu o szerokość i wysokość widoku (viewport). Chociaż jest to skuteczne podejście, czasami może wydawać się ograniczające, zwłaszcza w przypadku złożonych komponentów, które muszą dostosowywać się niezależnie od ogólnego rozmiaru ekranu. W tym miejscu pojawiają się CSS Container Queries – potężne nowe narzędzie, które pozwala elementom reagować na rozmiar ich elementu nadrzędnego, a nie na sam widok. Otwiera to nowy poziom elastyczności i precyzji w responsywnym projektowaniu.

Czym są CSS Container Queries?

CSS Container Queries to funkcja CSS, która pozwala na stosowanie stylów do elementu w oparciu o rozmiar lub inne cechy jego kontenera nadrzędnego. W przeciwieństwie do media queries, które celują w widok (viewport), container queries celują w konkretny element. Umożliwia to tworzenie komponentów, które dostosowują swoje style w zależności od dostępnej przestrzeni w ich kontenerze, niezależnie od rozmiaru ekranu.

Wyobraź sobie komponent karty, który wyświetla się inaczej w zależności od tego, czy jest umieszczony w wąskim pasku bocznym, czy w szerokim obszarze głównej treści. Przy użyciu media queries, trzeba by było dostosować style karty w oparciu o rozmiar ekranu, co mogłoby prowadzić do niespójności. Dzięki container queries, można zdefiniować style, które stosują się specjalnie, gdy kontener karty osiągnie określoną szerokość, zapewniając spójne i responsywne doświadczenie w różnych układach.

Dlaczego warto używać Container Queries?

Container queries oferują kilka zalet w porównaniu z tradycyjnymi media queries:

Jak zaimplementować CSS Container Queries

Implementacja CSS container queries obejmuje dwa kluczowe kroki: zdefiniowanie kontenera i napisanie zapytań.

1. Definiowanie kontenera

Najpierw należy wyznaczyć element jako *kontener*. Robi się to za pomocą właściwości container-type. Istnieją dwie główne wartości dla container-type:

Można również użyć container-name, aby nadać kontenerowi nazwę, co może być pomocne przy celowaniu w konkretne kontenery w zapytaniach. Na przykład:

.card-container {
  container-type: inline-size;
  container-name: cardContainer;
}

Ten kod deklaruje element z klasą .card-container jako kontener. Określamy inline-size, aby umożliwić zapytania oparte na szerokości kontenera. Nadaliśmy mu również nazwę cardContainer.

2. Pisanie zapytań kontenera

Gdy już zdefiniujesz kontener, możesz pisać zapytania kontenera za pomocą reguły @container. Składnia jest podobna do media queries:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

To zapytanie stosuje style wewnątrz nawiasów klamrowych tylko wtedy, gdy kontener o nazwie cardContainer ma minimalną szerokość 400px. Celuje ono w element .card (prawdopodobnie dziecko .card-container) i dostosowuje jego układ. Jeśli kontener jest węższy niż 400px, te style nie zostaną zastosowane.

Skrót: Można również użyć skróconej wersji reguły `@container`, gdy nie trzeba określać nazwy kontenera:

@container (min-width: 400px) {
  /* Style do zastosowania, gdy kontener ma co najmniej 400px szerokości */
}

Praktyczne przykłady Container Queries

Przyjrzyjmy się kilku praktycznym przykładom, jak można użyć container queries do tworzenia bardziej responsywnych i adaptowalnych układów.

Przykład 1: Komponent karty

Ten przykład pokazuje, jak dostosować komponent karty w oparciu o szerokość jego kontenera. Karta będzie wyświetlać swoją zawartość w jednej kolumnie, gdy kontener jest wąski, i w dwóch kolumnach, gdy kontener jest szerszy.

HTML:

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image" class="card-image">
    <div class="card-content">
      <h3>Card Title</h3>
      <p>This is some sample content for the card.</p>
      <a href="#">Learn More</a>
    </div>
  </div>
</div>

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

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

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

W tym przykładzie, .card-container jest zadeklarowany jako kontener. Gdy szerokość kontenera jest mniejsza niż 500px, .card użyje układu kolumnowego, układając obraz i treść pionowo. Gdy szerokość kontenera wynosi 500px lub więcej, .card przełączy się na układ wierszowy, wyświetlając obraz i treść obok siebie.

Przykład 2: Menu nawigacyjne

Ten przykład pokazuje, jak dostosować menu nawigacyjne w zależności od dostępnej przestrzeni. Gdy kontener jest wąski, pozycje menu będą wyświetlane w formie listy rozwijanej. Gdy kontener jest szerszy, pozycje menu będą wyświetlane poziomo.

HTML:

<nav class="nav-container">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

W tym przykładzie, .nav-container jest zadeklarowany jako kontener. Gdy szerokość kontenera jest mniejsza niż 600px, pozycje menu będą wyświetlane jako lista pionowa. Gdy szerokość kontenera wynosi 600px lub więcej, pozycje menu będą wyświetlane poziomo przy użyciu flexbox.

Przykład 3: Lista produktów

Lista produktów w sklepie internetowym może dostosowywać swój układ w zależności od szerokości kontenera. W mniejszych kontenerach dobrze sprawdzi się prosta lista ze zdjęciem produktu, tytułem i ceną. W miarę powiększania się kontenera można dodać dodatkowe informacje, takie jak krótki opis czy oceny klientów, aby wzbogacić prezentację. Pozwala to również na bardziej szczegółową kontrolę niż celowanie wyłącznie w widok.

HTML:

<div class="product-listing-container">
  <div class="product-item">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p class="price">$19.99</p>
  </div>
  <div class="product-item">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p class="price">$24.99</p>
  </div>
</div>

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

Ten kod CSS najpierw ustanawia `product-listing-container` jako kontener. Dla wąskich kontenerów (poniżej 400px), każdy produkt zajmuje 100% szerokości. Gdy kontener powiększa się powyżej 400px, produkty są ułożone w dwóch kolumnach. Powyżej 768px, produkty są wyświetlane w trzech kolumnach.

Wsparcie przeglądarek i Polyfills

Container queries mają dobre wsparcie w nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari i Edge. Jednak starsze przeglądarki mogą ich natywnie nie obsługiwać.

Aby wspierać starsze przeglądarki, można użyć polyfill. Popularną opcją jest container-query-polyfill, który można znaleźć na npm i GitHub. Polyfills wypełniają lukę dla nieobsługiwanych funkcji, pozwalając na używanie container queries nawet w starszych przeglądarkach.

Dobre praktyki stosowania Container Queries

Oto kilka dobrych praktyk, o których warto pamiętać podczas korzystania z container queries:

Częste pułapki i jak ich unikać

Container Queries kontra Media Queries: Wybór odpowiedniego narzędzia

Chociaż container queries oferują znaczne korzyści, media queries wciąż mają swoje miejsce w responsywnym projektowaniu. Oto porównanie, które pomoże Ci zdecydować, które narzędzie jest najlepsze w różnych sytuacjach:

Cecha Container Queries Media Queries
Cel Rozmiar kontenera Rozmiar widoku
Responsywność Oparta na komponencie Oparta na stronie
Elastyczność Wysoka Średnia
Powielanie kodu Niższe Wyższe
Przypadki użycia Komponenty wielokrotnego użytku, złożone układy Globalne dostosowania układu, podstawowa responsywność

Ogólnie rzecz biorąc, używaj container queries, gdy musisz dostosować styl komponentu w oparciu o rozmiar jego kontenera, a media queries, gdy musisz dokonać globalnych zmian układu w oparciu o rozmiar widoku. Często najlepszym podejściem jest połączenie obu technik.

Przyszłość responsywnego projektowania z Container Queries

Container queries stanowią znaczący krok naprzód w responsywnym projektowaniu, oferując większą elastyczność i kontrolę nad tym, jak elementy dostosowują się do różnych kontekstów. W miarę jak wsparcie przeglądarek będzie się poprawiać, container queries prawdopodobnie staną się coraz ważniejszym narzędziem dla twórców stron internetowych. Umożliwiają one projektantom i programistom tworzenie prawdziwie adaptacyjnych i przyjaznych dla użytkownika stron internetowych, które zapewniają płynne doświadczenie na wszystkich urządzeniach i rozmiarach ekranu.

Podsumowanie

CSS Container Queries to potężne uzupełnienie zestawu narzędzi do responsywnego projektowania. Pozwalając elementom reagować na rozmiar ich elementu nadrzędnego, umożliwiają prawdziwą responsywność opartą na komponentach i otwierają nowe poziomy elastyczności i precyzji w projektowaniu stron internetowych. Rozumiejąc, jak skutecznie implementować i używać container queries, możesz tworzyć bardziej adaptacyjne, łatwiejsze w utrzymaniu i przyjazne dla użytkownika strony internetowe, które zapewniają lepsze doświadczenie dla wszystkich.

Zasoby