Przedstawiamy interfejs API pozycjonowania zakotwiczenia CSS

Data publikacji: 10 maja 2024 r.

Interfejs CSS Anchor Positioning API jest przełomowy w tworzeniu stron internetowych, ponieważ umożliwia natywne pozycjonowanie elementów względem innych elementów. Jest to tzw. kotwice. 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 kotwic jest dostępne od wersji Chrome 125.

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 umieszczony to element umieszczony względem punktu zakotwiczenia za pomocą właściwości position-anchor lub za pomocą właściwości anchor-name w logice pozycjonowania.

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 pełni rolę kotwicy, która wskazuje położenie innych elementów. Możesz połączyć tę kotwicę z innymi elementami na 2 sposoby:

Reklamy zakotwiczone 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 zakotwiczenia możesz umieszczać elementy za pomocą funkcji anchor() bez jawnego podawania nazwy zakotwiczenia 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). Nazywamy to wyraźną kotwicą i może się to przydać, 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ń

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 pozycjonowania. 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);
}

Teraz jeden element jest zakotwiczony do innego, tak jak na ilustracji poniżej.

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

Wyśrodkuj umieszczony element za pomocą 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 konieczne może być ustawienie wartości pozycji, które są określone względem więcej niż jednej reklamy zakotwiczonej. Użyj do tego funkcji anchor() i jawnie określ, do której kotwicy się odwołujesz, w pierwszym argumencie. W tym przykładzie lewy górny róg elementu jest zakotwiczony w prawym dolnym rogu pierwszego 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 wcięcia ułatwia umieszczanie zakotwiczonych elementów względem odpowiednich kotwic. Działa w siatce 9-komórkowej z elementem zakotwiczonym pośrodku.

Różne opcje pozycjonowania wstawionego obszaru pokazane na siatce 9-komórkowej

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
• Pośrodku po prawej stronie: inset-area: right lub inset-area: inline-end.

Dopasuj rozmiar elementów za pomocą atrybutu anchor-size()

Funkcja anchor-size(), która również należy do interfejsu API pozycjonowania kotwic, może służyć do określania rozmiaru lub położenia elementu z kotwicą na podstawie rozmiaru jego kotwicy (szerokość, wysokość lub rozmiary wbudowane 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żyj reklamy zakotwiczonej z elementami górnej warstwy, takimi jak wyskakujące okienko czy okno

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 interfejsów warstwowych.

W tym przykładzie przycisk uruchamia zestaw wyskakujących etykiet. Przycisk jest kotwicą, a opis jest elementem 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.

Dostosowywanie pozycji kotwic 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 poniższym przykładzie po prawej stronie menu pojawia się menu podrzędne. Interfejs API do pozycjonowania zakotwiczenia wraz z atrybutem wyskakującego okienka doskonale sprawdza się w przypadku menu i podmenu, ponieważ są one zwykle zakotwiczone na przycisku reguły.

Jeśli w przypadku tego menu nie ma wystarczająco dużo miejsca na poziomo, 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;
}

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 ich używać w połączeniu z innymi:

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

Odwracanie słów kluczowych może znacznie uprościć kod kotwicy. Aby utworzyć w pełni funkcjonalną reklamę zakotwiczoną z alternatywnymi pozycjami, wystarczy kilka wierszy:

#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 ramach podscrollera na stronie. W takich przypadkach możesz kontrolować widoczność kotwicy za pomocą atrybutu 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 w usłudze porównywania cen jest dostępna pomoc, używając 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 jej obecna implementacja jest niekompletna i zawiera przestarzałą składnię. Możesz użyć linku unpkg lub zaimportować plik bezpośrednio w menedżerze pakietów.

Uwaga 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 istnieje relacja semantyczna między elementem kotwicy a elementem umieszczonym (na przykład umieszczonym elementem jest komentarz na pasku bocznym dotyczącym tekstu kotwicy), jednym ze sposobów jest użycie elementu aria-details w celu wskazywania elementów zakotwiczonych na wskazane elementy. Oprogramowanie czytnika ekranu wciąż uczy się, jak radzić sobie ze szczegółami ARIA, ale jakość pomocy jest coraz lepsza.

<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 będzie korygować poprawki nawigacji fokusu 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 o ułatwieniach dostępu znajdziesz w specyfikacji.

Podsumowanie

To zupełnie nowa funkcja i z niecierpliwością czekamy na to, co dzięki niej stworzysz. 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 łączącej elementy za pomocą pozycjonowania zakotwiczonego CSS
• Future CSS: pozycjonowanie kotwicy – Roman Komarov
• Kolekcja Una's Codepen z demo Anchor
• Narzędzie do pozycjonowania zakotwiczenia