Pseudoelementy zoptymalizowane pod kątem rozdzielczości

Używanie obrazów zoptymalizowanych pod kątem rozdzielczości w pseudoelementach CSS (takich jak ::before lub ::after) umożliwia dodawanie ikon dekoracyjnych lub grafik strukturalnych bez zaśmiecania kodu HTML dodatkowymi węzłami DOM. Łącząc pseudoelementy z funkcją CSS image-set(), możesz udostępniać przeglądarce wiele formatów (np. AVIF lub WebP) i rozdzielczości (np. 1x i 2x). Przeglądarka automatycznie wybierze obraz najbardziej optymalny dla możliwości urządzenia użytkownika.

Implementacja

Funkcji image-set() możesz używać bezpośrednio we właściwości content pseudoelementu lub w jego właściwości background-image (podczas ustawiania właściwości content: ""). Pamiętaj, że chociaż podanie zarówno formatu pliku graficznego za pomocą właściwości type(), jak i rozdzielczości (np. 1x lub 2x) daje najlepsze wyniki, oba te argumenty są opcjonalne.

.icon-button::before {
  /* Using image-set directly in the content property */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.webp") type("image/webp") 1x,
    url("icon-2x.webp") type("image/webp") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
  
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

Strategie zastępcze

W przypadku starszych przeglądarek, które nie obsługują funkcji image-set(), MUSISZ podać standardową deklarację obrazu przed regułą image-set(). Ta strategia progresywnego ulepszania opiera się na kaskadowym charakterze CSS: nieobsługiwane reguły są ignorowane.

.icon-button::before {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  content: url("icon.png");
  
  /* Modern browsers will apply this and override the fallback */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
}