move *.html to *.md

1 files changed, 148 insertions, 0 deletions

diff --git a/files/fr/web/css/env()/index.md b/files/fr/web/css/env()/index.md
new file mode 100644
index 0000000000..d155dcdd77
--- /dev/null
+++ b/files/fr/web/css/env()/index.md
@@ -0,0 +1,148 @@
+---
+title: env()
+slug: Web/CSS/env()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Variables
+  - Fonction
+  - Reference
+  - env()
+translation_of: Web/CSS/env()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>env()</code></strong> peut être utilisée afin d'insérer la valeur d'une variable d'environnement dans une règle. Les variables d'environnement sont globales pour un document donné, à la différence des <a href="/fr/docs/Web/CSS/--*">propriétés personnalisées</a>. Les variables d'environnement sont définies au niveau de l'agent utilisateur et non par l'utilisateur/le concepteur.</p>
+
+<p><code>env()</code> peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction <code><a href="/fr/docs/Web/CSS/var()">var()</a></code>.</p>
+
+<pre class="brush: css">body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}</pre>
+
+<p>La fonction <code>env()</code> peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une <a href="/fr/docs/Web/CSS/@media">requête média</a>) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (<em>viewport</em>) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Utilisation des quatre zones sûres */
+env(safe-area-inset-top)
+env(safe-area-inset-right)
+env(safe-area-inset-bottom)
+env(safe-area-inset-left)
+
+/* Utilisation du deuxième paramètre pour une valeur de recours */
+env(safe-area-inset-top, 20px);
+env(safe-area-inset-right, 1em);
+env(safe-area-inset-bottom, 0.5vh);
+env(safe-area-inset-left, 1.4rem);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>safe-area-inset-top</code>, <code>safe-area-inset-right</code>, <code>safe-area-inset-bottom</code>, <code>safe-area-inset-left</code></dt>
+ <dd>Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (<em>viewport</em>) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+{{csssyntax}}
+
+<h2 id="Examples">Examples</h2>
+
+<p>Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonctionnelle <code>env()</code> afin de fournir une valeur de recours lorsque la variable d'environnement n'est pas disponible.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Si la fonction &lt;code&gt;env()&lt;/code&gt; est prise en charge dans votre
+  navigateur, le texte de ce paragraphe aura 50 pixels de padding avec
+  la bordure gauche mais pas la droite / basse et haute.
+  En effet, le code CSS associé est équivalent à &lt;code&gt;padding: 0 0 0 50px&lt;/code&gt;
+  car les noms des propriétés CSS associées aux agents utilisateurs sont
+  sensibles à la casse (contrairement aux autres propriétés).
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 300px;
+  border: 2px solid red;
+  padding:
+    env(safe-area-inset-top, 50px)
+    env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px)
+    env(SAFE-AREA-INSET-LEFT, 50px);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h3 id="Exemples_de_valeurs">Exemples de valeurs</h3>
+
+<pre class="brush: css">/* zéro pour les agents utilisateurs rectangulaires */
+padding: env(safe-area-inset-bottom, 50px);
+
+/* 50px car les propriétés de l'agent sont sensibles à la casse */
+padding: env(Safe-area-inset-bottom, 50px);
+
+/* correspond à padding: 50px 20px car x n'est pas une variable
+   d'environnement valide */
+padding: env(x, 50px 20px);
+
+/* ignorée car '50px, 20px' n'est pas une valeur de padding correcte
+   et que x n'est pas une variable d'environnement */
+padding: env(x, 50px, 20px);
+</pre>
+
+<p>Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}</td>
+   <td>{{Spec2("CSS3 Environment Variables")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("css.properties.custom-property.env")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("var", "var(…)")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Variables">Les propriétés personnalisées et la cascade</a></li>
+ <li><a href="/fr/docs/Web/CSS/--*">Les propriétés personnalisées (--*)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Les_variables_CSS">Utiliser les propriétés CSS personnalisées</a></li>
+ <li>{{CSSxRef("@viewport/viewport-fit", "viewport-fit (@viewport)")}}</li>
+</ul>