Interfejs API do pozycjonowania kotwicy w kodzie CSS

Interfejs CSS Anchor Positioning API umożliwia rozmieszczanie elementów względem innych elementów, nazywanych 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 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.

Podstawowe pojęcia: kotwice i elementy pozycjonowane

Podstawą tego interfejsu API jest relacja między kotwicami a elementami umieszczonymi. Kotwica to element wyznaczony jako punkt odniesienia za pomocą właściwości anchor-name. Element z ustawioną pozycją to element umieszczony względem kotwicy za pomocą właściwości position-anchor lub za pomocą właściwości anchor-name w ramach logiki pozycjonowania.

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. 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 niejawnemu stosunkowi do kotwicy możesz umieszczać elementy za pomocą funkcji anchor() bez jawnego podawania 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). Nazywa się to wyraźną kotwicą i może być przydatne, 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ń

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

Teraz masz jeden element zakotwiczony do drugiego:

.

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

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

.

Wiele kotwic

Elementy mogą być przywiązane do więcej niż jednego punktu kotwiczenia. 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 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 z: position-area

Interfejs API kotwicy zawiera nowy mechanizm układu korzystający 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:

• Góra pośrodku: position-area: top lub position-area: block-start
• Po lewej stronie pośrodku: position-area: left lub position-area: inline-start
• Na środku u dołu: position-area: bottom lub position-area: block-end
• Prawo-srodek: position-area: right lub position-area: inline-end

.

.

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

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 w elementach najwyższej warstwy, takich 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ą 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 zaleta interfejsów warstwowych.

W poniższym przykładzie zestaw wyskakujących okienek etykietek jest otwierany za pomocą przycisku. Przycisk jest kotwicą, a opis jest elementem. 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żdy kotwnik 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ą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-fallbacks.

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 przypadku tego menu nie ma wystarczająco dużo miejsca na poziomo, 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);
  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 je za pomocą urządzenia position-try-fallbacks. Łącznie 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;
}

.

Słowa kluczowe z automatycznym odwracaniem pozycji zakotwiczonej

Jeśli chcesz wprowadzić podstawową zmianę, np. odwrócenie obrazu od góry do dołu lub od lewej do prawej (lub w obu kierunkach), możesz pominąć krok tworzenia niestandardowych deklaracji @position-try i użyć wbudowanych obsługiwanych przez przeglądarkę słów kluczowych do odwracania obrazu, takich jak flip-block i flip-inline. Te deklaracje zastępują deklaracje niestandardowe @position-try i można ich używać w połączeniu z innymi:

position-try-fallbacks: 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 alternatywnymi pozycjami, wystarczy kilka wierszy:

#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 elemencie podrzędnym strony. 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. 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);
}

.

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

.

Wykrywanie funkcji i polyfilling

Obecnie obsługa przeglądarek jest ograniczona, dlatego zalecamy zachowanie ostrożności podczas korzystania z tego interfejsu API. Po pierwsze możesz sprawdzić dostępność funkcji bezpośrednio w CSS, korzystając z zapytania dotyczącego funkcji @supports. Aby to zrobić, musisz opakować 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 położenia kotwicy, ale bieżąca implementacja nie została ukończona 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 zajmie się korektami nawigacji fokusa w celu zapewnienia odpowiedniej dostępności, więc nie musisz umieszczać wyskakujących okienek ani dialogów w kolejności DOM. Przeczytaj więcej o ułatwieniach dostępu w specyfikacji.

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 zakotwiczenia