Variables de entorno CSS

A todos nos presentaron la env()función en CSS cuando todo ese drama sobre “The Notch” y el iPhone X estaba cayendo. La forma en que Apple llegó a ayudarnos a alejar el contenido de esas áreas “inseguras” fue proporcionándonos esencialmente variables codificadas para usar:

padding:   env(safe-area-inset-top)   env(safe-area-inset-right)   env(safe-area-inset-bottom)   env(safe-area-inset-left);

¡Está bien! ¡Extraño! Ahora, nueve meses después, ha llegado un “borrador de propuesta no oficial”env() . Así es como funcionan las especificaciones, según tengo entendido. A veces, los proveedores de navegadores avanzan con las cosas que necesitan y luego se estandarizan. No siempre hay que esperar a que los organismos de normalización inventen cosas y luego los proveedores de navegadores las implementen.

¿Las variables de entorno son algo que nos entusiasma? ¡Claro que sí! En cierto sentido, son como una versión más limitada de las propiedades personalizadas de CSS , pero eso significa que se pueden usar potencialmente para más cosas .

Las variables de entorno CSS se están estandarizando: https://t.co/QKFBM3WFT2
Permite obtener y utilizar las variables definidas por el navegador y el autor: tipografía, colores, muesca y otros valores específicos de diseño/dispositivo.
Funcionan en consultas de medios, donde no se pueden utilizar propiedades personalizadas de CSS. pic.twitter.com/FWrPiBiAqp

— Serg Hospodarets (@malyw) 29 de abril de 2018

Nueva especificación para variables env() globales en CSS: https://t.co/6YfXWFTyhN

Olvídese de las muescas, lo importante aquí es la capacidad de separar las variables CSS de la cascada. ¡Genial ① para la organización de código/rendimiento ② porque es posible que puedas usarlos en consultas de medios!

— Eric Portis (@etportis) 30 de abril de 2018

Eric también señala algunos pensamientos iniciales muy sorprendentes:

TEMA 4 – Definir el conjunto completo de lugares env()que se pueden utilizar.

• Debería poder reemplazar cualquier subconjunto de sintaxis MQ, por ejemplo.
• ¿Quizás deberíamos poder reemplazar los selectores?
• ¿Debería funcionar a nivel de regla, para poder insertar elementos arbitrarios en una regla, como reutilizar un bloque de declaraciones?

Probablemente también se pueda cambiar con JavaScript. Creo que la razón principal por la que las propiedades personalizadas de CSS no funcionan con consultas de medios y selectores es porque sí funcionan con la cascada, lo que abre una lógica de bucle infinito muy extraña donde tiene sentido que CSS no quiera entrar.

Si te gusta PostCSS, ¡hay un complemento ! Pero advierto… los mismos problemas que ocurren con el preprocesamiento de propiedades personalizadas de CSS se aplican aquí (excepto el primero en ese artículo).