Zapytania dotyczące kontenera

Za pomocą zapytań multimedialnych możesz dostosowywać układy do rozmiaru widocznego obszaru lub typu używanego urządzenia. Zapytania o kontener umożliwiają wprowadzanie bardziej szczegółowych zmian w elementach na podstawie rozmiaru i stanu ich elementów nadrzędnych, czyli kontenerów.

Załóżmy, że masz formularz rejestracji do newslettera, który ma być używany w kilku kontekstach w Twojej witrynie. Na stronie rejestracji może zajmować całą szerokość, ale na stronie z innymi treściami może być umieszczony w kolumnie.

Jak widać w tym przykładzie, za pomocą zapytań o kontener możesz dostosowywać właściwości takie jak rozmiar czcionki, dopełnienie i układ elementu na podstawie atrybutów najbliższego kontenera, niezależnie od rozmiaru widocznego obszaru.

Konfigurowanie zapytania o kontener

W przeciwieństwie do zapytań o multimedia zapytania o kontenery są tworzone w 2 częściach:

1. Zdefiniuj kontener.
2. Napisz style dla elementu podrzędnego, które mają być stosowane, gdy kontener nadrzędny spełnia warunki zapytania.

Definiowanie kontenera

Kontener możesz zdefiniować za pomocą właściwości container-type.

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

Wartość container-type parametru inline-size umożliwia wysyłanie zapytań do osi wbudowanej kontenera.

Aby wysyłać zapytania dotyczące osi inline i block, użyj container-type: size.

main,
.my-component {
  container-type: size;
}

Obie wartości container-type stosują różne typy ograniczenia rozmiaru. Inline-size w elemencie uniemożliwia elementom podrzędnym wpływanie na jego rozmiar w tekście.

Element z właściwością size containment uniemożliwia elementom podrzędnym wpływanie na jego rozmiar w osi blokowej i liniowej.

W tym przykładzie widać, że ograniczenie rozmiaru może wpływać na element, do którego jest stosowane.

Ponieważ nie będzie on dopasowywany do rozmiaru elementów podrzędnych (elementu <p>), kontener zostanie zwinięty, chyba że zostanie mu nadany wyraźny rozmiar przez ustawienie jego wymiarów (czyli inline-size, block-size, aspect-ratio) lub umieszczenie go w układzie o wyraźnym rozmiarze.

Warunki zapytania kontenera

Po utworzeniu kontenera możesz dodać warunek w nawiasach, który musi być spełniony, aby zastosować style w zapytaniu o kontener. W przypadku zapytań o rozmiar kontenera, które są oparte na wymiarach elementów nadrzędnych, warunek składa się z tych elementów:

• cecha rozmiaru: width, height, inline-size, block-size, aspect-ratio lub orientation;
• operator porównania (czyli >, <, =, >=),
• i wartość długości.

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

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

Warunki cechy rozmiaru można też zapisywać za pomocą dwukropka i pojedynczej wartości do przetestowania.

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

Możesz też łączyć wiele warunków, używając słów kluczowych takich jak and i or lub łącząc ze sobą wiele warunków za pomocą operatorów.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

Nadawanie nazw kontenerom

Aby kierować reklamy na konkretne kontenery, nawet jeśli nie są najbliższymi elementami nadrzędnymi, możesz nadawać im nazwy za pomocą właściwości container-name. Następnie przed zdefiniowaniem warunków możesz odwołać się do nazwy kontenera, o który chcesz wysłać zapytanie.

.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

Nazwany kontener musi nadal być elementem nadrzędnym elementów, do których stosowane są style.

Używanie skrótu z właściwością container

Właściwość container umożliwia używanie skróconej składni do definiowania kontenera i określania jego typu.

.sidebar {
  container: main-sidebar / inline-size;
}

Nazwa kontenera znajduje się przed ukośnikiem, a typ kontenera – po nim.

Jednostki zapytań o kontener

W kontenerach masz też dostęp do względnych jednostek długości. Zapewnia to większą elastyczność w przypadku komponentów, które mogą znajdować się w różnych kontenerach, ponieważ długości względne dostosowują się do wymiarów kontenera.

W tym przypadku do określenia dopełnienia przycisku używana jest jednostka długości kontenera cqi (1% rozmiaru wbudowanego kontenera zapytania).

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

Do obu przycisków zastosowano te same jednostki względne, ale ponieważ jednostki są względne w stosunku do rozmiaru kontenera, drugi przycisk ma większe dopełnienie ze względu na większy kontener.

Zagnieżdżanie zapytań o kontenery

Zapytania o kontener można zagnieżdżać w selektorach.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

Możesz też zagnieżdżać je w innych zapytaniach o kontener lub regułach @.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

Sprawdź swoją wiedzę