¿Por qué importa el orden de las consultas de medios en CSS?

Últimamente, he estado diseñando sitios que son más receptivos y he estado usando consultas de medios de CSS con frecuencia. Un patrón que noté es que el orden en que se definen las consultas de los medios realmente importa. No lo probé en todos los navegadores, solo en Chrome. ¿Hay una explicación para este comportamiento? Algunas veces se vuelve frustrante cuando su sitio no funciona como debería y no está seguro de si es la consulta o el orden en el que se escribió la consulta.¿Por qué importa el orden de las consultas de medios en CSS?

He aquí un ejemplo:

HTML

<body> 
    <div class="one"><h1>Welcome to my website</h1></div> 
    <div class="two"><a href="#">Contact us</a></div> 
</body>

CSS:

body{ 
font-size:1em; /* 16px */ 
} 

.two{margin-top:2em;} 



/* Media Queries */ 

@media (max-width: 480px) { 
    .body{font-size: 0.938em;} 

} 
/* iphone */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    body {font-size: 0.938em;} 
} 
/*if greater than 1280x800*/ 
@media (min-width: 1200px) { 
     .two{margin-top:8em;} 
      } 
/*1024x600*/ 
@media (max-height: 600px) { 
     .two{margin-top:4em;} 
} 
/*1920x1024*/ 
@media (min-height: 1020px) { 
     .two{margin-top:9em;} 
} 
/*1366x768*/ 
@media (min-height: 750px) and (max-height: 770px) { 
     .two{margin-top:7em;} 
}

Sin embargo, Si escribiera la consulta para 1024x600 en el pasado, el navegador ignoraría y aplicar el valor de margen especificado en el inicio del CSS (margin-top: 2em).

/* Media Queries - Re-arranged version */ 

@media (max-width: 480px) { 
    .body{font-size: 0.938em;} 
} 
/* iphone */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    body {font-size: 0.938em;} 
} 
/*if greater than 1280x800*/ 
@media (min-width: 1200px) { 
     .two{margin-top:8em;} 
} 
/*1920x1024*/ 
@media (min-height: 1020px) { 
     .two{margin-top:9em;} 
} 
/*1366x768*/ 
@media (min-height: 750px) and (max-height: 770px) { 
     .two{margin-top:7em;} 
} 
/*1024x600*/ 
@media (max-height: 600px) { 
     .two{margin-top:4em;} 
}

Si mi comprensión de preguntas de los medios son correctos, la orden no debería importar, pero parece que lo hace. ¿Cuál podría ser la razón?

Fuente

2012-01-09 dsignr

Eso es por diseño de CSS - Hoja de estilos en cascada.

Esto significa que, si se aplican dos normas que colisionan a los mismos elementos, se elegirá el último que se declaró, a menos que la primera tiene el marcador de !important o es más específico (por ejemplo html > body vs solo body, la este último es menos específico).

Por lo tanto, dada esta CSS

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
} 

@media (max-width: 400px) { 
    body { 
    background: blue; 
    } 
}

si la ventana del navegador es de 350 píxeles de ancho, el fondo será de color azul, mientras que con este CSS

@media (max-width: 400px) { 
    body { 
    background: blue; 
    } 
} 

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
}

y el mismo ancho de la ventana, el fondo será rojo Ambas reglas son de hecho coincidentes, pero la segunda es la que se aplica porque es la última regla.

Finalmente, con

@media (max-width: 400px) { 
    body { 
    background: blue !important; 
    } 
} 

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
}

@media (max-width: 400px) { 
    html > body { 
    background: blue; 
    } 
} 

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
}

el fondo será de color azul (con unos 350 píxeles de ancho de ventanas).

Fuente

2012-01-09 16:58:46

Gracias. Nunca imaginé una lógica tan simple que arruinaría mi sueño por las noches juntas. Gracias. – dsignr

En una hoja de estilos si se aplican las mismas reglas sin ninguna consulta de medios y luego en una consulta de medios para dispositivos móviles de pantalla pequeña y hay algunas imágenes para descargar. Entonces, ¿qué pasaría, el navegador ignorará las reglas sin consulta de medios y aplicará solo las reglas específicas de consulta de medios? –

O simplemente podría agregar min-width a las consultas de medios más grandes y no tener ningún problema, independientemente del orden.

@media (min-width: 400.1px) and (max-width: 600px) { 
 
    body { 
 
    background: red; 
 
    } 
 
} 
 

 
@media (max-width: 400px) { 
 
    body { 
 
    background: blue; 
 
    } 
 
}

Usando este código, en cualquier orden, el color de fondo siempre será de color rojo de resolución con una anchura de 400.1px-600px, y siempre será azul para resoluciones con un ancho de 400px o menos.

Fuente

2014-11-06 15:58:26

¡Agradable! Gracias. – dsignr

Me estremezco al ver un valor como 400.1px en CSS. O 1023px, 1025px etc. – Monstieur

¿Por qué importa el orden de las consultas de medios en CSS?

Respuesta

Cuestiones relacionadas