Auflösungsoptimierte Pseudoelemente

Webfunktionen: image-set()

Wenn Sie auflösungsoptimierte Bilder in CSS-Pseudoelementen wie ::before oder ::after verwenden, können Sie dekorative Symbole oder Strukturgrafiken hinzufügen, ohne Ihren HTML-Code mit zusätzlichen DOM-Knoten zu überladen. Wenn Sie Pseudoelemente mit der CSS-Funktion image-set() kombinieren, können Sie dem Browser mehrere Formate (z. B. AVIF oder WebP) und Auflösungen (z. B. 1x und 2x) zur Verfügung stellen. Der Browser wählt dann automatisch das optimale Bild für die Gerätefunktionen des Nutzers aus.

Implementierung

Sie können die Funktion image-set() direkt in der Eigenschaft content eines Pseudoelements oder in der Eigenschaft background-image (bei Festlegung von content: "") verwenden. Beachten Sie, dass die Angabe des Bildformats über type() und der Auflösung (z. B. 1x oder 2x) die besten Ergebnisse liefert, beide Argumente jedoch optional sind.

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

Fallback-Strategien

Für ältere Browser, die die Funktion image-set() nicht unterstützen, MÜSSEN Sie vor der Regel image-set() eine Standardbilddeklaration angeben. Diese Strategie der progressiven Verbesserung beruht auf der kaskadierenden Natur von CSS: Nicht unterstützte Regeln werden ignoriert.

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