Interfejs API do pozycjonowania kotwicy w kodzie CSS

Una Kravets

Interfejs API do pozycjonowania za pomocą kotwic CSS umożliwia pozycjonowanie elementów względem innych elementów, zwanych kotwicami. 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 kreatywnego działania.

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

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:

Zakotwiczenia 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, na przykład:

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

Umieszczenie elementu w centrum za pomocą atrybutu 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 może być konieczne ustawienie wartości pozycji względem więcej niż jednego punktu zaczepienia. Aby to zrobić, użyj funkcji anchor() i w pierwszym argumencie wyraźnie określ, 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);
}

Pozycja w position-area

Interfejs API do tworzenia punktów zakotwiczenia zawiera nowy mechanizm układu, który korzysta z właściwości position-area.

Ta właściwość pozwala umieszczać elementy zakotwiczone względem odpowiednich kotwic. Działa w siatce 9-komórkowej z elementem zakotwiczonym pośrodku.

Aby użyć position-area zamiast pozycjonowania bezwzględnego, użyj właściwości position-area z wartościami fizycznymi lub logicznymi. Na przykład:

• Na środku u góry: position-area: top lub position-area: block-start
• Na środku po lewej: position-area: left lub position-area: inline-start
• Na środku u dołu: position-area: bottom lub position-area: block-end
• Pośrodku po prawej stronie: position-area: right lub position-area: inline-end.

Aby dowiedzieć się więcej o tych pozycjach, skorzystaj z tego narzędzia:

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

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żywanie kotwicy z elementami najwyższej warstwy, takimi jak wyskakujące okienka i okna dialogowe

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

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

W tym 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);
  position-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);
  posotion-area: bottom;
}

Na koniec połącz te 2 urządzenia za pomocą position-try-fallbacks. W całości wygląda to tak:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  position-area: right span-bottom;
  */ connect with position-try-fallbacks */
  position-try-fallbacks: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  position-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. Działają one jako symbole zastępcze w niestandardowych deklaracjach @position-try i można ich używać w połączeniu:

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

Odwrócone słowa kluczowe mogą znacznie uprościć kod kotwicy. Wystarczy kilka linii kodu, aby utworzyć w pełni funkcjonalny element kotwiczący z alternatywnymi pozycjami:

#my-tooltip {
  position-anchor: --question-mark;
  position-area: top;
  position-try-fallbacks: 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

Obsługa przeglądarek jest obecnie ograniczona, dlatego zalecamy korzystanie z tego interfejsu API z pewnymi środkami ostrożności. 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.

Uwagi 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 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 używasz pozycjonowania zakotwiczonych z atrybutem popover lub elementem <dialog>, przeglądarka uwzględni korekty nawigacji, aby zapewnić odpowiednie ułatwienia dostępu, dzięki czemu nie musisz układać okien i wyskakujących okienek w kolejności DOM. Więcej informacji o ułatwieniach dostępu znajdziesz w specyfikacji.

Więcej informacji

• Rysowanie linii łączącej elementy za pomocą pozycjonowania zakotwiczonego CSS
• Przyszła usługa porównywania cen: pozycjonowanie zakotwiczone przez Romana Komarowa
• Kolekcja Una's Codepen z demo Anchor
• Narzędzie do pozycjonowania za pomocą kotwic