Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La fonction element() définit une valeur <image> générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour.

Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML <canvas> et on l'utilise comme arrière-plan.

Pour les navigateurs basés sur Gecko, on peut utiliser la méthode document.mozSetImageElement() pour modifier l'élément utilisé comme arrière-plan pour un background CSS donné.

Syntaxe

element( id )

Paramètres

id
L'identifiant (correspondant à l'attribut id) de l'élément HTML visé.

Exemples

Un premier exemple réaliste

CSS

.exemple {
  width: 400px;
  height: 400px;
  background: -moz-element(#monArrierePlan) no-repeat;

}

.paragraphe {
  transform-origin: 0 0;
  transform: rotate(45deg);
  color: white;
}

#monArrierePlan{
  width: 1024px;
  height: 1024px;
  background-image: linear-gradient(to right, red, orange, yellow, white);
} 
.cache {
  overflow: hidden;
  height: 0;
}

HTML

<div class="exemple">
  <p>
    Cet élément utilise l'élément
    #monArrierePlan comme image 
    de fond !
  </p>
</div>

<div class="cache">
  <div id="monArrierePlan">
    <p class="paragraphe">
      Et voici un texte inscrit sur
      l'arrière-plan.
    </p>
  <div>
<div>

Résultat

Pour les navigateurs qui prennent en charge element, on peut ici voir un arrière-plan généré avec un paragraphe HTML.

Un second exemple plus méchant

CSS

.exemple {
  width: 400px;
  height: 100px;
  background: -moz-element(#monArrierePlan);
}

.cache {
  overflow: hidden;
  height: 0;
} 

HTML

<div class="exemple"></div>

<div class="cache">
  <button id="monArrierePlan" type="button">
    Méchant bouton
  </button>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Images Module Level 4
La définition de 'Using Elements as Images: the element() notation' dans cette spécification.
Version de travail Reporté pour CSS4

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Aucun support NonEdge ? Firefox Support complet 4
Préfixée Notes
Support complet 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes element() is limited to background-image and background.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile ? Firefox Android Support complet 4
Préfixée Notes
Support complet 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes element() is limited to background-image and background.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,