La función env() se utiliza para insertar el valor de una variable de entorno definida por el agente de usuario en su CSS. Es casi lo mismo que var() en CSS, excepto que estos valores están definidos por el agente de usuario en lugar de por el usuario. Estas variables tienen un alcance global.
Sintaxis:
env( <custom-ident> , <declaration-value> )
Nota: tenga en cuenta que los valores de la propiedad env() distinguen entre mayúsculas y minúsculas.
Valores de propiedad:
- SAFE-AREA-INSET-TOP: Define la parte superior del rectángulo desde el borde de la ventana gráfica.
Sintaxis:
env(SAFE-AREA-INSET-TOP,Integer_value)
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
p {
background-color: green;
width: fit-content;
color: white;
font-size: 20px;
border: env(SAFE-AREA-INSET-TOP,
5px) solid black;
padding: 10px;
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)
}
</style>
</head>
<body>
<h2>50px padding from top</h2>
<p>Geeks for geeks</p>
</body>
</html>
Producción:
- SAFE-AREA-INSET-RIGHT: Define la derecha del rectángulo desde el borde de la ventana gráfica.
Sintaxis:
env(SAFE-AREA-INSET-RIGHT,Integer_value);
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
p {
background-color: green;
width: fit-content;
color: white;
font-size: 20px;
border:
env(SAFE-AREA-INSET-TOP, 5px) solid black;
padding: 10px;
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)
}
</style>
</head>
<body>
<h2>50px padding from right</h2>
<p>Geeks for geeks</p>
</body>
</html>
Producción:
- SAFE-AREA-INSET-LEFT: Define la izquierda del rectángulo desde el borde de la ventana gráfica.
Sintaxis:
env(SAFE-AREA-INSET-LEFT,Integer_value);
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
p {
background-color: green;
width: fit-content;
color: white;
font-size: 20px;
border:
env(SAFE-AREA-INSET-TOP, 5px) solid black;
padding: 10px;
padding: env(safe-area-inset-top, 50px)
env(safe-area-inset-bottom, 50px)
env(safe-area-inset-right, 50px)
env(SAFE-AREA-INSET-LEFT, 50px)
}
</style>
</head>
<body>
<h2>50px padding from left</h2>
<p>Geeks for geeks</p>
</body>
</html>
Producción:
- SAFE-AREA-INSET-BOTTOM: Define la parte inferior del rectángulo desde el borde de la ventana gráfica.
Sintaxis:
env(SAFE-AREA-INSET-BOTTOM,Integer_value);
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
p {
background-color: green;
width: fit-content;
color: white;
font-size: 20px;
border:
env(SAFE-AREA-INSET-TOP, 5px) solid black;
padding: 10px;
padding: env(safe-area-inset-top, 50px)
env(safe-area-inset-left, 50px)
env(SAFE-AREA-INSET-BOTTOM, 50px)
env(safe-area-inset-right, 50px)
}
</style>
</head>
<body>
<h2>50px padding from bottom</h2>
<p>Geeks for geeks</p>
</body>
</html>
Producción:
Navegadores compatibles:
- cromo 69
- Borde 79
- firefox 65
- Safari 11.1
- Ópera 56