Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction element()

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 fonction element() peut être utilisée avec :

  • background-image : Image d'arrière-plan.
  • border-image : Résumé des propriétés des bordures réalisées avec des images.
  • mask-image : Image ou le fichier SVG qui sera utilisé comme masque

Syntaxe 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.

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.

id="demo0a"
id="demo0b"
id="demo0c"
Ajouter un préfixe :
background:
Aucun fond
#demo0a
#demo0b
#demo0c
#syntaxe
#description
#tdm-lettres
background:
Aucun fond
#demo0a
#demo0b
#demo0c
#description
#tdm-lettres
background:
Aucun fond
#demo0a
#demo0b
#demo0c
#description
#tdm-lettres

Compatibilité et prise en charge par les navigateurs.

A l'heure actuelle (2020) cette fonction est expérimentale et n'est traitée que par Firefox, encore avec le préfixe -moz-.

Afficher les versions antérieures   Afficher la version à venir