Element() - Fonction CSS
Résumé des caractéristiques de la 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: Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Syntaxe de la fonction element().
- background-image: element(#source); id
idest 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.
Compatibilité et prise en charge par les navigateurs.
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.
element()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que element().
Les spécifications CSS éditées par le W3C sont organisées en modules. element() fait partie du module CSS - Images (CSS Images Module). Les définitions suivantes sont également décrites dans ce même module.