Pseudo-elementi ottimizzati per la risoluzione

L'utilizzo di immagini ottimizzate per la risoluzione negli pseudo-elementi CSS (come ::before o ::after) ti consente di aggiungere icone decorative o elementi grafici strutturali senza ingombrare il codice HTML con nodi DOM aggiuntivi. Combinando gli pseudo-elementi con la funzione CSS image-set(), puoi fornire al browser più formati (come AVIF o WebP) e risoluzioni (come 1x e 2x). Il browser sceglierà automaticamente l'immagine più adatta alle funzionalità del dispositivo dell'utente.

Implementazione

Puoi utilizzare la funzione image-set() direttamente all'interno della proprietà content di uno pseudo-elemento o all'interno della relativa proprietà background-image (impostando content: ""). Tieni presente che, sebbene l'utilizzo del formato dell'immagine tramite type() e della risoluzione (come 1x o 2x) produca i risultati migliori, entrambi questi argomenti sono facoltativi.

.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 di riserva

Per i browser meno recenti che non supportano la funzione image-set(), DEVI fornire una dichiarazione dell'immagine standard prima della regola image-set(). Questa strategia di potenziamento progressivo si basa sulla natura a cascata del CSS: le regole non supportate vengono ignorate.

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