Stylizacja uwzględniająca rozmiar

Przegląd

Stylizacja uwzględniająca rozmiar umożliwia komponentom zmianę układu lub wyglądu na podstawie dostępnego miejsca, a nie rozmiaru całego ekranu. Jest to przydatne w przypadku komponentów takich jak karty czy paski nawigacyjne, które mogą być umieszczane w różnych częściach układu (np. w wąskim pasku bocznym lub szerokim obszarze głównym).

Zalecamy używanie zapytań o kontener, ponieważ dzięki nim komponenty są naprawdę modułowe. Nie musisz wiedzieć, gdzie będzie znajdować się dany komponent, ani pisać skomplikowanych zapytań o media, aby obsłużyć każdy możliwy układ.

Implementacja

1. Zdefiniuj kontener

OBOWIĄZKOWO: najpierw musisz poinformować przeglądarkę, który element jest kontenerem do pomiaru.

.card-container {
  /* Define the container type. Use 'inline-size' for width-based queries. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
}

2. Stosowanie stylów na podstawie rozmiaru kontenera

Użyj reguły @container, aby zastosować style, gdy kontener osiągnie określony rozmiar.

/* Default styles for small containers (stacked layout) */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card-image {
    width: 150px;
    height: 150px;
  }
}

3. Warunkowe wyświetlanie treści

Możesz też używać zapytań o kontener, aby ukrywać lub wyświetlać dodatkowe szczegóły, gdy jest więcej miejsca.

.card-details {
  /* Hide extra details by default in small spaces */
  display: none;
}

@container (min-width: 600px) {
  .card-details {
    /* Show details when there is plenty of room */
    display: block;
  }
}

Strategie zastępcze

W przypadku przeglądarek, które nie obsługują zapytań o kontener, najlepiej jest użyć bezpiecznego układu domyślnego (np. układu pionowego) i stopniowo go ulepszać za pomocą zapytań o media, jeśli pozwala na to ogólny rozmiar ekranu.

/* Default safe stacked layout */
.card {
  display: flex;
  flex-direction: column;
}

/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
  @media (min-width: 600px) {
    .card {
      /* Reset media query fallback if needed, or let container query handle it */
      flex-direction: column;
    }
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

Dzięki temu użytkownicy starszych przeglądarek nadal będą widzieć użyteczny układ, nawet jeśli nie będzie on idealnie dopasowany do każdej szerokości kontenera.