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.
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.
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
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);
}
Teraz masz jeden element zakotwiczony do innego, na przykład:
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;
}
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);
}
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
lubinset-area: block-start
- Na środku po lewej stronie:
inset-area: left
lubinset-area: inline-start
- Na środku u dołu:
inset-area: bottom
lubinset-area: block-end
- Na środku po prawej stronie:
inset-area: right
lubinset-area: inline-end
Aby dokładniej zbadać te pozycje, użyj tego narzędzia:
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);
}
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ą.
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;
}
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;
}
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);
}
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);
}
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ć.