Jak używać duszków CSS w trybie jasnym i ciemnym
CSS sprite'y to technika stosowana w tworzeniu stron internetowych w celu zmniejszenia ich liczby HTTP żądania wysyłane przez stronę internetową. Polegają one na połączeniu wielu małych obrazów w jeden większy plik obrazu, a następnie użyciu CSS do wyświetlenia określonych sekcji tego obrazu jako pojedynczych elementów na stronie internetowej.
Podstawową zaletą korzystania z sprite'ów CSS jest to, że mogą one pomóc skrócić czas ładowania strony internetowej. Za każdym razem, gdy obraz jest ładowany na stronie internetowej, wymaga osobnego żądania HTTP, co może spowolnić proces ładowania. Łącząc wiele obrazów w jeden obraz sprite, możemy zmniejszyć liczbę żądań HTTP potrzebnych do załadowania strony. Może to skutkować szybszą i bardziej responsywną stroną internetową, szczególnie w przypadku witryn z wieloma małymi obrazkami, takimi jak ikony i przyciski.
Korzystanie ze sprite'ów CSS pozwala nam również skorzystać z buforowania przeglądarki. Gdy użytkownik odwiedza witrynę internetową, jego przeglądarka zapisze obraz sprite'a w pamięci podręcznej po pierwszym żądaniu. Oznacza to, że kolejne zapytania o poszczególne elementy na stronie korzystające z obrazu sprite będą znacznie szybsze, ponieważ przeglądarka będzie już miała ten obraz w swojej pamięci podręcznej.
Sprite'y CSS nie są już tak popularne jak kiedyś
Sprite'y CSS są nadal powszechnie używane do poprawy szybkości witryny, chociaż mogą nie być tak popularne jak kiedyś. Ze względu na dużą przepustowość, webp formaty, kompresja obrazu, sieci dostarczania treści (CDN), powolne ładowanie, silne buforowanie technologii, nie widzimy tak wielu sprite'ów CSS, jak kiedyś w sieci… chociaż nadal jest to świetna strategia. Jest to szczególnie przydatne, jeśli masz stronę, która odwołuje się do wielu małych obrazów.
Przykład duszka CSS
Aby użyć duszków CSS, musimy zdefiniować pozycję każdego pojedynczego obrazu w pliku obrazu sprite za pomocą CSS. Zwykle odbywa się to poprzez ustawienie background-image
i background-position
właściwości dla każdego elementu na stronie internetowej, który używa obrazu sprite. Określając współrzędne x i y obrazu w duszku, możemy wyświetlać poszczególne obrazy jako osobne elementy na stronie. Oto przykład… mamy dwa przyciski w jednym pliku obrazu:
Jeśli chcemy, aby obraz po lewej stronie był wyświetlany, możemy podać element div arrow-left
jako klasa, więc współrzędne wyświetlają tylko tę stronę:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
A jeśli chcemy wyświetlić strzałkę w prawo, ustawilibyśmy klasę dla naszego elementu div na arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
Sprite'y CSS dla trybu jasnego i ciemnego
Jednym z interesujących zastosowań tego jest tryb jasny i ciemny. Być może masz logo lub obraz z ciemnym tekstem, który nie jest widoczny na ciemnym tle. Zrobiłem ten przykład przycisku, który ma biały środek dla trybu jasnego i ciemny środek dla trybu ciemnego.
Korzystając z CSS, mogę wyświetlić odpowiednie tło obrazu w zależności od tego, czy użytkownik korzysta z trybu jasnego, czy ciemnego:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
Wyjątek: klienci poczty e-mail mogą tego nie obsługiwać
Niektóre klienty poczty e-mail, takie jak Gmail, nie obsługują zmiennych CSS, które w podanym przeze mnie przykładzie są używane do przełączania między trybem jasnym i ciemnym. Oznacza to, że być może będziesz musiał użyć alternatywnych technik, aby przełączać się między różnymi wersjami obrazu duszka dla różnych schematów kolorów.
Innym ograniczeniem jest to, że niektórzy klienci poczty e-mail nie obsługują pewnych właściwości CSS, które są powszechnie używane w duszkach CSS, takich jak background-position
. Może to utrudniać umieszczanie poszczególnych obrazów w pliku obrazu sprite.