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 Elementy w Narzędziach deweloperskich w Chrome.

Zapytania do kontenera CSS umożliwiają manipulowanie stylami 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ą ze tej strony demonstracyjnej.

Wyszukiwanie kontenerów i ich potomków

Każdy element zdefiniowany jako kontener zapytań ma obok siebie plakietkę container w panelu Elementy. Odznaka przełącza nakładkę z konturem na kontener i jego elementy potomne.

Aby włączyć lub wyłą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. Potomkowie mogą zapytać o wymiar w tekście (oś pozioma) i zmienić swoje style w zależności od szerokości kontenera.

Sprawdzanie zapytań dotyczących kontenera

W panelu Elementy deklaracje zapytań @container są wyświetlane, gdy są stosowane do elementu potomnego, 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 akapit (p) pojawia się na stronie jako blok – zaczyna się na nowej linii i zajmuje całą szerokość.
• Powyżej 600px: potomkowie przyjmują układ poziomej siatki z tytułem (h1) u góry i obrazem (img) po lewej stronie.

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 możesz zobaczyć 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 nad deklaracją @container i kliknij ją.

Gdy najedziesz kursorem na nazwę, zamieni się ona w link do elementu w panelu Elementy, a w panelu Style wyświetli się zapytana właściwość i jej bieżąca wartość.

Modyfikowanie zapytań dotyczących kontenera

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

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

1. Wybierz element p. W panelu Style. Możesz zobaczyć deklarację @container (inline-size > 400px).
2. Zmień typ dopasowania słowa kluczowego „inline-size” z „400px” na „520px”.
3. Element akapitu (p) znika ze strony, ponieważ nie spełnia kryteriów zapytania.