Por que a ordem das consultas de mídia é importante no CSS?

Ultimamente, venho projetando sites que são mais responsivos e tenho usado consultas de mídia CSS com frequência. Um padrão que notei é que a ordem em que as consultas de mídia são definidas realmente importa. Não testei em todos os navegadores, mas apenas no Chrome. Existe uma explicação para esse comportamento? Às vezes, é frustrante quando o site não funciona como deveria e você não tem certeza se é a consulta ou a ordem em que a consulta é gravada.

Aqui está um exemplo:

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

No entanto, se eu escrevi a consulta para 1024×600 no último, o navegador iria ignorá-lo e aplicar o valor da margem especificado no início do 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;} } 

Se o meu entendimento das consultas de mídia estiver correto, a ordem não deve importar, mas parece que sim. Qual seria a razão?

Isso é por design de CSS – Cascading Style Sheet.

Isso significa que, se você aplicar duas regras que colidem com os mesmos elementos, ele escolherá o último que foi declarado, a menos que o primeiro tenha o marcador !important ou seja mais específico (por exemplo, html > body vs just body , o último é menos específico).

Então, dado este CSS

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

se a janela do navegador tiver 350 pixels de largura, o plano de fundo será azul, enquanto com este CSS

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

e a mesma largura da janela, o fundo será vermelho. Ambas as regras são de fato combinadas, mas a segunda é a que é aplicada porque é a última regra.

Finalmente, com

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

o fundo será azul (com uma janela de 350 pixels de largura).

Ou você pode adicionar min-width às consultas de mídia maiores e não ter problemas, independentemente do pedido.

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