Pseudo-éléments optimisés pour la résolution

L'utilisation d'images optimisées pour la résolution dans les pseudo-éléments CSS (comme ::before ou ::after) vous permet d'ajouter des icônes décoratives ou des graphiques structurels sans encombrer votre code HTML avec des nœuds DOM supplémentaires. En combinant des pseudo-éléments avec la fonction CSS image-set(), vous pouvez fournir au navigateur plusieurs formats (comme AVIF ou WebP) et résolutions (comme 1x et 2x). Le navigateur choisira automatiquement l'image la plus adaptée aux capacités de l'appareil de l'utilisateur.

Implémentation

Vous pouvez utiliser la fonction image-set() directement dans la propriété content d'un pseudo-élément ou dans sa propriété background-image (tout en définissant content: ""). Notez que même si vous obtenez de meilleurs résultats en fournissant à la fois le format d'image via type() et la résolution (comme 1x ou 2x), ces deux arguments sont facultatifs.

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

Stratégies de remplacement

Pour les anciens navigateurs qui ne sont pas compatibles avec la fonction image-set(), vous DEVEZ fournir une déclaration d'image standard avant la règle image-set(). Cette stratégie d'amélioration progressive repose sur la nature en cascade du CSS : les règles non compatibles sont ignorées.

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