Element() - Fonction CSS

Description de la fonction element().

La fonction element() est expérimentale. Elle n'est reconnue que par peu de navigateurs, et souvent avec le préfixe constructeur (-moz- pour Firefox par exemple).

La fonction element() récupère l'aspect visuel d'un élément de la page et le retourne sous forme d'une image. Celle-ci pourra être utilisée par toutes les propriétés qui acceptent une image : background-image par exemple.

L'image créée par element() est dynamique, c'est à dire qu'elle reflète en temps réel les modifications apportées à l'élément d'origine. Elle a les mêmes dimensions que l'élément d'origine (marges exclues, mais bordures et marges intérieures incluses). Bien entendu l'image peut être redimensionnée avec des propriétés comme background-size.

Il n'est possible de récupérer que l'image des éléments qui sont affichés. La fonction element() renvoi une image vide si elle est utilisée sur un élément invisible, par exemple un élément dont la propriété display est fixée à none.

Remarque : il n'est pas possible d'appliquer à un élément sa propre image ni celle d'un de ses parents. Cela parait assez logique car le paradoxe qui en résulterait serait l'équivalent d'une boucle sans fin dans un langage algorithmique.

La valeur element() 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.
• mask-image : Désigne l'image ou le fichier SVG qui sera utilisé comme masque.

Syntaxes de la fonction element().

• background-image: element(#source); id

  id est l'identifiant de l'élément dont on souhaite utiliser l'image. Notez la présence du caractère #.

Simulateur avec la fonction element()

Le simulateur ci-dessous applique en image de fond, l'image d'un autre élément existant sur la page, comme par exemple l'un des éléments ci-dessous. Le deuxième exemple est animé et montre bien que element() génère une image dynamique. Le troisième comporte une zone de saisie et montre également que l'image est dynamique.

Le simulateur permet également, à titre d'exemple, de récupérer l'image d'autres éléments de cette page.

Support de la fonction element().

La fonction element() est expérimentale et, à l'heure actuelle (2024), n'est traitée que par Firefox, et encore avec le préfixe -moz-. Il va falloir patienter encore pour l'utiliser en production.

1

Fonction
element()

Estimation de la prise en charge globale.

3%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

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

Caniuse

Historique de la fonction element().

• Module CSS - Images et contenu remplacé

  Introduction de la fonction element() 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 element() est décrite dans la spécification CSS Images Module qui regroupe tout ce qui concerne le type image. Les fonctions et propriétés ci-dessous font également partie de ce module.

Propriétés :

Fonctions :