Przedstawiamy interfejs API pozycjonowania zakotwiczenia CSS

Una Kravets

Interfejs CSS Anchor Positioning API to rewolucja w projektowaniu stron internetowych, ponieważ umożliwia natywne umieszczanie elementów względem innych elementów, tak zwanych kotwicami. Upraszcza on złożone wymagania dotyczące układu wielu funkcji interfejsu, takich jak menu i podmenu, etykietki, zaznaczanie, etykiety, karty, okna ustawień i wiele innych. Wbudowane w przeglądarkę pozycjonowanie zakotwiczenia pozwala tworzyć warstwowe interfejsy użytkownika bez konieczności korzystania z bibliotek zewnętrznych. Otwiera to świat pełen kreatywnych możliwości.

Pozycjonowanie zakotwiczonych jest dostępne od Chrome 125.

Obsługa przeglądarek

  • 125
  • 125
  • x
  • x

Źródło

Podstawowe pojęcia: zakotwiczone elementy i umieszczone elementy

Podstawą tego interfejsu API jest relacja między kotwicami a pozycjonowanymi elementami. Kotwica to element wskazany jako punkt odniesienia za pomocą właściwości anchor-name. Element pozycjonowany to element umieszczony względem kotwicy za pomocą właściwości position-anchor lub wyraźnie za pomocą funkcji anchor-name w logice pozycjonowania.

Elementy zakotwiczone i umieszczone elementy.

Konfigurowanie kotwic

Tworzenie kotwicy jest bardzo łatwe. Zastosuj właściwość kotwicy do wybranego elementu i przypisz mu unikalny identyfikator. Należy go poprzedzić podwójnym łącznikiem, podobnie jak w przypadku zmiennej CSS.

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

Po przypisaniu nazwy kotwicy .anchor-button pełni rolę kotwicy i kieruje rozmieszczeniem innych elementów. Możesz połączyć tę kotwicę z innymi elementami na 2 sposoby:

Reklamy zakotwiczone niejawne

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

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

Dzięki niej można umieszczać elementy za pomocą funkcji anchor() bez jawnego określania nazwy kotwicy w pierwszym argumencie.

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

Kotwice jednoznaczne

Możesz też użyć nazwy kotwicy bezpośrednio w funkcji kotwicy (np. top: anchor(--anchor-el bottom). Jest to tzw. jawna kotwica i przydaje się, gdy chcesz zakotwiczać wiele elementów (poniżej znajdziesz przykład).

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

Umieszczanie elementów względem kotwic

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

Pozycjonowanie zakotwiczenia opiera się na pozycjonowaniu bezwzględnym CSS. Aby korzystać z wartości pozycjonowania, musisz do elementu umieszczonego w pozycjonowaniu dodać atrybut position: absolute. Następnie za pomocą funkcji anchor() zastosuj wartości pozycjonowania. Aby np. umieścić zakotwiczony element w lewym górnym rogu, zastosuj takie położenie:

.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);
}
Schemat położenia krawędzi na umieszczonym elemencie.

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

Prezentacja podstawowej kotwicy.

Zrzut ekranu przedstawiający prezentację.

Aby użyć rozmieszczenia logicznego dla tych wartości, ich odpowiedniki są następujące:

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

Wyśrodkuj umieszczony element za pomocą funkcji anchor-center

Aby ułatwić wyśrodkowanie elementu umieszczonego w kotwicy względem jego kotwicy, 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 zmienia się poprzedni, używając elementu justify-self: anchor-center do wyśrodkowania umieszczonego elementu na kotwicze.

.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 zakotwiczenia wyśrodkowanego za pomocą funkcji justify-center.

Zrzut ekranu przedstawiający prezentację.

Wiele kotwic

Elementy mogą być powiązane z więcej niż 1 kotwicą. Oznacza to, że może być konieczne ustawienie wartości pozycji względem więcej niż jednej kotwicy. 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 umieszczonego elementu jest zakotwiczony w prawym dolnym rogu jednej kotwicy, a prawy dolny róg umieszczonego elementu jest zakotwiczony 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 z wieloma kotwicami.

Zrzut ekranu przedstawiający prezentację.

Pozycja z inset-area

Oprócz domyślnego pozycjonowania kierunkowego z pozycjonowania bezwzględnego w interfejsie API kotwicy znajduje się nowy mechanizm układu o nazwie „wbudowany obszar”.

Wbudowany obszar ułatwia umieszczanie elementów zakotwiczonych względem ich odpowiednich zakotwiczenia. Funkcja działa na 9-komórkowej siatce z elementem zakotwiczonym pośrodku.

Różne możliwe opcje umieszczania w siatce 9-komórkowej

Aby zamiast pozycjonowania bezwzględnego użyć obszaru wbudowanego, 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
  • Na środku 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 stronie: inset-area: right lub inset-area: inline-end
Prezentacja z wieloma kotwicami.

Zrzut ekranu przedstawiający prezentację.

Aby dokładniej zbadać te pozycje, użyj tego narzędzia:

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

Zmienianie rozmiaru elementów za pomocą funkcji anchor-size()

Funkcja anchor-size(), także część interfejsu API pozycjonowania, może służyć do określania rozmiaru lub pozycji elementu zakotwiczonego na podstawie rozmiaru jego kotwicy (szerokość, wysokość lub rozmiar elementu wbudowanego i bloku).

Poniższy kod CSS pokazuje przykład użycia tej funkcji do określenia wysokości przy użyciu elementu anchor-size(height) w funkcji calc() w celu ustawienia maksymalnej wysokości etykietki na 2 razy większą wysokość 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);
}
Prezentacja: anchor-size

Zrzut ekranu przedstawiający prezentację.

Używaj kotwicy z elementami górnej warstwy, takimi jak wyskakujące okienko i okno dialogowe

Pozycjonowanie zakotwiczenia działa niezwykle dobrze w przypadku elementów górnej warstwy, np. popover. i <dialog>. Takie elementy są umieszczone w oddzielnej warstwie od reszty poddrzewa DOM, jednak pozycja zakotwiczenia umożliwia powiązanie ich z powrotem i przewijanie wraz z elementami spoza warstwy górnej. W przypadku warstwowych interfejsów to wielka zaleta.

W przykładzie poniżej zestaw wyskakujących okienek z podpowiedziami jest otwierany po kliknięciu przycisku. Przycisk jest kotwicą, a etykietka – umieszczonym elementem. Stylizowanego elementu możesz zmienić tak samo jak w przypadku każdego innego zakotwiczonego elementu. W tym przykładzie anchor-name i position-anchor to style wbudowane na przycisku i etykietce. Każda kotwica wymaga unikalnej nazwy, dlatego najprostszym sposobem jest wbudowanie, aby wygenerować zawartość dynamiczną.

Prezentacja z użyciem kotwicy z popover

Zrzut ekranu przedstawiający prezentację.

Dostosuj pozycje zakotwiczenia za pomocą funkcji @position-try

Po ustaleniu początkowego położenia zakotwiczenia możesz je dostosować, jeśli dotrze do krawędzi zawierających bryłę. Aby utworzyć alternatywne pozycje zakotwiczenia, możesz użyć dyrektywy @position-try razem z właściwością position-try-options.

W poniższym przykładzie menu podrzędne jest wyświetlane po prawej stronie menu. Menu i menu podrzędne doskonale wykorzystują interfejs API pozycjonowania kotwicy w połączeniu z atrybutem popover, ponieważ są one zwykle zakotwiczone z przyciskiem reguły.

Jeśli nie masz wystarczającej ilości miejsca w poziomie dla tego podmenu, możesz przenieść je pod menu. W tym celu najpierw skonfiguruj 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 pozycje zakotwiczone 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 z usługą position-try-options. W sumie 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 z użyciem kotwicy z popover

Automatyczne odwracanie słów kluczowych w pozycji zakotwiczonej

Jeśli wykonujesz podstawowe korekty, np. przeskakujesz z góry na dół lub z lewej do prawej, możesz nawet pominąć etap tworzenia niestandardowych deklaracji @position-try i skorzystać z wbudowanych słów kluczowych obsługiwanych w przeglądarce, takich jak flip-block i flip-inline. Działają one jako symbole zastępcze dla niestandardowych deklaracji @position-try i mogą być używane w połączeniu:

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

Słowa kluczowe Flip mogą znacznie uprościć kod kotwicy. Za pomocą kilku wierszy możesz utworzyć w pełni funkcjonalną reklamę zakotwiczoną z alternatywnymi pozycjami:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}
Używanie automatycznego odwracania w position-try-options: flip-block

position-visibility w przypadku reklam zakotwiczonych w podscrollach

W niektórych przypadkach warto zakotwiczyć element w elemencie podscrollowym strony. W takich przypadkach możesz kontrolować widoczność reklamy zakotwiczonej za pomocą elementu position-visibility. Kiedy reklama zakotwiczona pozostaje widoczna? Kiedy zniknie? Dzięki tej funkcji masz kontrolę nad tymi opcjami. Stosujesz właściwość position-visibility: anchors-visible, gdy chcesz, aby umieszczony element pozostawał widoczny, dopóki reklama zakotwiczona nie zniknie z widoku:

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

Możesz też użyć parametru position-visibility: no-overflow, aby zapobiec przejęciu kontenera przez reklamę zakotwiczoną.

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

Wykrywanie cech i polyfilling

Ponieważ obsługa przeglądarek jest obecnie ograniczona, zalecamy używanie tego interfejsu API z zachowaniem środków ostrożności. Najpierw możesz sprawdzić, czy pomoc jest dostępna bezpośrednio w CSS, korzystając z zapytania dotyczącego funkcji @supports. W tym celu spakuj style kotwicy w ten sposób:

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

  /* Anchor styles here */

}

Możesz też wypełnić funkcję pozycjonowania zakotwiczenia za pomocą kodu polyfill pozycjonowania kotwicy 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, chociaż bieżąca implementacja nie jest jeszcze ukończona i zawiera nieaktualne informacje w 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

Chociaż interfejs API pozycjonowania kotwicy umożliwia pozycjonowanie elementu względem innych, nie tworzy między nimi żadnych istotnych relacji semantycznych. Jeśli w rzeczywistości istnieje relacja semantyczna między elementem zakotwiczonym a elementem umieszczonym (np. element umieszczony na pasku bocznym to komentarz na temat tekstu kotwicy), można to zrobić za pomocą funkcji aria-details, która wskazuje od elementu kotwicy do tych elementów. Oprogramowanie czytnika ekranu nadal uczy się radzić sobie ze szczegółami ARIA, ale ich obsługa 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 zakotwiczenia z atrybutem popover lub elementem <dialog>, przeglądarka zajmie się poprawkami nawigacji fokusa, aby zapewnić odpowiednią dostępność, więc nie musisz uporządkować wyskakujących okienek ani okien dialogowych w kolejności DOM. Więcej informacji znajdziesz w uwagach na temat ułatwień dostępu w specyfikacji.

Podsumowanie

To zupełnie nowa funkcja i nie możemy się doczekać, aby zobaczyć, jak ją wykorzystasz. Do tej pory zaobserwowaliśmy kilka naprawdę przydatnych przypadków użycia w społeczności, takich jak etykiety dynamiczne na wykresach, linie łączące, przypisy i wizualne powiązania. Eksperymentując z pozycjonowaniem zakotwiczenia, chętnie poznamy Twoją opinię. Jeśli znajdziesz błędy, daj nam znać.

Więcej informacji