usar - declaring css variable

Las variables nativas de CSS no funcionan en consultas de medios

Question

Estoy tratando de usar variables CSS en la consulta de medios y no funciona.

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

Answer 1

Aparentemente, simplemente no es posible usar variables CSS nativas como esa. Es una de las limitations .

Una forma inteligente de usarlo es cambiar sus variables en la consulta de medios, para impactar todo su estilo. Recomiendo este artículo

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}

Answer 2

Como Oriol ha respondido , actualmente, spec . Sin embargo, ha habido desarrollos recientes que abordarán este problema. En unos años, una vez que el Nivel 1 del Módulo de Variables de Entorno CSS esté estandarizado e implementado, podremos usar variables env() en consultas de medios en todos los navegadores modernos.

Si lee la especificación y tiene alguna inquietud, o si desea expresar su apoyo al caso de uso de consultas de medios, aún puede hacerlo en GitHub w3c / csswg-drafts # 1693 o en cualquier problema de CSS GitHub con el prefijo "[ css-env-1] " .

Respuesta original 09-11-2017 : Recientemente, el Grupo de trabajo CSS decidió que las Variables CSS Nivel 2 admitirán variables de entorno definidas por el usuario utilizando env() , e intentarán que sean válidas en las consultas de los medios . El Grupo resolvió esto después de que Apple propuso por primera vez las propiedades estándar de agente de usuario , poco antes del anuncio oficial del iPhone X en septiembre de 2017 (ver también WebKit: "Diseño de sitios web para iPhone X" por Timothy Horton ). Otros representantes del navegador acordaron que serían generalmente útiles en muchos dispositivos, como pantallas de televisión e impresión de tinta con bordes de sangrado. ( env() solía llamarse constant() , pero ahora ha quedado en desuso. Aún puede ver artículos que hacen referencia al nombre anterior, como este artículo de Peter-Paul Koch ). Después de algunas semanas, Cameron McCormack de Mozilla se dio cuenta de que estas variables de entorno serían utilizables en consultas de medios, y Tab Atkins, Jr., de Google, se dio cuenta de que las variables de entorno definidas por el usuario serían especialmente útiles como variables raíz globales, no reemplazables, utilizables en consultas de medios. Ahora, Dean "Dino" Jackson de Apple se unirá a Atkins en la edición del Nivel 2.

Puede suscribirse a las actualizaciones sobre este asunto en w3c/csswg-drafts GitHub número # 1693 . (Para obtener detalles históricos especialmente relevantes, expanda los registros de la reunión integrados en las resoluciones del CSSWG Meeting Bot y busque "MQ", que significa "consultas de medios".)

Planeo actualizar esta pregunta en el futuro cuando ocurran más desarrollos. El futuro es emocionante.

Actualización 08/02/2018 : Safari Technology Preview 49 ha agregado soporte para analizar calc() en consultas de medios, lo que también puede ser un preludio para admitir env() en ellas.

Actualización 27/04/2018 : el equipo de Chromium en Google decidió comenzar a trabajar en env() . En respuesta, Atkins comenzó a especificar env() en un borrador de estándar no oficial separado: el Módulo de Variables de Entorno CSS Nivel 1 . (Consulte su comentario de GitHub en w3c / csswg-drafts # 1693 y su comentario en w3c / csswg-drafts # 1817. ) El borrador menciona las variables en las consultas de los medios como un caso de uso explícito:

Debido a que las variables de entorno no dependen del valor de nada extraído de un elemento en particular, se pueden usar en lugares donde no hay un elemento obvio del cual extraer, como en las reglas @media , donde la función var() no sería válido.

Si lee la especificación y tiene alguna inquietud, o si desea expresar su apoyo al caso de uso de consultas de medios, aún puede hacerlo en GitHub w3c / csswg-drafts # 1693 o en cualquier problema de CSS GitHub con el prefijo "[ css-env-1] " .

Actualización 2019-07-06 : El trabajo continúa en las especificaciones. El número 2627 de GitHub está dedicado a las variables ambientales personalizadas.

Answer 3

Como puede leer otras respuestas, aún no es posible hacerlo.

Alguien mencionó variables ambientales personalizadas (similares a las variables css personalizadas env() lugar de var() ), y el principio es sólido, aunque todavía hay 2 problemas principales:

• soporte de navegador débil
• hasta ahora no hay forma de definirlos (pero probablemente lo será en el futuro, ya que hasta ahora solo es un borrador no oficial)

Answer 4

De la spec ,

La función var() se puede usar en lugar de cualquier parte de un valor en cualquier propiedad de un elemento. La función var() no se puede usar como nombres de propiedad, selectores o cualquier otra cosa además de los valores de propiedad. (Hacerlo generalmente produce una sintaxis no válida o, de lo contrario, un valor cuyo significado no tiene conexión con la variable).

Entonces no, no puede usarlo en una consulta de medios.

Y eso tiene sentido. Debido a que puede establecer --mobile-breakpoint por ejemplo :root , es decir, el elemento <html> , y desde allí se heredará a otros elementos. Pero una consulta de medios no es un elemento, no se hereda de <html> , por lo que no puede funcionar.

Esto no es lo que las variables CSS intentan lograr. Puede usar un preprocesador CSS en su lugar.

Answer 5

Sin embargo, lo que PUEDE hacer es consultar a @media su: declaración raíz.

/* input */
:root {
  --min-width: 1000px;
  --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}

Totalmente funciona en Chrome, Firefox y Edge al menos las últimas versiones de producción a partir de esta publicación.

Answer 6

Una forma de lograr lo que desea es usar el paquete postcss-media-variables .

Si está de acuerdo con el uso de paquetes npm, puede consultar la documentación aquí.

• postcss-media-variables

Ejemplo

:root {
     /* desktop vars */
}
@media screen and (max-width: 479px) {
    :root {
        /* mobile vars */
    }
}