element

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 Image Values and Replaced Content 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

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support simple 4.0 (2.0) [*] -moz Pas de support Pas de support Pas de support Pas de support
Fonctionnalité Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support simple 4.0 (2.0) [*] -moz Pas de support Pas de support Pas de support Pas de support

[*] Utilisation limitée aux propriétés background et background-image.

Voir aussi

Étiquettes et contributeurs liés au document

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