От автора: в данной обучающей статье я рассмотрю два подхода, позволяющих определить, поддерживаются ли браузером определенные CSS возможности или нет. В первом подходе используется инструмент Modernizr, популярная JavaScript библиотека, а во втором – директива @support, подающее надежды CSS решение.
Определение возможностей с помощью Modernizr
Как уже было сказано, Modernizr – это легковесная JavaScript библиотека, которая поддержку HTML5 и CSS3 возможностей в вашем браузер. Пока происходит загрузка страницы, Modernizr работает в фоновом режиме и производит тесты на определение возможностей. Затем он сохраняет результаты в виде свойств JavaScript объекта и в виде классов у элемента html. Об этом чуть позже.
Чтобы установить и использовать Modernizr, вы можете посетить официальный сайт и скачать нужную версию.
Примечание: на момент написания статьи текущей версией Modernizr является версия 2.8.3, хотя версия 3 почти готова. По факту, команда, разрабатывающая библиотеку, планирует запустить новую версию уже через несколько недель. С коротким обзором новой версии можно ознакомиться здесь. Более того, вы можете скачать бета-версию по данной ссылке.
После скачивания поместите JavaScript файл с библиотекой в папку с вашим проектом и подключите его в области
вашей html страницы. И последний, но не менее важный, момент заключается в том, чтобы добавить класс no-js к элементу html, чтобы активировать функционал Modernizr.В следующих двух разделах данной статьи я рассмотрю основы работы с Modernizr. Для более глубоко изучения данного инструмента прочтите документацию.
Определение через CSS
Как уже говорилось ранее, Modernizr добавляет некоторое количество классов к элементу html. Имена классов зависят от браузерной поддержки. Если браузер не проходит некоторые из тестов, то Modernizr добавляет префикс no- перед встроенными именами классов. Например, предположим, что мы тестируем эффекты отражения. Тогда элемент html в браузере Chrome 40 будет выглядеть следующим образом:
В то время как в браузере Firefox 35 будет следующее:
Обратите также внимание на класс js. Если при запуске Modernizr в браузере включен JavaScript, то Modernizr заменяет старый класс no-js на новый. Основываясь на результатах тестов Modernizr, мы можем изменять наши таблицы стилей.
Примеры
Для начала представим базовый HTML код, который будет использоваться на всем протяжении данной обучающей статьи:
|
1 |
<h2 id="reflection">CSS Reflections</h2> |
Используя классы, которые нам предоставил Modernizr, мы изменяем наши стили для элемента h2 следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
h2 { color: #c0ccdb; font-size: 3em; } .cssreflections h2 { -webkit-box-reflect: below -.45em -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(255, 255, 255, 0.75))); } .no-cssreflections h2 { text-shadow: 0 1px 0 #136ed1, 0 2px 0 #126ac9, 0 3px 0 #1160b6, 0 4px 0 #105cad, 0 5px 0 #0f56a2, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } |
Браузеры на «движке» Webkit, поддерживающие эффекты отражения, отобразят элемент h2 следующим образом:
В то время как остальные (хотя бы те, которые поддерживают свойство text-shadow) применят другой эффект, основанный на эффекте 3D текста Марка Отто (Mark Otto):
Определение через JavaScript
Второй способ получение результатов тестов Modernizr заключается в использовании JavaScript. Как уже было сказано, Modernizr создает объект с именами свойств тех возможностей, поддержку которых он будет проверять. В большинстве случаев в качестве возвращаемых значение будет либо true, либо false.
На следующем скриншоте видно, как Firefox 35 отображает объект Modernizr (вкладка Консоль):
Как мы видим свойство Modernzir.cssreflections имеет значение false. Это происходит потому, что Chrome, Safari и Opera – это единственные браузеры, поддерживающие эффекты отражения (это действительно так на момент написания статьи). Вот как мы можем воспроизвести предыдущий пример с помощью JavaScript, добавляя вручную классы reflection и no-reflection к нашему элементу <h2 id=»reflection»>:
|
1 2 3 4 5 6 |
var element = document.getElementById('reflection'); if (Modernizr.cssreflections) { element.className = 'reflection'; } else { element.className = 'no-reflection'; } |
Затем прописываем соответствующее оформление в CSS:
|
1 2 3 4 5 6 7 |
.reflection { /* применяем свойство reflection */ } .no-reflection { /* применяем свойство text-shadow */ } |
Определение возможностей с помощью директивы @support
Несомненно, Modernizr является ценным инструментом в арсенале любого фронтенд разработчика. Но разве не было бы лучше иметь возможность воспроизводить тесты Modernizr на чистом CSS? К счастью, у нас есть такая возможность благодаря директиве @support. Суть заключается в использовании условных правил, которые позволяют нам применять различные стили в зависимости от браузерной поддержки. Это работает также как и медиа-запросы. И да, помимо CSS версии, данная возможность есть и в JavaScript.
Готовы взглянуть на это поближе?
Определение через CSS
Для определения возможностей в вашем CSS вам нужно использовать правила @supports и @supports not. Синтаксис выглядит вот так:
|
1 2 3 4 5 6 7 |
@supports(test condition) { /* применяем правила */ } @supports not(test condition) { /* применяем правила */ } |
В условии содержатся пары свойство: значение тех возможностей, которые вы хотите протестировать. Браузеры, поддерживающие определенные возможности, будут применять заданные стилевые правила, которые мы укажем в правиле @supports. В противном случае будут применяться стили из правила @supports not.
С помощью логических операторов AND и/или OR мы можем создать сложные тесты. Однако, следует помнить, что данные операторы должны отделяться круглыми скобками.
Давайте рассмотрим два примера. Как мы уже знаем, наш HTML код очень простой! Это просто элемент h2. В первом примере мы используем свойство background-color, чтобы определить фоновый цвет для элемента body. Чтобы было немного интереснее, мы также создадим CSS переменную. Браузерную поддержку можно разбить на следующие категории:
Браузеры, поддерживающие директиву @support и CSS переменные (в настоящее время только Firefox 31+).
Браузеры, поддерживающие директиву @support, но не поддерживающие CSS переменные.
Браузеры, не поддерживающие ни директиву @support, ни CSS переменные.
В зависимости от обстоятельств элемент body будет иметь разный фоновый цвет. В результате у нас получится следующий CSS код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { --bg-color: #98FB98; background-color: khaki; } @supports (background-color: var(--bg-color)) { body { background-color: var(--bg-color); } } @supports not(background-color: var(--bg-color)) { body { background-color: tomato; } } |
Например, в Safari, который относится к третьей категории браузеров, наш элемент будет выглядеть вот так:
Затем в Chrome, который поддерживает только директиву @support и значит относится ко второй категории, наш элемент выглядит вот так:
И наконец в Firefox, который относится к первой категории, наш элемент выглядит вот так:
Другой пример
В данном случае мы расширим наше тестовое условие и допишем второе правило. Если быть точнее, то сейчас мы уже отбираем браузеры, которые поддерживают не только эффекты отражения, но еще и эффект обводки текста. Вот соответствующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@supports ((/* условие для эффектов отражения */) and (-webkit-text-stroke: 1px tomato)) { h2 { /* применяем свойство reflection */ -webkit-text-stroke: 1px tomato; } } @supports not ((/* условие для эффектов отражения */) and (/* условие для эффектов обводки текста */)) { h2 { /* применяем свойство text-shadow */ } } |
Например, браузеры (на момент написания статьи к таковым относится только Chrome 28+), которые поддерживают директиву @support, эффекты отражения и эффекты обводки текста, отобразят элемент h2 следующим образом:
Определение через JavaScript
Механизм работы директивы @support для определения возможностей можно реализовать и через JavaScript. Для этого необходимо использовать метод CSS.supports. Вот возможные параметры данного метода:
|
1 2 3 |
CSS.supports(propertyName, propertyValue) CSS.supports(test condition) |
Данный метод возвращает значение типа Boolean , которое указывает, поддерживает ли браузер нужные возможности или нет. Наконец, нам нужно обернуть параметры в одинарные или двойные кавычки. Используя JavaScript версию, последний пример можно представить следующим образом:
|
1 2 3 4 5 6 7 8 |
var result = CSS.supports('(/* условие для эффектов отражения */) and (/* условие для эффектов обводки текста */)'); var element = document.getElementById('reflection'); if(result) { element.className = 'reflection'; } else { element.className = 'no-reflection'; } |
Браузерная поддержка
В целом, браузеры хорошо поддерживают директиву @support. На момент написания статьи Firefox (22+), Chrome (28+) и Opera (12.1+) полностью поддерживают данный CSS функционал. Хочется надеяться, что в последующих версиях браузер IE также научится понимать условные правила (разработчики браузера работают над этим!).
Полифиллы
Если вы хотите использовать директиву @support в ваших проектах, но вас не устраивает текущая браузерная поддержка, вы можете воспользоваться следующими полезными полифиллами:
Заключение
В данной обучающей статье я рассказал о двух методах, обеспечивающих надежную кроссбраузерную обработку возможностей. Воспользовавшись одним из данных методов, вы поймете всю выгоду проектирования сайтов и приложений под конкретные возможности, а не браузеры. На текущий момент Modernizr является стабильным решением, но повсеместное использование директивы @support уже не за горами, поэтому выбор за вами!
Автор: George Martsoukos
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
