From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/element()/index.md | 150 +++++++++++++++++------------------- 1 file changed, 70 insertions(+), 80 deletions(-) (limited to 'files/fr/web/css/element()') diff --git a/files/fr/web/css/element()/index.md b/files/fr/web/css/element()/index.md index a0f0f92cc2..0c7ad0851e 100644 --- a/files/fr/web/css/element()/index.md +++ b/files/fr/web/css/element()/index.md @@ -7,32 +7,31 @@ tags: - Reference translation_of: Web/CSS/element() --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}{{SeeCompatTable}} -

La fonction element() définit une valeur {{cssxref("<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.

+La fonction **`element()`** définit une valeur {{cssxref("<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 {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan.

+Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan. -

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

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

Syntaxe

+## Syntaxe -
element(id)
+ element(id) -

Paramètres

+### Paramètres -
-
id
-
L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé.
-
+- **`id`** + - : L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé. -

Exemples

+## Exemples -

Un premier exemple réaliste

+### Un premier exemple réaliste -

CSS

+#### CSS -
.exemple {
+```css
+.exemple {
   width: 400px;
   height: 400px;
   background: -moz-element(#monArrierePlan) no-repeat;
@@ -54,38 +53,41 @@ translation_of: Web/CSS/element()
   overflow: hidden;
   height: 0;
 }
-
+``` -

HTML

+#### HTML -
<div class="exemple">
-  <p>
+```html
+

+  

     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

+#### 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.

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

{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}}

+{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}} -

Un second exemple plus méchant

+### Un second exemple plus méchant -

CSS

+#### CSS -
.exemple {
+```css
+.exemple {
   width: 400px;
   height: 100px;
   background: -moz-element(#monArrierePlan);
@@ -94,54 +96,42 @@ translation_of: Web/CSS/element()
 .cache {
   overflow: hidden;
   height: 0;
-}
+} +``` -

HTML

+#### HTML -
<div class="exemple"></div>
+```html
+

 
-<div class="cache">
-  <button id="monArrierePlan" type="button">
+

+
- -

Résultat

- -

{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Reporté pour CSS4
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.image.element")}}

- -

Voir aussi

- -
    -
  • {{domxref("document.mozSetImageElement()")}}
    • -
  • {{cssxref("_image", "image()")}}
    • -
  • {{cssxref("image-set", "image-set()")}}
    • -
  • {{cssxref("<image>")}}
    • -
  • {{cssxref("<gradient>")}}
    • -
  • {{cssxref("element()")}}
    • -
  • {{cssxref("cross-fade")}}
    • -
  • {{domxref("document.mozSetImageElement()")}}
    • -
+ +
+``` + +#### Résultat + +{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------- | +| {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}} | {{Spec2('CSS4 Images')}} | Reporté pour CSS4 | + +## Compatibilité des navigateurs + +{{Compat("css.types.image.element")}} + +## Voir aussi + +- {{domxref("document.mozSetImageElement()")}} +- {{cssxref("_image", "image()")}} +- {{cssxref("image-set", "image-set()")}} +- {{cssxref("<image>")}} +- {{cssxref("<gradient>")}} +- {{cssxref("element()")}} +- {{cssxref("cross-fade")}} +- {{domxref("document.mozSetImageElement()")}} -- cgit v1.2.3-54-g00ecf