Ejemplo de CSS env ()

los env()CSSLa función se puede usar para insertar el valor de una variable de entorno definida por el agente de usuario en su CSS, de manera similar a la var() función y propiedades personalizadas. La diferencia es que, además de estar definidas por el usuario-agente en lugar de definidas por el usuario, las variables de entorno tienen un alcance global para un documento, mientras que las propiedades personalizadas tienen un alcance para los elementos en los que se declaran.

Para decirle al navegador que use todo el espacio disponible en la pantalla, y así permitirnos usar el env() variables, necesitamos agregar un nuevo valor meta de la ventana gráfica:

<metaname="viewport"content="viewport-fit=cover"/>

bodypadding:env(safe-area-inset-top, 20px)env(safe-area-inset-right, 20px)env(safe-area-inset-bottom, 20px)env(safe-area-inset-left, 20px);

Además, a diferencia de las propiedades personalizadas, que no se pueden utilizar fuera de las declaraciones, el env() La función se puede usar en lugar de cualquier parte del valor de una propiedad, o cualquier parte de un descriptor (por ejemplo, en las reglas de consulta de medios). A medida que la especificación evoluciona, también se puede utilizar en otros lugares, como selectores.

Originalmente proporcionado por el navegador iOS para permitir a los desarrolladores colocar su contenido en un área segura de la ventana gráfica, el safe-area-inset-* Los valores definidos en la especificación se pueden utilizar para ayudar a garantizar que el contenido sea visible incluso para los espectadores que utilizan pantallas no rectangulares.

Sintaxis

/* Using the four safe area inset values with no fallback values */env(safe-area-inset-top);env(safe-area-inset-right);env(safe-area-inset-bottom);env(safe-area-inset-left);/* Using them with fallback values */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);

Valores

safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left

los safe-area-inset-* Las variables son cuatro variables de entorno que definen un rectángulo por sus inserciones superior, derecha, inferior e izquierda desde el borde de la ventana gráfica, en las que es seguro colocar contenido sin correr el riesgo de que se corte por la forma de una pantalla no rectangular. Para las ventanas de visualización rectangulares, como el monitor de una computadora portátil promedio, su valor es igual a cero. Para pantallas no rectangulares, como una esfera de reloj redonda, los cuatro valores establecidos por el agente de usuario forman un rectángulo de modo que todo el contenido dentro del rectángulo sea visible.

Nota: A diferencia de otras propiedades CSS, los nombres de propiedad definidos por el agente de usuario distinguen entre mayúsculas y minúsculas.

Sintaxis formal

env(  , ? )

Ejemplos de

El siguiente ejemplo hace uso del segundo parámetro opcional de env(), que le permite proporcionar un valor de respaldo en caso de que la variable de entorno no esté disponible.

<p>
  If the <code>env()code> function is supported in your browser,
  this paragraph’s text will have 50px of padding between it and
  the left border — but not the top, right and bottom.
  This is because the accompanying CSS is the equivalent of
  <code>padding: 0 0 0 50pxcode>, because, unlike other CSS
  properties, user agent property names are case-sensitive.
p>

pwidth: 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);

Valores de ejemplo

padding:env(safe-area-inset-bottom, 50px);/* zero for all rectangular user agents */padding:env(Safe-area-inset-bottom, 50px);/* 50px because UA properties are case sensitive */padding:env(x, 50px 20px);/* as if padding: '50px 20px' were set because x is not a valid environment variable */padding:env(x, 50px, 20px);/* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */

La sintaxis de la reserva, como la de las propiedades personalizadas, admite comas. Pero, si el valor de la propiedad no admite comas, el valor no es válido.

Nota: Todas las propiedades no restablecen las propiedades del agente de usuario.

Especificaciones

Compatibilidad del navegador

Ver también

• var(…)
• Propiedades personalizadas de CSS para variables en cascada
• Propiedades personalizadas (–*)
• Usar propiedades personalizadas de CSS (variables)
• viewport-fit (@viewport)