Anidando reglas @media en CSS
El soporte parece ser diferente entre los navegadores.
Consulta el enlace
Firefox: negro con texto blanco.
Opera, Chrome, IE9: azul con texto negro.
¿Cuál es correcto y cómo puedo hacerlo consistente?
El código
@media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
@media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
Curiosamente, parece que anidar consultas de medios dentro de un condicional @importparece funcionar.
p.ej:
índice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media test</title>
<link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
<h1>Why is this not consistent.</h1>
</body>
</html>
importador.css
@import url(media.css) screen and (min-width: 480px);
medios.css
body {
background-color: #6aa6cc;
color: #000;
}
@media screen and (min-width:768px) {
body {
background-color: #000;
color: #fff;
}
}
Para aquellos que simplemente buscan una respuesta a "¿Qué navegadores admiten el anidamiento de @mediareglas?", la respuesta corta es que todos los navegadores modernos, incluidos Firefox, Safari, Chrome (y sus derivados) y Microsoft Edge, ahora admiten el anidamiento de @mediareglas. como se describe en CSS condicional 3 . El código de la pregunta con las @mediareglas anidadas ahora debería funcionar correctamente en todas partes, con la excepción de Internet Explorer (que ya no se actualiza con nuevas funciones , lo que significa que ninguna versión de IE admitirá esta función).
Esta característica no existía en CSS2.1 , ya que en ese momento solo existían tipos de medios que simplemente se podían agrupar con una coma, lo que explica por qué el soporte para esto era muy deficiente en el momento en que se formuló esta pregunta por primera vez.
Lo que sigue es un análisis de la pregunta original teniendo en cuenta estas limitaciones históricas.
Hay un poco de confusión terminológica que es necesario aclarar para que podamos entender qué está sucediendo exactamente.
El código que tiene se refiere a @mediareglas, y no tanto a consultas de medios: la consulta de medios en sí es el componente que sigue al @mediatoken, mientras que la regla es el bloque completo de código que consta de @media, la consulta de medios y las reglas anidadas dentro de su conjunto. de llaves.
Esto puede causar confusión entre muchos cuando se trata de usar consultas de medios en CSS, así como su caso específico en el que una @mediaregla en una hoja de estilo importada funciona correctamente incluso cuando va @importacompañada de otra consulta de medios. Tenga en cuenta que las consultas de medios pueden ocurrir tanto en reglas @mediacomo @import. Son lo mismo, pero se utilizan para aplicar de manera restrictiva reglas de estilo de diferentes maneras.
Ahora, el problema real aquí es que @medialas reglas anidadas no son válidas en CSS2.1 porque no se le permite anidar ninguna regla dentro de @medialas reglas. Sin embargo, las cosas parecen bastante diferentes en CSS3. Es decir, el módulo Reglas condicionales establece muy claramente que @medialas reglas se pueden anidar, incluso brinda un ejemplo:
Por ejemplo, con este conjunto de reglas anidadas:
@media print { /* rule (1) */ /* hide navigation controls when printing */ #navigation { display: none } @media (max-width: 12cm) { /* rule (2) */ /* keep notes in flow when printing to narrow pages */ .note { float: none } } }la condición de la regla marcada (1) es verdadera para los medios impresos, y la condición de la regla marcada (2) es verdadera cuando el ancho del área de visualización (que para los medios impresos es el cuadro de página) es menor o igual a 12cm. Por lo tanto, la regla '#navigation { display: none }' se aplica siempre que esta hoja de estilo se aplica a medios impresos, y la regla '.note { float: none }' se aplica sólo cuando la hoja de estilo se aplica a medios impresos y el ancho del cuadro de página es menor o igual a 12 centímetros.
Además, parece que Firefox sigue esta especificación y procesa las reglas en consecuencia, mientras que los otros navegadores todavía lo tratan según CSS2.1.
Sin embargo , la gramática del módulo Sintaxis aún no se ha actualizado para reflejar esto; todavía no permite el anidamiento de reglas at dentro de @mediareglas como ocurre con CSS2.1. Esta especificación está programada para ser reescrita de todos modos, así que supongo que esto no importa.
Básicamente, CSS3 lo permite (a la espera de reescribir el módulo de Sintaxis), pero no CSS2.1 (porque no define consultas de medios ni permite @mediabloques de reglas anidados). Y aunque al menos un navegador ha comenzado a admitir la nueva especificación, no diría que otros navegadores tienen errores; en cambio, diré que simplemente no se han puesto al día todavía, ya que en realidad se están adaptando a una especificación más antigua y estable.
Por último, la razón por la que @importfunciona es porque @importpuede funcionar de forma condicional con la ayuda de una consulta de medios. Sin embargo, esto no tiene relación con la @mediaregla de su hoja de estilo importada. De hecho, se trata de dos cosas distintas y todos los navegadores las tratan como tales.
Para que su código funcione de manera consistente en todos los navegadores, puede usar su @importdeclaración o, dado que ambas reglas usan min-width, simplemente elimine el anidamiento de sus @mediareglas:
@media screen and (min-width: 480px) {
body {
background-color: #6aa6cc;
color: #000;
}
}
@media screen and (min-width: 768px) {
body {
background-color: #000;
color: #fff;
}
}
