Env() - Fonction CSS
Résumé des caractéristiques de la fonction env()
Description de la fonction env().
La fonction env() permet de récupérer la valeur d'une variable d'environnement. Celles-ci sont définies au niveau du
navigateur et sont donc communes à tous les éléments et toutes les pages.
Ne confondez pas les variables d'environnement avec les propriétés personnalisées, qui sont définies par le développeur et dont la
portée est ajustable (la page, un élément, etc.). La valeur d'une propriété personnalisée est récupérable avec la fonction var().
Utilisation de la fonction env().
La fonction env() peut être utilisée avec toutes les propriétés, et plus généralement partout
où une valeur CSS est attendue.
Syntaxe de la fonction env().
- propriété: env(safe-area-inset-top, 100px); propriété: env(safe-area-inset-right, 100px); propriété: env(safe-area-inset-bottom, 100px); propriété: env(safe-area-inset-left, 100px);
Ces quatre variables d'environnement sont définies par le navigateur en fonction de la forme de l'affichage. Elles définissent le rectangle le plus grand possible qui soit cependant entièrement visible. Dans le cas d'un affichage de forme carrée, cela correspond à des marges sur deux des côtés.
La deuxième valeur (
100pxdans nos exemples) est la valeur par défaut qui sera utilisée si la variable d'environnement indiquée n'existe pas. Pour être plus précis, tout ce qui suit la première virgule est considérée comme la valeur par défaut. Voici quelques exemples de syntaxes, avec la valeur par défaut correspondante :margin:env(safe-are-inset-top, 10px 0);La valeur par défaut est10px 0
propriété:env(safe-are-inset-top, 10px,50px);La valeur par défaut est10px,50px
- propriété: env(titlebar-area-x, 10px); propriété: env(titlebar-area-y, 10px); propriété: env(titlebar-area-width, 500px); propriété: env(titlebar-area-height, 40px);
Ces quatre valeurs fournissent des informations sur les dimensions et l'emplacement de la barre de titre.
- propriété: env(viewport-segment-top, 500px); propriété: env(viewport-segment-right, 40px); propriété: env(viewport-segment-bottom, 500px); propriété: env(viewport-segment-left, 40px); propriété: env(viewport-segment-width, 10px); propriété: env(viewport-segment-height, 10px);
Ces valeurs sont intéressantes lorsque le viewport est divisé en plusieurs parties, comme on peut le faire sur un téléphone portable.
Simulateur.
Le simulateur permet d'observer plusieurs cas de figure :
- Toutes les options s'affichent en rouge : la fonction
env()n'est pas reconnue par votre navigateur. - Le choix d'une option fait apparaître une petite marge (50 pixels) sur la gauche de l'élément de test. Cela signifie que la valeur par défaut a été utilisée et que donc, cette variable d'environnement n'existe pas.
- Le choix d'une option annule la marge gauche ou fixe une marge différente de 50 pixels : la variable d'environnement a été reconnue et sa valeur est utilisée pour définir la marge gauche de l'élément de test.
Compatibilité et prise en charge par les navigateurs.
La fonction env() en elle-même est bien prise en charge, mais les variables d'environnement disponibles sont très dépendantes
du navigateur utilisé.
env().
safe-area-inset-top, safe-area-inset-right,
safe-area-inset-bottom et safe-area-inset-right.
titlebar-area-x et titlebar-area-y.
titlebar-area-width et titlebar-area-height.
env()sécurisée
barre de titre
la barre de titre
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que env().
Les spécifications CSS éditées par le W3C sont organisées en modules. env() fait partie du (). Les définitions suivantes sont également décrites dans ce même module.
Sélecteurs :
type="color".