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

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

Запросы возможностей

Решением по разветвлению кода в CSS, присущим самой этой технологии, является использование запросов возможностей (feature queries), представляющих собой составную часть условных правил — CSS Conditional Rules Module Level 3 (http://www.w3.org/TR/css3-conditional/). Но на данный момент условные правила CSS не имеют поддержки в Internet Explorer (применительно к версии 11) и Safari (включая устройства под управлением iOS вплоть до версии 8.1), то есть они не пользуются достаточно широкой поддержкой.

Синтаксис у запросов возможностей такой же, как и у медиазапросов. Рассмотрим следующий код:

@supports (flashing-sausages: lincolnshire) {

body {

sausage-sound: sizzling;

sausage-color: slighty-burnt;

background-color: brown;

}

}

В данном случае стили будут применены только в том случае, если браузер поддерживает свойство flashing-sausages. Я абсолютно уверен в том, что ни один браузер никогда не будет поддерживать свойство под названием flashing-sausages, поэтому ни один из стилей внутри блока @supports применяться не будет.

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

@supports (display: flex) {

.Item {

display: inline-flex;

}

}

@supports not (display: flex) {

.Item {

display: inline-block;

}

}

Здесь один блок кода определяется на случай поддержки возможности, а другой блок — на случай отсутствия такой поддержки. Эта модель подойдет в том случае, если браузер поддерживает @supports (я понимаю, что в этом довольно легко запутаться), но если он не обеспечивает такой поддержки, не будет применен ни один из этих стилей.

Если нужно обеспечить работу на устройствах, не поддерживающих @supports, лучше сначала написать исходное объявление и уже после него — то объявление, которое обусловлено запросом @supports, чтобы предыдущее правило отменялось в случае поддержки @supports и блок @supports игнорировался, если его поддержка отсутствует. Поэтому предыдущий пример требует следующей переработки:

.Item {

display: inline-block;

}

@supports (display: flex) {

.Item {

display: inline-flex;

}

}

Комбинирование условий

Условия также можно комбинировать. Предположим, нам нужно применить некоторые правила лишь при одновременной поддержке Flexbox и pointer: coarse (если вы пропустили соответствующий материал, то связанное с взаимодействием со страницей медиасвойство pointer рассматривалось в главе 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. На данный момент это самый надежный способ реализации ветвлений в вашем коде.