Przedstawiamy interfejs API pozycjonowania zakotwiczenia CSS

Una Kravets

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 wielu funkcji interfejsu, takich jak menu, podmenu, etykietki, zaznaczenia, etykiety, karty, okna ustawień i wiele innych. Dzięki wbudowanej w przeglądarce funkcji pozycjonowania zakotwiczonych możesz tworzyć warstwy interfejsów użytkownika bez korzystania z bibliotek innych firm, co daje nieograniczone możliwości twórczej pracy.

Pozycjonowanie zakotwiczonych elementów jest dostępne w Chrome 125.

Obsługa przeglądarek

  • Chrome: 125.
  • Edge: 125.
  • Firefox: funkcja nieobsługiwana.
  • Safari: nieobsługiwane.

Źródło

Podstawowe pojęcia: kotwice i elementy pozycjonowane

Podstawą tego interfejsu API jest relacja między kotwicami a elementami umieszczonymi. Kotwica to element oznaczony jako punkt odniesienia za pomocą właściwości anchor-name. Pozycjonowany element to element umieszczony względem kotwicy za pomocą właściwości position-anchor lub jawnie za pomocą anchor-name w logice pozycjonowania.

Elementy zakotwiczone i pozycjonowane.

Konfigurowanie reklam zakotwiczonych

Tworzenie kotwicy jest proste. Zastosuj właściwość „nazwa kotwicy” do wybranego elementu i przypisz mu unikalny identyfikator. Ten unikalny identyfikator musi być poprzedzony podwójnym łącznikiem, podobnie jak zmienna 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. Kotwica można połączyć z innymi elementami na 2 sposoby:

Reklamy zakotwiczone pośrednie

Pierwszym sposobem na połączenie kotwicy z innym elementem jest zakotwiczenie niejawne, jak w poniższym przykładzie kodu. Do elementu, który chcesz połączyć z kotwicą, dodajesz właściwość position-anchor, która ma nazwę kotwicy (w tym przypadku --anchor-el) jako wartość.

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

Dzięki niejawnej relacji kotwicy możesz umieszczać elementy za pomocą funkcji anchor() bez konieczności jednoznacznego określania nazwy kotwicy w pierwszym argumencie.

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

Bezpośrednie reklamy zakotwiczone

Możesz też użyć nazwy kotwicy bezpośrednio w funkcji kotwicy (np. top: anchor(--anchor-el bottom). Jest to tzw. zakotwiczona reklama wprost i przydaje się, gdy chcesz zakotwiczyć kilka elementów (zapoznaj się z przykładem).

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

Określanie położenia elementów względem reklam zakotwiczonych

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

Pozycjonowanie zakotwiczone opiera się na bezwzględnym pozycjonowaniu CSS Aby użyć wartości pozycjonowania, musisz dodać do umieszczonego elementu 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 zakotwiczonego, użyj takiego położenia:

.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 przedstawiający pozycjonowanie krawędzi w umieszczonym elemencie.

Teraz jeden element jest zakotwiczony do innego, na przykład:

.
Prezentacja podstawowej kotwicy.

Zrzut ekranu przedstawiający wersję demonstracyjną.

Aby użyć pozycjonowania logicznego dla tych wartości, mają one następujące odpowiedniki:

  • 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 zakotwiczonego względem jego zakotwiczenia, wprowadziliśmy nową wartość o nazwie anchor-center, której można używać z właściwościami justify-self, align-self, justify-items i align-items.

W tym przykładzie modyfikujesz poprzedni, używając parametru justify-self: anchor-center, aby wyśrodkować umieszczony 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;
}
.
Prezentacja reklamy zakotwiczonej wyśrodkowanej za pomocą funkcji justify-center.

Zrzut ekranu przedstawiający wersję demonstracyjną.

Wiele reklam zakotwiczonych

Elementy mogą być powiązane z więcej niż 1 kotwicą. Oznacza to, że konieczne może być ustawienie wartości pozycji, które są określone względem więcej niż jednej reklamy zakotwiczonej. Zrób to, używając funkcji anchor() i jawnie wskazując w pierwszym argumencie, do której kotwicy się odwołujesz. W poniższym przykładzie lewy górny róg elementu umieszczonego jest zakotwiczony w prawym dolnym rogu jednej kotwicy, a prawy dolny róg elementu umieszczonego w lewym górnym rogu drugiej kotwicy:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}
.
Prezentacja przedstawiająca kilka reklam zakotwiczonych.

Zrzut ekranu przedstawiający wersję demonstracyjną.

Pozycja z: inset-area

Oprócz domyślnego pozycjonowania kierunkowego z pozycjonowania bezwzględnego w interfejsie API kotwicy jest dostępny nowy mechanizm układu nazywany obszarem 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ć wbudowanego obszaru zamiast pozycjonowania bezwzględnego, użyj właściwości inset-area z wartościami fizycznymi lub logicznymi. Na przykład:

  • Na środku u góry: inset-area: top lub inset-area: block-start
  • Po lewej stronie: inset-area: left lub inset-area: inline-start
  • Na środku u dołu: inset-area: bottom lub inset-area: block-end
  • Na środku po prawej: inset-area: right lub inset-area: inline-end
.
.
Prezentacja przedstawiająca kilka reklam zakotwiczonych.

Zrzut ekranu przedstawiający wersję demonstracyjną.

Aby dowiedzieć się więcej o tych pozycjach, sprawdź następujące narzędzie:

Narzędzie do zakotwiczenia do umieszczania wstawionych obszarów.

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

Funkcja anchor-size(), będąca również częścią interfejsu API do pozycjonowania zakotwiczenia, może służyć do określania rozmiaru lub położenia elementu umieszczonego zakotwiczonego na podstawie rozmiaru jego reklamy zakotwiczonej (szerokość, wysokość lub rozmiar w tekście i bloku).

Poniższy kod CSS pokazuje przykład użycia tej wysokości w przypadku użycia parametru anchor-size(height) w funkcji calc(),która pozwala ustawić maksymalną wysokość etykietki dwukrotnością 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);
}
.
Wersja demonstracyjna za anchor-size

Zrzut ekranu przedstawiający wersję demonstracyjną.

Użyj reklamy zakotwiczonej z elementami górnej warstwy, takimi jak wyskakujące okienko czy okno

Pozycjonowanie zakotwiczone sprawdza się bardzo dobrze w przypadku elementów górnych, takich jak popover. i <dialog>. Chociaż te elementy są umieszczone w oddzielnej warstwie od reszty poddrzewa DOM, zakotwiczenie umożliwia ich ponowne połączenie i przewijanie razem z elementami spoza górnej warstwy. To ogromna korzyść w przypadku wielowarstwowych interfejsów.

W poniższym przykładzie zestaw wyskakujących okienek etykietek otwiera się za pomocą przycisku. Przycisk to kotwica, a etykietka to umieszczony element. Styl umieszczonego elementu możesz określić tak samo jak dowolnego innego elementu zakotwiczonego. W tym przykładzie anchor-name i position-anchor to style wbudowane na przycisku i etykietce. Każda kotwica wymaga unikalnej nazwy kotwicy, dlatego podczas generowania zawartości dynamicznej najprostszym sposobem jest dodanie tekstu w treści.

.
Prezentacja wykorzystująca kotwicę z tagiem popover

Zrzut ekranu przedstawiający wersję demonstracyjną.

Dostosuj położenie reklam zakotwiczonych za pomocą @position-try

Po ustaleniu początkowego położenia kotwicy możesz dostosować jej położenie, gdy dotrze ona do krawędzi bryły, w której znajduje się jej element. Aby utworzyć alternatywne pozycje reklam zakotwiczonych, możesz użyć dyrektywy @position-try 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 poziomie podmenu jest za mało miejsca, możesz je przenieść pod menu. W tym celu 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 zastępcze zakotwiczone pozycje za pomocą parametru @position-try:

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

Na koniec połącz je za pomocą urządzenia position-try-options. Łącznie 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;
}
.
Prezentacja wykorzystująca kotwicę z tagiem popover

Słowa kluczowe z automatycznym odwracaniem pozycji zakotwiczonej

Jeśli stosujesz podstawową korektę, np. przewijasz z góry na dół lub z lewej na prawą (albo z obu stron), możesz nawet pominąć krok tworzenia niestandardowych deklaracji @position-try i użyć wbudowanych w przeglądarkę słów kluczowych z odwracaniem, takich jak flip-block i flip-inline. Działają one jako symbole zastępcze w niestandardowych deklaracjach @position-try i można ich używać w połączeniu:

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 różnymi pozycjami:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}
.
Używanie automatycznego odwrócenia z position-try-options: flip-block

position-visibility w przypadku reklam zakotwiczonych w subscrollowych

W niektórych przypadkach możesz chcieć zakotwiczyć element w elemencie podrzędnym na stronie. W takich przypadkach widoczność reklamy zakotwiczonej możesz kontrolować za pomocą parametru position-visibility. Kiedy reklama zakotwiczona pozostaje widoczna? Kiedy znika? Dzięki tej funkcji możesz kontrolować te opcje. Z funkcji position-visibility: anchors-visible należy korzystać, gdy umieszczony element ma być widoczny, dopóki reklama zakotwiczona nie będzie już widoczna:

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

Możesz też użyć dyrektywy position-visibility: no-overflow, aby zapobiec wyjściu reklamy zakotwiczonej z kontenera.

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

Wykrywanie cech i wypełnianie polyfill

Obsługa przeglądarek jest obecnie ograniczona, dlatego zalecamy korzystanie z tego interfejsu API z pewnymi środkami ostrożności. Po pierwsze możesz sprawdzić dostępność funkcji bezpośrednio w CSS, korzystając z zapytania dotyczącego funkcji @supports. Aby to zrobić, opakuj style zakotwiczenia w taki sposób:

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

  /* Anchor styles here */

}

Polyfill możesz też uzupełniać funkcją pozycjonowania kotwicy za pomocą kodu Polyfill do pozycjonowania zakotwiczenia CSS firmy Oddbird, który działa w przeglądarkach Firefox 54, Chrome 51, Edge 79 i Safari 10. Ten kod polyfill obsługuje większość podstawowych funkcji pozycji zakotwiczenia, ale bieżąca implementacja nie została ukończona i zawiera przestarzałą składnię. Możesz użyć linku unpkg lub zaimportować go bezpośrednio w menedżerze pakietów.

Uwaga na temat ułatwień dostępu

Interfejs API do pozycjonowania kotwicy umożliwia pozycjonowanie elementu względem innych, ale z założenia nie tworzy między nimi żadnych istotnych 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 używasz pozycjonowania zakotwiczonych z atrybutem popover lub elementem <dialog>, przeglądarka uwzględni korekty nawigacji, aby zapewnić odpowiednie ułatwienia dostępu, więc nie musisz układać okien i wyskakujących okienek w kolejności DOM. Przeczytaj więcej o ułatwieniach dostępu w specyfikacji.

Podsumowanie

To zupełnie nowa funkcja. Jesteśmy ciekawi, co z niej stworzysz. Do tej pory widzieliśmy kilka bardzo przydatnych przypadków użycia od społeczności, takich jak etykiety dynamiczne na wykresach, linie łączące, przypisy i wizualne wskazywanie powiązań. Gdy eksperymentujesz z pozycjonowaniem zakotwiczonych, chętnie poznamy Twoją opinię. Jeśli natrafisz na jakieś błędy, daj nam znać.

Więcej informacji