element

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Expérimental: 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

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

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></div>
    </div>
  </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

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

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

HTML

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

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

Résultat

Spécifications

Specification
CSS Images Module Level 4
# element-notation

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi