¿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 CSS media queries con frecuencia. Un patrón que noté es que el orden en el que se definen las consultas de los medios realmente importa. No lo probé en todos los navegadores, pero solo en Chrome. ¿Hay alguna explicación para este comportamiento? A veces se vuelve frustrante cuando su sitio no funciona como debería y no está seguro si es la consulta o el orden en el que se escribe la consulta.

Aquí hay 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 la última, el navegador la ignoraría y aplicaría 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 media queries es correcta, el orden no debería importar, pero parece que sí. ¿Cuál podría ser la razón?

Author: roy, 2012-01-09
Source

2 answers

Eso es por diseño de CSS - Cascading Style Sheet.

Significa que, si aplica dos reglas que chocan con los mismos elementos, elegirá la última que se declaró, a menos que la primera tenga el marcador !important o sea más específica (por ejemplo, html > body vs solo body, esta ú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 el fondo será rojo. Ambas reglas son efectivamente 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;
  }
}

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).

 106
Author: Alessandro Vendruscolo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-09 16:58:46

O simplemente puede 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á rojo para resoluciones con un ancho de 400.1 px-600px, y siempre será azul para resoluciones con un ancho de 400px o menos.

 13
Author: Liran H,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-06 15:58:26