CSS stale się rozwija i potrafi nierzadko zaskoczyć jak bardzo może zastąpić w wybranych miejscach JavaScript. Oprzyjmy się na pewnym przypadku.
Tworzysz sklep, dbasz o dostępność cyfrową serwisu i chcesz, żeby treści miały sensowną, logiczną kolejność.
Wszystko jest w porządku, do momentu otrzymania zadania z poleceniem przesunięcia badge, informującego o kolorze produktu, na dół zdjęcia.
Obecny komponent:
Kod karty produktu:
<div class="product-card">
<img src="./hoodie.jpg" alt="black basic hoodie">
<div class="content">
<p class="title">Hoodie Basic</p>
<p class="description">Comfortable sweatshirt without print, with a large, deep pocket and ribbed cuffs.</p>
<span class="badge">Black</span>
<div class="price">
<div>
<p class="price-label">Price</p>
<p class="price-value">$79.99</p>
</div>
<button class="button">Add to cart</button>
</div>
</div>
</div>
Typowe wdrożenie CSSów to prawdopodobnie:
.product-card {
position: relative;
& .badge {
position: absolute;
top: 16px;
right: 16px;
}
}
Zmiana właściwości top na bottom jedynie przesunie badge na dół komponentu, który ma pozycje relatywną. Nie spełniając oczekiwań designera :).
Nie chcemy zmieniać HTMLu i przenosić badge bliżej zdjęcia, opakowując całość w komponent div. Takim rozwiązaniem zaburzylibyśmy kolejność odczytu informacji i wpłynęlibyśmy na komfort poprawnego zrozumienia treści produktu. W takiej sytuacji problem rozwiąże właściwość anchor, który bez zmiany w strukturze DOM umieści badge na odpowiednim miejscu.
Style komponentu zadeklarowane z użyciem anchor:
.product-card {
position: relative;
anchor-scope: --product-card;
img {
anchor-name: --product-card;
}
& .badge {
position: absolute;
bottom: calc(anchor(bottom) + 16px);
right: calc(anchor(right) + 16px);
position-anchor: --product-card;
}
Obecny widok komponentu:
- anchor-scope - ogranicza zasięg kotwicy do wskazanego elementu drzewa DOM, bez niego anchor o tej samej nazwie mógłby znaleźć się w innym elemencie (wyrenderowanym jako ostatni widoczny)
- anchor-name - nadaje nazwę kotwicy, tworząc punkt odniesienia
- position-anchor - dostarcza informacje, względem czego ma być wypozycjonowany
Pozycjonowanie z użyciem anchor sprawdzi się doskonale przy tooltipach, popoverach, elementach dekoracyjnych lub krótkich tekstach informacyjnych.
Poruszyłem jedynie bardzo prosty przykład użycia. Po głębsze kompendium użycia tej klasy odsyłam do kilku źródeł, które znacznie rozwijają temat.
Powrót do artykułów