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

@supports ((display: flex) and (pointer: coarse)) {

.Item {

display: inline-flex;

}

}

Здесь мы воспользовались ключевым словом and, но можно было использовать также or или заменить одно слово другим. Например, если стили нужно применить при условии поддержки двух предыдущих пар «свойство — значение» или при поддержке 3D-преобразований:

@supports ((display: flex) and (pointer: coarse)) or

(transform:translate3d(0, 0, 0)) {

.Item {

display: inline-flex;

}

}

Обратите в предыдущем примере внимание на дополнительный набор круглых скобок, отделяющих условия для flex и pointer от условия для transform.

К сожалению, как уже говорилось, до широкой поддержки @supports пока еще слишком далеко. А что же тогда делать разработчику адаптивного веб-дизайна? Не впадать в уныние, ведь у нас есть великолепное JavaScript-средство, позволяющее легко преодолеть подобные трудности.

Modernizr

Пока @supports не получит более широкую реализацию в браузерах, мы можем воспользоваться JavaScript-средством под названием Modernizr. На данный момент это самый надежный способ реализации ветвлений в вашем коде.

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

совет

Тема постепенного усложнения будет раскрыта в главе 10.

Посмотрим, как можно реализовать постепенное усложнение и ветвление нашего кода CSS с использованием Modernizr.

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

Этот код при загрузке браузером страницы запускает всевозможные тесты из состава библиотеки. Если браузер проходит тест, Modernizr добавляет соответствующий класс к корневому тегу HTML, что вполне сообразуется с нашими целями.

Например, после того, как Mondernizr выполнит свои задачи, классы в теге HTML могут приобрести следующий вид:

В данном случае тестированию подверглись только несколько возможностей: анимация, преобразования, применение SVG, линейной SVG и поддержка сенсорных экранов. При наличии этих классов код может подвергнуться ветвлению:

.widget {

height: 1rem;

}

.touch .widget {

height: 2rem;

}

В предыдущем примере элемент widget в обычных условиях получает высоту 1rem, но если в HTML присутствует класс touch (благодаря работе Modernizr), то widget получит высоту 2rem.

Можно также поменять логику на противоположную:

.widget {

height: 2rem;

}

.no-touch .widget {

height: 1rem;

}

Таким образом, исходной для элементов будет высота 2rem, и она будет уменьшена, если присутствует класс no-touch.

Какая бы структура вам ни понадобилась, Modernizr предоставляет широкую поддержку ветвления при наличии возможностей. Особая польза от применения этого средства проявится при потребности в использовании таких возможностей, как transform3d, с сохранением предоставления работоспособной подмены для тех браузеров, которые не в состоянии справиться с такими возможностями.

совет

Modernizr может предоставить точные тесты практически для всего, что вы можете пожелать использовать в качестве основы для ветвления кода, но есть и исключения. Например, общеизвестны трудности точного тестирования возможности overflow-scrolling. В тех ситуациях, когда класс устройств не может быть успешно определен, вероятно, будет разумнее выполнить ветвление кода на результате тестирования другой возможности. Например, старые версии Android испытывают трудности с горизонтальной прокруткой, а ветвление можно организовать по результатам появления класса no-svg (поскольку Android 2-2.3 не поддерживает и SVG). И наконец, можно объединить тесты для создания собственного пользовательского теста. Эта тема слегка выходит за рамки вопросов, рассматриваемых в книге, но если она вас заинтересует, обратитесь к материалам по адресу http://benfrain.com/combining-modernizr-tests-create-custom-convenience-forks/.

Новые селекторы в CSS3 и порядок их использования

В CSS3 имеются очень эффективные средства выбора элементов внутри страницы. Может, это прозвучит для вас слишком оптимистично, но уж поверьте, они смогут облегчить вашу жизнь и заставят полюбить CSS3! И я готов ответить за столь смелое утверждение.

Селекторы атрибутов в CSS3

Возможно, вы уже пользовались селекторами атрибутов CSS для создания правил. Рассмотрим, к примеру, следующее правило:

img[alt] {

border: 3px dashed #e15f5f;

}

Оно будет нацелено на каждый использованный в разметке тег изображения, у которого имеется атрибут alt. Или же предположим, что нам нужно выбрать все элементы с атрибутом data-sausage:

[data-sausage] {

/* Стили */

}

Для указания атрибута понадобятся всего лишь квадратные скобки.

совет

Атрибут типа data-* был введен в HTML5 для предоставления места пользовательским данным, которые не могут быть должным образом сохранены с помощью других механизмов. Описание спецификации можно найти по адресу http://www.w3.org/TR/2010/WD-html5-201 01019/elements.html.

Можно сузить область выбора, указав значение атрибута. Рассмотрим, к примеру, следующее правило:

img[alt="sausages"] {

/* Стили */