Voor resolutie geoptimaliseerde pseudoelementen

Als je voor resolutie geoptimaliseerde afbeeldingen gebruikt in CSS-pseudoelementen (zoals ::before of ::after), kun je decoratieve iconen of structurele afbeeldingen toevoegen zonder je HTML te overladen met extra DOM-nodes. Door pseudo-elementen te combineren met de CSS-functie image-set(), kun je de browser meerdere indelingen (zoals AVIF of WebP) en resoluties (zoals 1x en 2x) bieden. De browser kiest automatisch de meest optimale afbeelding voor de mogelijkheden van het apparaat van de gebruiker.

Implementatie

Je kunt de functie image-set() rechtstreeks gebruiken in de property content van een pseudo-element of in de property background-image (terwijl je content: "" instelt). Als je zowel de bestandsindeling via type() als de resolutie (zoals 1x of 2x) invoert, levert dit de beste resultaten op, maar beide argumenten zijn optioneel.

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

Reservestrategieën

Voor oudere browsers die de functie image-set() niet ondersteunen, MOET u een standaardafbeeldingsdeclaratie vóór de regel image-set() opgeven. Deze progressive enhancement-strategie is gebaseerd op de trapsgewijze aard van CSS: niet-ondersteunde regels worden genegeerd.

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