Image-set() - Fonction CSS

Schéma syntaxique de image-set().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

• 'url' est le chemin d'accès à une image. La fonction url() est optionnelle dans cette syntaxe.
• gradient est un dégradé de couleurs, défini par l'une des fonctions de dégradé de CSS : conic-gradient(), linear-gradient(), radial-gradient(), repeating-conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient().
• res est une résolution : une valeur numérique suivie d'une des unités de résolution.
• mime est un type mime, comme image/jpeg.

Description de la fonction image-set().

La fonction image-set() sélectionne une image parmi la liste qui lui est fournie. Ce choix se fait en fonction des possibilités de l'appareil sur lequel est visualisé la page, en particulier la résolution de son écran.
image-set() permet donc de toujours affichée l'image la plus optimisée, en réduisant le transfert d'octets inutiles pour un écran bas de gamme, tout en exploitant au mieux les écrans haut de gamme.

image-set() permet également de sélectionner une image parmi plusieurs en fonction du format : png, jpg, etc.

La valeur image-set() peut être utilisée avec les propriétés suivantes :

• background-image : Définit l'image ou dégradé d'arrière-plan (plusieurs images ou dégradés peuvent coexister).
• border-image : Résumé des propriétés des bordures réalisées avec des images.
• list-style-image : Définit une image personnalisée à utiliser à la place des puces, dans le contexte d'une énumération sous forme de liste.
• mask-image : Désigne l'image ou le fichier SVG qui sera utilisé comme masque.

Syntaxes de la fonction image-set().

• <propriété>: image-set('chemin/image-1' 1x, 'chemin/image-2' 2x, ...); url1 r1 url2 r2

  La fonction image-set() attend une série d'images, avec une indication de leur résolution optimale. Dans notre exemple :

  • url1, url2, etc. sont les chemins d'accès aux images, absolus ou relatifs. dans ce dernier cas, le chemin est évalué par rapport à l'emplacement de la feuille de styles.
  • r1, r2, etc. sont les indications de résolution optimale pour chacune des images. Cette information peut être exprimée avec plusieurs unités :
    - x = points par pixel (dppx).
    - dpi = points par pouce.
    - dpcm = points par centimètre.
    Pour plus de précisions, reportez-vous à la page sur les unités de résolution.
• <propriété>: image-set('chemin/image-1' type('image/jpeg'), ...); url1 t1

  Dans ce deuxième exemple, le choix de l'image se fera en fonction de son type mime.
  Cette syntaxe est cumulable avec la précédente, permettant de choisir l'image en fonction de son type ET de sa résolution.

Support de la fonction image-set().

Remarques :

(1) Nécessite le préfixe du navigateur -webkit-.
Les images ne peuvent être définies que par url(), et la résolution n'est traitée que sur X.

1

Ensemble
d'images

2

Fonction
image-set()

Estimation de la prise en charge globale.

90%

90%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

QQ Browser

1

Baidu Browser

1

Samsung Internet

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Firefox

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la fonction image-set().

• Module CSS - Images et contenu remplacé

  Introduction de la fonction image-set() dans le niveau 4 de la spécification.
  

  11 Septembre 2012

  Document de travail.

  

  

  

Voir aussi, concernant le traitement des images.

Les spécifications CSS éditées par le W3C sont organisées en modules. La fonction image-set() fait partie du module CSS Images Module qui regroupe tout ce qui concerne le type image.

Propriétés :

Fonctions :