Wykrywanie pozycji rezerwowych za pomocą zapytań o zakotwiczony kontener w Chrome 143

Una Kravets

Data publikacji: 29 października 2025 r.

Od wersji Chrome 143 możesz używać zapytań o zakotwiczony kontener, aby określić, kiedy zakotwiczony element używa awaryjnego pozycjonowania zakotwiczenia. Z tego posta dowiesz się, jaki problem rozwiązuje ta funkcja.

Interfejs CSS Anchor Positioning API to zaawansowane narzędzie do przywiązywania elementu (np. wyskakującego okienka) do innego elementu (kotwicy) i definiowania zestawu alternatywnych pozycji, które są używane, gdy element nie ma wystarczająco dużo miejsca. Jeśli na przykład element zakotwiczony jest początkowo stylizowany tak, aby znajdował się u góry, ale podczas przewijania dotrze do krawędzi ekranu, przeglądarka może go „przerzucić”, aby utrzymać go w widocznym obszarze.

Poziom 1 specyfikacji pozycjonowania elementu zakotwiczonego pozostawił jednak znaczną lukę: chociaż CSS mógł przesunąć element do pozycji rezerwowej, nie miał możliwości sprawdzenia, która z nich została wybrana. Oznaczało to, że nie można było zastosować różnych stylów w zależności od ostatecznej pozycji. Jeśli etykietka zmieniła położenie z dolnego na górne, strzałka nadal będzie wskazywać w złą stronę, chyba że naprawisz to za pomocą kodu JavaScript.

Zapytania o zakotwiczony kontener (zdefiniowane w specyfikacji CSS Anchor Position Level 2) rozwiązują ten problem, zapewniając pozycjonowaniu zakotwiczenia CSS kontekstową świadomość, której brakowało.

Jak to działa: wysyłanie zapytań do zastępczych wyświetlanych ścieżek

Zapytania o kontenery zakotwiczone umożliwiają stosowanie stylów na podstawie sposobu, w jaki przeglądarka rozwiązała pozycjonowanie elementu zakotwiczonego.

Można to skonfigurować za pomocą 2 nowych funkcji CSS:

  • container-type: anchored: Zastosuj to do elementu z określonym położeniem (np. etykietki). W ten sposób przekształcisz go w kontener zapytania, który „wie” o stanie pozycjonowania elementu zakotwiczonego.
  • @container anchored(fallback: ...): ta nowa składnia reguły @ pozwala sprawdzać, która opcja właściwości position-try-fallbacks została ostatecznie użyta.

Załóżmy, że chcesz umieścić etykietkę u dołu, ale w razie potrzeby ma ona być wyświetlana u góry. Ten kod:

  • Początkowo próbuje umieścić .tooltip u dołu kotwicy (--my-anchor).
  • Jeśli się nie mieści, element zastępczy przenosi go na górę.
  • Zapytanie @container wykrywa tę sytuację. Gdy zostanie zastosowana najwyższa wartość rezerwowa, zapytanie anchored(fallback: top) przyjmie wartość true.
  • Dzięki temu możesz zmienić zawartość pseudoelementu ::before ze strzałki w górę (▲) na strzałkę w dół (▼) i dostosować jej położenie.
/* The element our tooltip is anchored to */
.anchor {
  anchor-name: --my-anchor;
}

/* The positioned element (tooltip) */
.tooltip {
  /* Use anchor positioning to set fallbacks */
  position: absolute;
  margin-top: 1rem;
  position-anchor: --my-anchor;
  position-area: bottom;
  position-try-fallbacks: flip-block; /* Reposition in the block direction */
  
  /* Make it an anchored query container */
  container-type: anchored;

  /* Add a default "up" arrow */
  &::before {
    content: '▲';
    position: absolute;
    bottom: 100%; /* Sits on top of the tooltip, pointing up */
  }
}

/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
  .tooltip::before {
    /* The 'top' fallback was used, so flip the arrow */
    content: '▼';
    bottom: auto;
    top: 100%; /* Move the arrow below the tooltip */
  }
}

Wszystko to odbywa się w całości w CSS – bez JavaScriptu, obserwatorów ani dodatkowych klas. Uwaga: jeśli używasz interfejsu API wyskakującego okienka, nie musisz jawnie nazywać elementów zakotwiczenia, ponieważ tworzona jest niejawna relacja zakotwiczenia.

Obejrzyj poniższe demo, w którym za pomocą triku z obramowaniem tworzymy trójkąt CSS, a następnie zmieniamy jego położenie za pomocą zapytań zakotwiczonych:

Podsumowanie

Zapytania zakotwiczone zapewniają przeglądarce CSS natywną świadomość bieżącej pozycji kotwicy elementu umieszczonego. Oznacza to, że możesz tworzyć znacznie bardziej odporne i uwzględniające kontekst komponenty. Strzałka w dymku to tylko jeden z przykładów. Możesz też:

  • Zmień kolor tła menu, gdy jest odwrócone.
  • Przesuń styl obramowania na krawędź najbliższą punktu zakotwiczenia.
  • Dostosuj promień obramowania wyskakującego okienka, aby „dołączony” róg był kwadratowy.
  • Animuj element w różny sposób w zależności od tego, do której pozycji rezerwowej jest on przyciągany.

To ogromna zaleta w przypadku pozycjonowania elementów zakotwiczonych i bibliotek komponentów w ogóle, ponieważ umożliwia tworzenie bardziej niezawodnych i samodzielnych elementów interfejsu z mniejszą ilością kodu.

Zasoby