Badanie i debugowanie zapytań kontenera CSS

Sofia Emelianova

Jecelyn Yeen

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

Zapytania dotyczące kontenera CSS pozwalają zmieniać style elementu na podstawie właściwości jego kontenera nadrzędnego. Ta funkcja zmienia koncepcję elastycznego projektowania witryn ze strony opartej na stronie na oparte na kontenerach.

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

Poznawanie kontenerów i ich elementów podrzędnych

Obok każdego elementu zdefiniowanego jako kontener zapytania w panelu Elements znajduje się plakietka container. Plakietka włącza kropkowaną nakładkę kontenera i jego elementów podrzędnych.

Aby przełączyć nakładkę:

1. Otwórz Narzędzia deweloperskie.
2. W panelu Elements 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 dotyczące wymiaru wbudowanego (osi poziomej) i zmieniać style na podstawie szerokości kontenera.

Sprawdzanie zapytań dotyczących kontenerów

Panel Elements pokazuje deklaracje zapytań (@container), jeśli są one zastosowane do elementu podrzędnego, czyli gdy kontener spełnia warunek zapytania.

Aby dowiedzieć się, kiedy możesz sprawdzić 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 następującą liczbę pikseli, obowiązują odpowiednie style:

• Więcej niż 400px: element akapitu (p) jest wyświetlany na stronie w postaci bloku, który zaczyna się w nowym wierszu i zajmuje całą szerokość.
• Więcej niż 600px: elementy podrzędne stosują poziomy układ siatki z tytułem (h1) u góry i obrazem (img) po lewej.

Aby sprawdzić pierwszą deklarację @container:

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

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

   

3. Ustaw szerokość na większą niż 600px, a następnie wybierz dowolne elementy, których dotyczy problem. Obserwuj deklaracje @container, które implementują układ poziomy.

   

Znajdowanie elementów kontenera

Aby znaleźć i wybrać element kontenera, który spowodował zastosowanie zapytania, najedź kursorem na nazwę elementu i kliknij nazwę elementu nad deklaracją @container.

Po najechaniu kursorem nazwa zmieni się w link do elementu w panelu Elements, a w panelu Elements pojawi się poszukiwana właściwość wraz z jej bieżącą wartością.

Modyfikowanie zapytań dotyczących kontenerów

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

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

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