Badanie i debugowanie zapytań kontenera CSS

Sofia Emelianova

GitHub

Jecelyn Yeen

Twitter GitHub Strona główna

Z tego przewodnika dowiesz się, jak badać i debugować zapytania dotyczące kontenerów CSS w panelu Elementy w Narzędziach deweloperskich w Chrome.

Zapytania kontenera CSS umożliwiają manipulowanie stylami elementu na podstawie jego właściwości kontenera nadrzędnego. Ta możliwość przekształca koncepcję elastycznego projektowania witryn ze stron na kontenery.

Zrzuty ekranu w tym przewodniku pochodzą z tej strony demonstracyjnej.

Odkryj kontenery i ich elementy potomne

Przy każdym elemencie zdefiniowanym jako kontener zapytania w panelu Elementy jest widoczna plakietka container. Plakietka przełącza nakładkę z kropkami na kontener i jego elementach podrzędnych.

Aby przełączyć nakładkę:

1. Otwórz Narzędzia deweloperskie.
2. W panelu Elementy kliknij plakietkę container obok elementu zdefiniowanego jako kontener.

W tym przykładzie właściwość container-type: inline-size definiuje element kontenera. Elementy podrzędne mogą wysyłać zapytania o wymiary wbudowane (oś poziomą) i zmieniać style w zależności od szerokości kontenera.

Sprawdzanie zapytań dotyczących kontenerów

Panel Elementy wyświetla deklaracje zapytania @container, gdy są one stosowane do elementu podrzędnego, czyli gdy kontener spełnia warunek zapytania.

Aby dowiedzieć się, kiedy możesz sprawdzać deklaracje @container na tej stronie demonstracyjnej, zapoznaj się z tym przykładowym kodem:

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

W tym przykładzie, jeśli szerokość kontenera przekracza podaną niżej liczbę pikseli, zostaną zastosowane odpowiednie style:

• Więcej niż 400px: akapit (p) jest wyświetlany na stronie jako blok – rozpoczyna się w nowym wierszu i zajmuje całą szerokość.
• Więcej niż 600px: elementy podrzędne mają układ poziomy siatki z tytułem (h1) u góry i obrazem (img) po lewej.

Aby sprawdzić pierwszą deklarację @container:

1. W panelu Elementy ustaw szerokość kontenera na 500px. Pojawi się element p.

2. Wybierz element p. W panelu Style widoczna jest deklaracja @container wraz z linkiem do kontenera nadrzędnego article.card.

   

3. Ustaw szerokość na większą niż 600px, a potem wybierz dowolny element, którego dotyczy problem. Przestrzegaj deklaracji @container, które implementują układ poziomy.

   

Znajdowanie elementów kontenera

Aby znaleźć i wybrać element kontenera, który wywołał zapytanie, najedź kursorem na nazwę elementu i kliknij ją nad deklaracją @container.

Po najechaniu kursorem nazwa zmienia się w link do elementu w panelu Elementy, a w panelu Style wyświetla się poszukiwana właściwość i jej aktualna wartość.

Modyfikowanie zapytań dotyczących kontenerów

Aby debugować zapytanie, możesz je zmodyfikować jako dowolną inną deklarację CSS w panelu Style zgodnie z opisem w sekcji Wyświetlanie i zmienianie kodu CSS.

W tym przykładzie szerokość kontenera wynosi 500px. Na stronie pojawi się element akapitu (p).

1. Wybierz element p. W panelu Style. Wyświetl deklarację @container (inline-size > 400px).
2. Zmień wartość w kolumnie „inline-size” z „400px” na „520px”.
3. Element akapitu (p) znika ze strony, ponieważ nie spełnia kryteriów zapytania.