Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Для начала мы усвоим все, что могут предложить нам медиазапросы уровней CSS3 и CSS4 (Level 3 и Level 4 CSS Media Queries). Мы уже видели, как веб-страница может подстраиваться под ширину окна просмотра, но уже сейчас способны на более серьезные дела, и вскоре ваши браузеры станут демонстрировать гораздо более интересные возможности. Давайте двигаться дальше и смотреть на все это своими глазами.

2. Медиазапросы — поддержка различных окон просмотра

В предыдущей главе был дан краткий обзор основных компонентов адаптивной веб-страницы: подстраиваемой разметки, подстраиваемых изображений и медиазапросов.

В текущей главе будут подробно рассмотрены медиазапросы. Надеемся, что вам будет предоставлено все необходимое для полного понимания их возможностей, синтаксиса и последующего развития.

В этой главе нам предстоит:

• узнать, зачем медиазапросы нужны в адаптивном веб-дизайне;

• разобраться с синтаксисом медиазапросов;

• научиться использовать медиазапросы в тегах link с CSS-инструкциями @import и внутри самих файлов CSS;

• разобраться с тем, какие именно свойства устройств поддаются тестированию;

• воспользоваться медиазапросами для обеспечения визуальных изменений в зависимости от доступного пространства экрана;

• решить вопрос о том, нужно ли группировать медиазапросы или записывать их по мере необходимости там, где это потребуется;

• разобраться в том, что представляет собой метатег viewport, позволяющий медиазапросам работать надлежащим образом на устройствах под управлением iOS и Android;

• рассмотреть возможности, которые будут предложены в будущих спецификациях медиазапросов.

Спецификация CSS3 состоит из нескольких модулей. Одним из таких модулей является Media Queries (Level 3). Медиазапросы позволяют нам определить целевое назначение конкретных CSS-стилей в зависимости от возможностей устройства. Например, с помощью всего лишь нескольких строк кода CSS мы можем изменить способ отображения содержимого в зависимости от таких параметров, как ширина окна просмотра, соотношение сторон экрана, ориентация экрана (альбомная или портретная) и т. д.

Медиазапросы получили довольно широкую реализацию. Их поддерживают практически все браузеры, кроме самых ранних версий Internet Explorer (8 и ниже). Короче говоря, не существует абсолютно никаких причин для того, чтобы не пользоваться ими!

совет

Спецификации в W3C проходят через процесс ратификации. Если выдастся свободный денек, не поленитесь ознакомиться с официальным объяснением этого процесса по адресу http://www.w3.org/2005/10/Process-200 51014/tr. Простейшая версия состоит в том, что спецификация начинается с рабочего проекта (Working Draft (WD)), проходит стадии кандидата в рекомендации (Candidate Recommendation (CR)), предложения в рекомендации (Proposed Recommendation (PR)) и, наконец, спустя много лет добирается до рекомендации (W3C Recommendation (REC)). Как правило, безопаснее использовать модули, находящиеся на более высоком уровне становления. Например, CSS Transforms Module Level 3 (http://www.w3.org/TR/css3-3d-transforms/) пребывал в статусе WD с марта 2009 года, а его поддержка со стороны браузеров была гораздо скуднее, чем поддержка модулей, пребывающих в статусе CR, например, медиазапросов.

Зачем в адаптивном веб-дизайне нужны медиазапросы

Медиазапросы CSS3 позволяют нацеливать конкретные CSS-стили на определенные возможности устройств или возникающие ситуации. Если углубиться в W3C-спецификацию, относящуюся к модулю медиазапросов CSS3 (http://www.w3.org/TR/css3-mediaqueries/), можно увидеть их следующее официальное представление:

«Медиазапрос состоит из типа среды и выражений в количестве от нуля и более, которые ведут проверку условий конкретных медиасвойств. К медиасвойствам, используемым в медиа­запросах, относятся ширина —'width', высота — 'height' и цвет — 'color'. За счет использования медиазапросов представления без изменения своего содержимого могут быть привязаны к конкретному диапазону устройств вывода информации».

Без медиазапросов мы не сможем внести существенные изменения в визуальное представление сайта с помощью одних только CSS-таблиц. Они облегчают нам написание стабильных CSS-правил, упреждающих такие случаи, как портретная ориентация экрана, небольшие или большие размеры окна просмотра и многое другое.

Хотя подстраиваемая разметка может справляться с выдерживанием определенного дизайна в довольно широком диапазоне изменений с учетом всего диапазона размеров экрана, который мы надеемся охватить, бывают случаи, когда требуется более глубокий пересмотр разметки. Возможности такого пересмотра дают медиазапросы. Их нужно рассматривать в качестве основной условной логики для CSS.

Основная условная логика в CSS.Во всех настоящих языках программирования имеются средства, благодаря применению которых обслуживается одна или несколько возможных ситуаций. Обычно такие средства существуют в виде условной логики, примером которой может послужить инструкция if – else.

Если выражения, характерные для программирования, непривычны вашему глазу, не волнуйтесь: данная концепция довольно проста. Наверняка вы используете условную логику, когда в кафе просите друга заказать себе что-нибудь: «Если у них есть тройные шоколадные кексы, то я бы взял один, а если нет, то я бы не отказался от кусочка морковного пирога». Это простая условная инструкция с двумя возможными результатами, которых в данном случае вполне достаточно.

Когда я работал над этой книгой, в CSS еще не было возможности использования настоящей условной логики или свойств, присущих программированию. Циклы, функции, итерации и сложные математические вычисления все еще не вышли за пределы прерогативы CSS-процессоров (не помню, упоминал ли я о прекрасной книге на тему препроцессора Sass, которая называется Sass and Compass for Designers?). И тем не менее медиазапросы являются одним из механизмов CSS, позволяющих нам создавать основную условную логику. В том случае, когда при использовании медиазапроса складываются конкретно оговоренные в нем условия, в область видимости попадают именно те стили, которые в нем объявляются.

Пути создания возможностей программирования

Популярность препроцессоров CSS заставила призадуматься тех людей, которые работают над спецификациями CSS. Сейчас уже есть WD-спецификация, касающаяся CSS-переменных: http://www.w3.org/TR/css-variables/.

Но поддержка со стороны браузеров ограничивается Firefox, поэтому в настоящее время об их повсеместном использовании не может быть и речи.