1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
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 notranslate">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="blockIndicator 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 notranslate">/* 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 id="safe-area-inset-top" style="white-space: nowrap;">safe-area-inset-top</code>, <code id="safe-area-inset-right" style="white-space: nowrap;">safe-area-inset-right</code>, <code id="safe-area-inset-bottom" style="white-space: nowrap;">safe-area-inset-bottom</code>, <code id="safe-area-inset-left" style="white-space: nowrap;">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="blockIndicator 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>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<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 notranslate"><p>
Si la fonction <code>env()</code> 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 à <code>padding: 0 0 0 50px</code>
car les noms des propriétés CSS associées aux agents utilisateurs sont
sensibles à la casse (contrairement aux autres propriétés).
</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">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 notranslate">/* 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="blockIndicator 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>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<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>
|
