Przedstawiamy interfejs API pozycjonowania zakotwiczenia CSS

Una Kravets

Data publikacji: 10 maja 2024 r.

Uwaga: ten wpis na blogu dotyczy składni wprowadzonej w Chrome 125. Następnie grupa robocza CSS wprowadziła 2 zmiany w tej funkcji: nazwa właściwości inset-area została zmieniona na position-area, a właściwość position-try-options – na position-try-fallbacks. Te aktualizacje zostały wprowadzone w Chrome 129. Nowa składnia jest opisana w dokumentacji dotyczącej pozycjonowania kotwic.

Interfejs API do pozycjonowania za pomocą kotwic CSS to przełom w rozwoju stron internetowych, ponieważ umożliwia domyślne pozycjonowanie elementów względem innych elementów, zwanych kotwicami. Ten interfejs API upraszcza złożone wymagania dotyczące układu w przypadku wielu funkcji interfejsu, takich jak menu i podmenu, teksty narzędziowe, pola wyboru, etykiety, karty, okna ustawień i wiele innych. Dzięki pozycjonowaniu kotwicy wbudowanemu w przeglądarkę możesz tworzyć wielowarstwowe interfejsy użytkownika bez konieczności korzystania z bibliotek innych firm, co otwiera przed Tobą mnóstwo możliwości kreatywnych.

Umieszczenie kotwicy jest dostępne od wersji 125 Chrome.

Browser Support

• 125
• 125
• x
• x

Source

Podstawowe pojęcia: elementy kotwiczące i elementy pozycjonowane

Podstawą tego interfejsu API jest relacja między ankrami a elementami umieszczonymi w pozycji. Kotwica to element wyznaczony jako punkt odniesienia za pomocą właściwości anchor-name. Element z ustawioną pozycją to element umieszczony względem kotwicy za pomocą właściwości position-anchor lub za pomocą wyrażenia anchor-name w logice pozycjonowania.

Elementy kotwicy i elementy umieszczone.

Konfigurowanie kotwic

Tworzenie kotwicy jest proste. Zastosuj właściwość anchor-name do wybranego elementu i przypisz mu unikalny identyfikator. Ten unikalny identyfikator musi być poprzedzony podwójnym łącznikiem, podobnie jak zmienna w CSS.

.anchor-button {
    anchor-name: --anchor-el;
}

Po przypisaniu nazwy kotwicy .anchor-button służy jako kotwica, która określa położenie innych elementów. Możesz połączyć tę kotwicę z innymi elementami na 2 sposoby:

Zakotwiczenia pośrednie

Pierwszym sposobem na połączenie kotwicy z innym elementem jest użycie implikowanej kotwicy, jak w tym przykładzie kodu. Właściwość position-anchor jest dodawana do elementu, który chcesz połączyć z ankrą, i ma jako wartość nazwę ankrą (w tym przypadku --anchor-el).

.positioned-notice {
    position-anchor: --anchor-el;
}

Dzięki niejawnemu stosunkowi do kotwicy możesz umieszczać elementy za pomocą funkcji anchor() bez jawnego podawania nazwy kotwicy w pierwszym argumencie.

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

Kotwicy jawne

Możesz też użyć nazwy kotwicy bezpośrednio w funkcji kotwicy (np. top: anchor(--anchor-el bottom). Nazywa się to wyraźną kotwicą i może być przydatne, jeśli chcesz zastosować kotwicę do wielu elementów (poniżej znajdziesz przykład).

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

Pozycjonowanie elementów względem zakotwiczeń

Schemat pozycjonowania kotwicy z właściwościami fizycznymi.

Umiejscowienie za pomocą kotwic opiera się na bezwzględnym pozycjonowaniu w CSS. Aby używać wartości pozycjonowania, musisz dodać elementowi z pozycjonowaniem position: absolute. Następnie użyj funkcji anchor(), aby zastosować wartości pozycji. Aby na przykład umieścić zakotwiczony element w lewym górnym rogu elementu zakotwiczenia, użyj tego ustawienia:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}

Diagram z krawędziami pozycjonowania elementu

Teraz masz jeden element zakotwiczony do drugiego, jak pokazano na poniższym obrazie.

Aby użyć w przypadku tych wartości pozycjonowania logicznego, użyj odpowiedników:

• top = inset-block-start
• left= inset-inline-start
• bottom = inset-block-end
• right= inset-inline-end

Umieszczenie elementu w centrum za pomocą atrybutu anchor-center

Aby ułatwić wyśrodkowanie elementu pozycjonowanego za pomocą kotwicy względem jego kotwicy, dostępna jest nowa wartość o nazwie anchor-center, którą można stosować z właściwościami justify-self, align-self, justify-items i align-items.

W tym przykładzie modyfikujemy poprzedni przykład, używając atrybutu justify-self: anchor-center, aby wyśrodkować element nad jego kotwicą.

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

Wiele kotwic

Elementy mogą być przywiązane do więcej niż jednego punktu kotwiczenia. Oznacza to, że może być konieczne ustawienie wartości pozycji, które są ustawione względem więcej niż jednego punktu zaczepienia. Aby to zrobić, użyj funkcji anchor() i w pierwszym argumencie wyraźnie określ, do której kotwicy się odwołujesz. W tym przykładzie lewy górny róg elementu jest zakotwiczony w prawym dolnym rogu jednego punktu zakotwiczenia, a prawy dolny róg elementu jest zakotwiczony w lewym górnym rogu drugiego punktu zakotwiczenia:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

Pozycja w inset-area

Oprócz domyślnego pozycjonowania kierunkowego z pozycjonowania bezwzględnego w interfejsie API dostępnych jest kilka nowych mechanizmów układu, np. obszar wstawienia.

Obszar wstawiony ułatwia umieszczanie elementów z pozycjonowaniem kotwicznym względem ich odpowiednich kotwic. Działa na siatce 9 komórek z elementem kotwicznym w środku.

Różne możliwe opcje pozycjonowania wstawionych obszarów na siatce 9 komórek

Aby użyć obszaru wstawki zamiast pozycjonowania bezwzględnego, użyj właściwości inset-area z wartościami fizycznymi lub logicznymi. Na przykład:

• Góra pośrodku: inset-area: top lub inset-area: block-start
• Po lewej stronie pośrodku: inset-area: left lub inset-area: inline-start
• Na środku u dołu: inset-area: bottom lub inset-area: block-end
• Prawo-środku: inset-area: right lub inset-area: inline-end

Rozmiar elementów z atrybutem anchor-size()

Funkcja anchor-size(), która również należy do interfejsu API pozycjonowania kotwic, może służyć do ustawiania rozmiaru lub położenia elementu pozycjonowanego za pomocą kotwicy na podstawie rozmiaru tej kotwicy (szerokość, wysokość lub rozmiary inline i blokowe).

Ten kod CSS pokazuje przykład użycia tej funkcji do ustawiania wysokości. Funkcja anchor-size(height) w ramach funkcji calc() służy do ustawienia maksymalnej wysokości etykiety narzędzia,która jest równa dwukrotnej wysokości kotwicy.

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}

Używanie kotwicy w elementach najwyższej warstwy, takich jak wyskakujące okienka i okna dialogowe

Umieszczenie kotwicy sprawdza się w przypadku elementów najwyższego poziomu, takich jak popover. i <dialog>. Chociaż te elementy są umieszczane na osobnej warstwie niż reszta poddrzewa DOM, pozycjonowanie za pomocą kotwic pozwala je przypiąć z powrotem i przewijać razem z elementami, które nie znajdują się na najwyższej warstwie. To ogromna zaleta dla interfejsów warstwowych.

W tym przykładzie przycisk uruchamia zestaw wyskakujących etykiet. Przycisk jest kotwicą, a wskazówka to element z pozycjonowaniem. Możesz nadać styl elementowi tak samo jak każdemu innemu elementowi z ankrą. W tym przykładzie anchor-name i position-anchor to style wbudowane w przycisku i etykiecie. Ponieważ każda kotwica musi mieć unikalną nazwę, podczas generowania treści dynamicznych najłatwiej jest to zrobić za pomocą wstawiania.

Uwaga: elementy okna dialogowego i wyskakującego okna mają styl użytkownika, który domyślnie umieszcza je na środku widoku. Może to spowodować problemy z układem. Aby uniknąć nieporozumień, zalecamy zresetowanie stylów wszystkich elementów z pozycjonowaniem za pomocą kotwicy za pomocą inset: auto. W przyszłości może się to zmienić i ustawienie domyślne będzie miało styl nazwy klienta użytkownika.

Dostosowywanie pozycji kotwicy za pomocą @position-try

Po ustaleniu początkowej pozycji punktu zakotwiczenia możesz ją dostosować, jeśli punkt dotrze do krawędzi bloku, w którym się znajduje. Aby utworzyć alternatywne pozycje kotwicy, możesz użyć dyrektywy @position-try wraz z właściwością position-try-options.

W tym przykładzie po prawej stronie menu pojawia się menu podrzędne. Menu i podmenu to świetne zastosowanie interfejsu Anchor Positioning API wraz z atrybutem popover, ponieważ te menu są zwykle zakotwiczone do przycisku aktywatora.

Jeśli w przypadku tego menu poziomo nie ma wystarczająco dużo miejsca, możesz je przenieść pod menu. Aby to zrobić, najpierw ustaw pozycję początkową:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

Następnie skonfiguruj stałe pozycje zastępcze za pomocą @position-try:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Na koniec połącz te 2 urządzenia za pomocą position-try-options. W całości wygląda to tak:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
  */ connect with position-try options */
  position-try-options: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Uwaga: obecnie możesz animować position-try-options, jeśli stosujesz style za pomocą wartości pozycji, które można przekształcać za pomocą właściwości transition, np. w tym przykładzie. inset-area nie jest jeszcze dostępne, ale zespół Chrome pracuje nad rozwiązaniem.

Automatyczne przewracanie słów kluczowych w przypadku pozycji kotwicy

Jeśli chcesz wprowadzić podstawowe zmiany, np. odwrócić obraz od góry do dołu lub od lewej do prawej (lub w obu kierunkach), możesz pominąć etap tworzenia niestandardowych deklaracji @position-try i użyć wbudowanych obsługiwanych przez przeglądarkę słów kluczowych do odwracania, takich jak flip-block i flip-inline. Te deklaracje zastępują deklaracje niestandardowe @position-try i można je łączyć:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

Odwrócone słowa kluczowe mogą znacznie uprościć kod kotwicy. Wystarczy kilka linii kodu, aby utworzyć w pełni funkcjonalny element kotwiczący z alternatywnymi pozycjami:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

position-visibility dla kotwic w podscrollach

W niektórych przypadkach warto zakotwiczyć element w podscrollu strony. W takich przypadkach możesz kontrolować widoczność kotwicy za pomocą funkcji position-visibility. Kiedy kotwica pozostaje widoczna? Kiedy zniknie? Dzięki tej funkcji możesz kontrolować te opcje. Używasz position-visibility: anchors-visible, gdy chcesz, aby element pozostawał widoczny, dopóki kotwica nie zniknie z widoku:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

Możesz też użyć position-visibility: no-overflow, aby zapobiec wylewaniu się kotwicy poza kontener.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

Wykrywanie funkcji i polyfilling

Obecnie obsługa przeglądarek jest ograniczona, dlatego zalecamy zachowanie ostrożności podczas korzystania z tego interfejsu API. Najpierw możesz sprawdzić, czy dana funkcja jest obsługiwana bezpośrednio w usłudze porównywania cen. W tym celu użyj zapytania o funkcję @supports. Aby to zrobić, użyj tych elementów:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

Dodatkowo możesz zastosować polyfill do funkcji pozycjonowania kotwicy za pomocą polyfilla do pozycjonowania kotwicy w CSS firmy Oddbird, który działa w Firefoxie 54, Chrome 51, Edge 79 i Safari 10. Ta funkcja zastępcza obsługuje większość podstawowych funkcji pozycji kotwicy, ale obecna implementacja nie jest kompletna i zawiera przestarzałą składnię. Możesz użyć linku unpkg lub zaimportować plik bezpośrednio w menedżerze pakietów.

Uwagi na temat ułatwień dostępu

Interfejs API pozycjonowania kotwicy umożliwia umieszczenie elementu w relacji do innych elementów, ale nie tworzy między nimi żadnych znaczących relacji semantycznych. Jeśli między elementem kotwicy a elementem umieszczonym w ramce rzeczywiście istnieje relacja semantyczna (np. element umieszczony w ramce jest komentarzem na pasku bocznym dotyczącym tekstu kotwicy), możesz użyć atrybutu aria-details, aby wskazać element kotwicy jako element umieszczony w ramce. Oprogramowanie czytnika ekranu nadal uczy się, jak obsługiwać atrybuty aria-details, ale jego obsługa się poprawia.

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

.anchor {
  anchor-name: --anchor;
}

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

Jeśli pozycjonowanie za pomocą kotwicy jest używane z atrybutem popover lub elementem <dialog>, przeglądarka zajmie się korektami nawigacji fokusa w celu zapewnienia odpowiedniej dostępności, więc nie musisz umieszczać wyskakujących okienek ani dialogów w kolejności DOM. Więcej informacji na temat ułatwień dostępu znajdziesz w specyfikacji.

Podsumowanie

To zupełnie nowa funkcja i nie możemy się doczekać, co z niej zrobisz. Do tej pory widzieliśmy już wśród społeczności naprawdę ciekawe przypadki użycia, takie jak dynamiczne etykiety na wykresach, linie łączące, przypisy i wizualne odniesienia. Podczas eksperymentowania z pozycjonowaniem kotwic chętnie poznamy Twoją opinię. Jeśli znajdziesz jakieś błędy, daj nam znać.

Więcej informacji

• Rysowanie linii do łączenia elementów za pomocą pozycjonowania za pomocą kotwicy w CSS
• Future CSS: pozycjonowanie kotwicy – Roman Komarov
• Kolekcja Una's Codepen z demo Anchor
• Narzędzie do pozycjonowania za pomocą kotwic