Marketing treści

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:

Przykład duszka CSS

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.

css sprite jasny ciemny

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.

Douglas Karr

Douglas Karr jest dyrektorem ds. marketingu OtwórzWglądy i założycielem Martech Zone. Douglas pomógł dziesiątkom odnoszących sukcesy start-upów MarTech, pomagał w due diligence ponad 5 miliardów dolarów w przejęciach i inwestycjach Martech i nadal pomaga firmom we wdrażaniu i automatyzacji ich strategii sprzedaży i marketingu. Douglas to uznany na całym świecie ekspert ds. transformacji cyfrowej oraz MarTech i mówca. Douglas jest także autorem przewodnika dla manekinów i książki o przywództwie biznesowym.

Powiązane artykuły

Powrót do góry przycisk
Zamknij

Wykryto Adblock

Martech Zone jest w stanie udostępnić Ci te treści bez żadnych kosztów, ponieważ zarabiamy na naszej witrynie poprzez przychody z reklam, linki partnerskie i sponsoring. Będziemy wdzięczni za usunięcie blokady reklam podczas przeglądania naszej witryny.