И ещё немного про media queries


Предыдущая статья про media queries породила два интересных вопроса:

  • Если указано @media screen and (max-width:600px) {} и @media screen and (min-width:600px) {} — то какие свойства будут применены в граничной зоне, при ширине экрана 600 px?
  • Что делать с браузерами, которые не поддерживают media queries?

Немного подумав, я решил, что нужно делать так:

Как браузер определяет, какие правила применять, при граничных условиях?

Я сделал небольшой пример, в котором JS-ом изменяется ширина окна и посмотрел, что происходит, если я напишу такой css-код:

@media screen and (max-width:600px) {
    body {
        background: #F00;
        }
    }
 @media screen and (min-width:600px) and (max-width:800px) {
    body {
        background: #0F0;
       }
    }
 @media screen and (min-width:800px) {
    body {
       background: #00F;
       }
    }

Веб-инспектор рассказал мне следующее:

  • при граничных условиях (например 600 px) браузер использует свойства из первого и из второго медиа-блоков
  • медиа-выражения имеют одинаковую специфичность, поэтому применяются свойства селектора, встретившегося последним

Таки образом, если мы хотим, чтобы при ширине до 600 пикселов включительно применялись свойства из первого блока медиа-выражений, нужно избавиться от пересечения media queries. Почему нельзя просто поменять блоки местами — я описал в предыдущей заметке.

@media screen and (max-width:600px) {
    body {
        background: #F00;
        }
    }
@media screen and (min-width:601px) and (max-width:800px) {
    body {
        background: #0F0;
      }
   }

Что делать с браузерами, которые не понимают media queries?

К.О.: Если нужно, чтобы браузеры, которые не понимают media queries всё-таки смогли применить хоть что-то для элементов страницы, нужно записать селекторы вне блока media queries.

Спасибо, капитан. Однако мы если мы запишем обычные селекторы после media queries, то они переопределят всё, что мы так долго запивывали. Говорят, что Пол Айриш делает так — сначала все «обычные» селекторы, а уже потом уточнения с @media.

Но мне кажется более правильным перичислить все блоки с @-правилами в начале таблицы стилей, до остальных селекторов. Что делать, чтобы и обычные браузеры всё увидели, и сохранить порядок @media?

Здесь я решил пойти на небольшой обман собственной совести и всё-таки разместить базовые значения свойств элементов до секции с media queries. Но для того, чтобы совесть не заподозрила ничего плохого — обернул их в блок @media {}:

@media all {
    body {
        background: #F00;
        }
    }
@media screen and (max-width:600px) {
    body {
        background: #F00;
        }
    }
@media screen and (min-width:601px) and (max-width:800px) {
    body {
        background: #0F0;
      }
   }

Даже старый и больной IE6 понимает такое @media-выражение, а значит мы отдаём для старых браузеров некоторые базовые значения свойств, а остальным — задаём уточнения через media queries. Да, конечно, у нас будет переопределение свойств и если вам нужно избежать его — используйте conditional comments. Этого будет достаточно, ведь все современные браузеры понимают media queries.