query - Anidar reglas @media en CSS
media screen css responsive (1)
El soporte parece ser diferente en todos los navegadores.
Verifique el link
Firefox: negro con texto blanco.
Opera, Chrome, IE9: azul con texto negro.
¿Cuál es correcto y cómo lo haré 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;
}
}
}
1.
Curiosamente, parece que las consultas de anidamiento de medios dentro de un @import condicional parecen funcionar.
p.ej:
Index.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>
importer.css
@import url(media.css) screen and (min-width: 480px);
media.css
body {
background-color: #6aa6cc;
color: #000;
}
@media screen and (min-width:768px) {
body {
background-color: #000;
color: #fff;
}
}
La respuesta corta es que mientras que anidar reglas @media (y no solo consultas multimedia) está permitido en CSS3 , no estaba permitido en CSS2.1 , sobre todo porque no había una razón para permitirlo ya que las consultas de medios aún no existe.
Firefox fue el primero en admitir reglas de @media anidadas, sin embargo, desde el momento en que esta respuesta se publicó por primera vez, otros navegadores se han puesto lentamente al día. A saber, Chrome (y de manera similar, Blink Opera) se ha actualizado para admitirlo.
Por lo que sé, Safari e IE todavía no lo admiten.
Hay un poco de confusión terminológica que necesita aclararse para que podamos entender qué está pasando exactamente.
El código que tiene hace referencia a las reglas de @media , y no tanto a las consultas de medios: la consulta de medios es el componente que sigue al token @media , mientras que la regla es todo el bloque de código que consiste en @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 donde una regla @media en una hoja de estilos importada funciona correctamente incluso cuando la @import está acompañada por otra consulta de medios. Tenga en cuenta que las consultas de medios pueden ocurrir en las reglas @media y @import . Son lo mismo, pero se usan para aplicar restrictivamente las reglas de estilo de diferentes maneras.
Ahora, el problema real aquí es que las reglas anidadas de @media CSS2.1 son CSS2.1 porque no está permitido anidar ninguna regla at en las reglas @media . Sin embargo, las cosas parecen bastante diferentes en CSS3. A saber, el módulo Reglas condicionales CSS3 que las reglas de @media se pueden anidar, incluso proporcionando un ejemplo:
Por ejemplo, con este conjunto de reglas anidadas:
@media print { // rule (1) #navigation { display: none } @media (max-width: 12cm) { // rule (2) .note { float: none } } }la condición de la regla marcada (1) es verdadera para medios impresos, y la condición de la regla marcada (2) es verdadera cuando el ancho del área de visualización (que para medios impresos es el cuadro de página) es menor o igual que 12cm. Por lo tanto, la regla ''#navegación {mostrar: ninguno}'' se aplica siempre que esta hoja de estilos se aplique a medios impresos, y la regla ''.note {float: none}'' se aplica solo cuando la hoja de estilos 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 está siguiendo esta especificación y procesando las reglas en consecuencia, mientras que los otros navegadores aún lo están tratando como CSS2.1.
Sin embargo, la gramática en el módulo de sintaxis no se ha actualizado para reflejar esto; aún no permite la anidación de reglas at en las reglas @media como con CSS2.1. Esta especificación está programada para una reescritura de todos modos, así que supongo que esto no importa.
Básicamente, CSS3 lo permite (pendiente de reescribir el módulo de sintaxis), pero no CSS2.1 (porque no define consultas de medios ni permite bloques de reglas de @media anidados). Y aunque al menos un navegador ha comenzado a admitir la nueva especificación, no llamaría a otros navegadores con errores; en cambio, diré que simplemente aún no se han puesto al día ya que realmente se ajustan a especificaciones más antiguas y estables.
Por último, la razón por la cual su @import funciona es porque @import puede funcionar condicionalmente con la ayuda de una consulta de medios. Sin embargo, esto no tiene relación con la regla @media en su hoja de estilo importada. De hecho, se trata de dos cosas separadas, y todos los navegadores las tratan como tales.
Para que el código funcione de forma coherente en todos los navegadores, puede usar su declaración @import o, como ambas reglas usan min-width , simplemente elimine el anidamiento de sus reglas @media :
@media screen and (min-width: 480px) {
body {
background-color: #6aa6cc;
color: #000;
}
}
@media screen and (min-width: 768px) {
body {
background-color: #000;
color: #fff;
}
}