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

80

Últimamente, he estado diseñando sitios que son más receptivos y he estado usando consultas de medios CSS con frecuencia. Un patrón que noté es que el orden en el que se definen las consultas de medios realmente importa. No lo probé en todos los navegadores, solo en Chrome. ¿Existe una explicación para este comportamiento? A 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 que se escribe la consulta.

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 último, el navegador la ignoraría y aplicaría el valor de margen especificado al 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 las consultas de medios es correcta, el orden no debería importar, pero parece que sí. ¿Cuál podría ser la razón?

css media-queries responsive-design dsignr
fuente

Respuestas:

139

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

Significa que, si aplica dos reglas que colisionan sobre los mismos elementos, elegirá la última que fue declarada, a menos que la primera tenga el !importantmarcador o sea más específica (ej. html > bodyVs solo body, la última es menos específica).

Entonces, dado este CSS

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

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

si la ventana del navegador tiene 350 píxeles de ancho, el fondo será 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 ventana, el fondo será rojo. De hecho, ambas reglas coinciden, 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;
  }
}

o

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

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

el fondo será azul (con una ventana de 350 píxeles de ancho).

Alessandro Vendruscolo
fuente
12
Gracias. Nunca imaginé que una lógica tan simple arruinaría mi sueño por las noches juntos. Gracias.
dsignr
En una hoja de estilo, si se aplican las mismas reglas sin ninguna consulta de medios y luego dentro de 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?
19

O simplemente puede agregar un ancho mínimo 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;
  }
}
Expandir fragmento

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

Liran H
fuente
9
Me estremezco al ver un valor como 400.1px en CSS. O 1023px, etc. 1025px
Monstieur