Pourquoi l’ordre des requêtes média importe-t-il en CSS?

Depuis quelque temps, je conçois des sites plus réactifs et j’utilise fréquemment les requêtes CSS. L’un des modèles que j’ai remarqués est que l’ordre dans lequel les requêtes de média sont définies est important. Je ne l’ai pas testé dans chaque navigateur, mais uniquement sur Chrome. Y a-t-il une explication à ce comportement? Parfois, il devient frustrant lorsque votre site ne fonctionne pas comme il se doit et vous ne savez pas si c’est la requête ou l’ordre dans lequel la requête est écrite.

Voici un exemple:

HTML

 

Welcome to my website

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;} } 

Cependant, si j’écrivais la requête pour 1024×600 dans le dernier cas, le navigateur l’ignorerait et appliquerait la valeur de marge spécifiée au début du 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 ma compréhension des questions relatives aux médias est correcte, l’ordre ne devrait pas avoir d’importance, mais il semble que ce soit le cas. Quelle pourrait être la raison?

C’est par conception de CSS – Cascading Style Sheet.

Cela signifie que, si vous appliquez deux règles qui entrent en collision avec les mêmes éléments, il choisira le dernier qui a été déclaré, à moins que le premier ait le marqueur !important ou soit plus spécifique (par exemple html > body vs just body , le est moins spécifique).

Donc, étant donné ce CSS

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

Si la fenêtre du navigateur est de 350 pixels de large, l’arrière-plan sera bleu, alors qu’avec ce CSS

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

et la même largeur de fenêtre, l’arrière-plan sera rouge. Les deux règles sont en effet appariées, mais la seconde est celle qui est appliquée, car c’est la dernière règle.

Enfin, avec

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

ou

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

l’arrière-plan sera bleu (avec une fenêtre de 350 pixels de large).

Ou vous pouvez simplement append min-width aux plus grandes requêtes de média et ne pas avoir de problèmes, quelle que soit la commande.

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