La fonction CSS env() 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 propriétés personnalisées. La fonction env() peut être utilisée afin de remplacer la valeur à différents endroits, à la façon de la fonction var().

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);
}

La fonction env() 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 @ et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées.

Note : 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 (viewport) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils.

Syntaxe

/* 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);

Valeurs

safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
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 (viewport) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage.

Note : À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse.

Syntaxe formelle

env( <custom-ident> , <declaration-value>? )

Examples

Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonctionnelle env() afin de fournir une valeur de recours lorsque la variable d'environnement n'est pas disponible.

HTML

<p>
  If the <code>env()</code> function is supported in your browser, 
  the text of this paragraph should abut the top, right, and bottom
  border, and have 50px of padding between the border and text. The 
  CSS is the equivalent of <code>padding: 0 0 0 50px</code>, because, 
  unlike other CSS properties, User Agent property names are case-
  sensitive.
</p>

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);
}

Résultat

Exemples de valeurs

/* 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);

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.

Note : Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété all.

Spécifications

Spécification État Commentaires
CSS Environment Variables Module Level 1
La définition de 'env()' dans cette spécification.
Brouillon de l'éditeur Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 69Edge ? Firefox Support complet 65IE ? Opera ? Safari Support complet 11.1
Support complet 11.1
Aucun support 11 — 11
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : constant
WebView Android ? Chrome Android Support complet 69Edge Mobile ? Firefox Android Support complet 65Opera Android ? Safari iOS Support complet 11.1
Support complet 11.1
Aucun support 11 — 11
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : constant
Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Voir aussi

Étiquettes et contributeurs liés au document

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