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: zmieniła nazwę właściwości inset-area na position-area, a właściwości 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 wielu funkcji interfejsu, takich jak menu, podmenu, etykietki, zaznaczenia, 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.

Obsługa przeglądarek

• 125
• 125
• x
• x

Źródło

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 oznaczony 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.

Elementy kotwicy i elementy umieszczone.

Konfigurowanie reklam zakotwiczonych

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 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 zakotwiczenie niejawne, jak w poniższym 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 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);
}

Kotwicy jawne

Możesz też użyć nazwy kotwicy bezpośrednio w funkcji kotwicy (np. top: anchor(--anchor-el bottom). Nazywamy to jawną kotwicą i przydaje się, gdy chcesz zakotwiczyć wiele elementów (zapoznaj się z przykładem).

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

Diagram krawędzi pozycjonowania na elemencie

Teraz masz jeden element zakotwiczony do drugiego, jak pokazano na tym 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

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ć 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. 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 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 kotwicy jest dostępny nowy mechanizm układu nazywany obszarem 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, pokazane 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
• Na środku po lewej: 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.

Rozmiar elementów z atrybutem 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 opcji w przypadku wysokości. Przy użyciu parametru anchor-size(height) w funkcji calc() ustaw maksymalną wysokość etykietki na 2 razy większą od 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 z elementami najwyższej warstwy, takimi jak wyskakujące okienka i okna dialogowe

Pozycjonowanie zakotwiczone sprawdza się bardzo dobrze w przypadku elementów górnych, 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 korzyść w przypadku wielowarstwowych interfejsów.

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.

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ą funkcji inset: auto. W przyszłości ten styl może się zmienić i być domyślnym stylem klienta użytkownika.

Dostosuj pozycje reklam zakotwiczonych 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 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. Menu i podmenu to świetne zastosowanie interfejsu Anchor pozitoning API wraz z atrybutem popover, ponieważ te menu są zwykle zakotwiczone do przycisku aktywatora.

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;
}

Uwaga: możesz obecnie animować position-try-options, jeśli stosujesz style z wykorzystaniem wartości pozycji, które można przenieść za pomocą właściwości transition, jak w prezentacji. Subskrypcji inset-area nie można jeszcze przenieść, ale zespół Chrome pracuje nad rozwiązaniem.

Słowa kluczowe z automatycznym odwracaniem pozycji zakotwiczonej

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. 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;

Odwrócone słowa kluczowe mogą 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 reklama zakotwiczona 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ć, musisz opakować style zakotwiczenia w taki sposób:

@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 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 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. Jesteśmy ciekawi, co z 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 za pomocą kotwic