Определение поддержки свойств с помощью @supports CSS
От автора: С момента своего возникновения браузерная поддержка CSS3 была непостоянной, выполнение поддержки свойств не просто хорошая идея, а лучшая практика.
Хотя такая проверка обычно делается с помощью JavaScript, было бы идеально проводить ее внутри CSS, и вот где @supports выходит на первый план. Правило CSS @supports дает нам простое и чистое определение возможностей браузера, которое не полагается на другие техники, и работает даже при отключенном JavaScript’е.
Браузерная поддержка
К сожалению, как в случае со многими классными приемами, у этого правила имеется проблема, так как старые браузеры его не поддерживают, и даже некоторые новые версии ее лишены. Во время написания статьи его поддерживают Chrome, Opera, мобильный и десктоповый Firefox, а последние версии Safari и Internet Explorer – нет. Альтернативным вариантом создания поддержки правила будет применение «костылей», но это означает использование JavaScript’а.
Правило @supports
В CSS хорошо то, что он обеспечивает отличную деградацию, что означает, если что-то не поддерживается, то оно не разрушит вашей страницы, а просто будет проигнорировано.
Идея, стоящая за @supports, состоит в продвижении еще на шаг вперед. Она дает вам возможность написать альтернативный код, который будет читаться, если предпочтительные свойства не поддерживаются в отдельном браузере.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееПри создании нового правила @supports вы увидите, что код сильно похож на медиазапросы; даже операторы те же самые. Получится что-то вроде этого:
@supports(property: value) { /* Стили, если условие соответствует */ }
@supports(property: value) { /* Стили, если условие соответствует */ } |
Если нужно протестировать, например, поддерживает ли браузер контур текста, вы примените следующий простой код:
@supports(-webkit-text-stroke: 1px black) { h2 { -webkit-text-stroke: 1px black; } }
@supports(-webkit-text-stroke: 1px black) { h2 { -webkit-text-stroke: 1px black; } } |
Браузер, поддерживающий контур текста, прочтет, что находится внутри скобок, а тот, который не поддерживает, даже не попытается этого сделать. Одним из применимых правилом @supports операторов является not. Он проверяет, не поддерживает ли браузер определенное свойство, а альтернативный код заключен в скобки. На примере контура – вы можете применить его для добавления тени текста, которая создаст похожий вид:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее@supports not (-webkit-text-stroke: 1px black) { h2 { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } }
@supports not (-webkit-text-stroke: 1px black) { h2 { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } } |
Применение здесь оператора not означает, что код внутри скобок будет прочтен, только если предпочтительное свойство не поддерживается. Он работает как else-утверждение для условного предложения без оператора. Оператор or дает возможность тестировать более одного условия одновременно, и возвратит true при любом соответствии. Это очень удобно для свойств, применяющих разные вендорные префиксы для различных браузеров. Например, для проверки поддержки перехода transition можно использовать следующее:
@supports(transition: width 500ms) or (-webkit-transition: width 500ms) { div { transition: width 500ms; transition: width 500ms; } }
@supports(transition: width 500ms) or (-webkit-transition: width 500ms) { div { transition: width 500ms; transition: width 500ms; } } |
Многим свойствам CSS требуются дополнительные вендорные префиксы и оператор or позволяет проверить их одновременно. Требуется всего один возврат true, чтобы код внутри скобок был прочтен.
Последний используемый @supports оператор – это and, который тестирует более одного условия одновременно, возвращая true, только если все они соответствуют. Синтаксис похож на or:
@supports(border-radius: 5px) and (box-shadow: 1px 1px 3px #000) { div { border-radius: 5px; box-shadow: 1px 1px 3px #000; } }
@supports(border-radius: 5px) and (box-shadow: 1px 1px 3px #000) { div { border-radius: 5px; box-shadow: 1px 1px 3px #000; } } |
Его вы можете не применять так часто, как остальные, но он окажется полезным для тестирования поддержки множественных свойств.
Финальные размышления
По моему мнению, @supports является великолепным дополнением в спецификацию CSS. Из-за важности браузерной поддержки при создании правил CSS, определение поддерживаемых свойств – жизненно важный этап процесса. Применение для определения CSS вместо надежды на Javascript ускоряет производительность и делает все немного элегантнее.
По иронии судьбы, единственная проблема – это недостаток его собственной поддержки. Однако CSS хорошо деградирует, и если браузер не поддерживает @supports, то просто проигнорирует его и прочтет то, что находится вне скобок. Я уверен, что в свете его полезности мы начнем видеть это правило все чаще.
Автор: Sara Vieira
Источник: http://www.developerdrive.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
СмотретьПоддержка тегов разными спецификациями HTML
В таблице отображена поддержка HTML тегов различными популярными версиями спецификации (DOCTYPE). Это HTML5, HTML 4.01 и XHTML 1.0 Transitional / Strict / Frameset, а также XHTML 1.1.
| Тег | HTML5 | XHTML 1.0 Transitional |
HTML 4.01 Strict XHTML 1.0 Strict |
HTML 4.01 Frameset XHTML 1.0 Frameset |
XHTML 1.1 |
|---|---|---|---|---|---|
| <a> | Да | Да | Да | Да | Да |
| <abbr> | Да | Да | Да | Да | Да |
| <acronym> | Нет | Да | Да | Да | Да |
| <address> | Да | Да | Да | Да | Да |
| <applet> | Нет | Да | Нет | Да | Нет |
| <area> | Да | Да | Да | Да | Нет |
| <article> | Да | Нет | Нет | Нет | Нет |
| <aside> | Да | Нет | Нет | Нет | Нет |
| <audio> | Да | Нет | Нет | Нет | Нет |
| <b> | Да | Да | Да | Да | Да |
| <base> | Да | Да | Да | Да | Да |
| <basefont> | Нет | Да | Нет | Да | Нет |
| <bdi> | Да | Нет | Нет | Нет | Нет |
| <bdo> | Да | Да | Да | Да | Нет |
| <big> | Нет | Да | Да | Да | Да |
| <blockquote> | Да | Да | Да | Да | Да |
| <body> | Да | Да | Да | Да | Да |
| <br> | Да | Да | Да | Да | Да |
| <button> | Да | Да | Да | Да | Да |
| <canvas> | Да | Нет | Нет | Нет | Нет |
| <caption> | Да | Да | Да | Да | Да |
| <center> | Нет | Да | Нет | Да | Нет |
| <cite> | Да | Да | Да | Да | Да |
| <code> | Да | Да | Да | Да | Да |
| <col> | Да | Да | Да | Да | Нет |
| <colgroup> | Да | Да | Да | Да | Нет |
| <datalist> | Да | Нет | Нет | Нет | Нет |
| <dd> | Да | Да | Да | Да | Да |
| <del> | Да | Да | Да | Да | Нет |
| <details> | Да | Нет | Нет | Нет | Нет |
| <dfn> | Да | Да | Да | Да | |
| <dialog> | Да | Нет | Нет | Нет | Нет |
| <dir> | Нет | Да | Нет | Да | Нет |
| <div> | Да | Да | Да | Да | Да |
| <dl> | Да | Да | Да | Да | Да |
| <dt> | Да | Да | Да | Да | Да |
| <em> | Да | Да | Да | Да | Да |
| <embed> | Да | Нет | Нет | Нет | Нет |
| <fieldset> | Да | Да | Да | Да | Да |
| <figcaption> | Да | Нет | Нет | Нет | Нет |
| <figure> | Да | Нет | Нет | Нет | Нет |
| <font> | Нет | Да | Нет | Да | Нет |
| <footer> | Да | Нет | Нет | Нет | Нет |
| <form> | Да | Да | Да | Да | Да |
| <frame> | Нет | Нет | Нет | Да | Нет |
| <frameset> | Нет | Нет | Нет | Да | Нет |
| <h2> to <h6> | Да | Да | Да | Да | Да |
| <head> | Да | Да | Да | Да | Да |
| <header> | Да | Нет | Нет | Нет | Нет |
| <hr> | Да | Да | Да | Да | Да |
| <html> | Да | Да | Да | Да | Да |
| <i> | Да | Да | Да | Да | Да |
| <iframe> | Да | Да | Нет | Да | Нет |
| <img> | Да | Да | Да | Да | Да |
| <input> | Да | Да | Да | Да | Да |
| <ins> | Да | Да | Да | Да | Нет |
| <kbd> | Да | Да | Да | Да | Да |
| <label> | Да | Да | Да | Да | Да |
| <legend> | Да | Да | Да | Да | Да |
| <li> | Да | Да | Да | Да | Да |
| <link> | Да | Да | Да | Да | Да |
| <main> | Да | Нет | Нет | Нет | Нет |
| <map> | Да | Да | Да | Да | Нет |
| <mark> | Да | Нет | Нет | Нет | Нет |
| <menu> | Да | Да | Нет | Да | Нет |
| <menuitem> | Да | Нет | Нет | Нет | Нет |
| <meta> | Да | Да | Да | Да | Да |
| <meter> | Да | Нет | Нет | Нет | Нет |
| <nav> | Да | Нет | Нет | Нет | Нет |
| <noframes> | Нет | Да | Нет | Да | Нет |
| <noscript> | Да | Да | Да | Да | Да |
| <object> | Да | Да | Да | Да | Да |
| <ol> | Да | Да | Да | Да | Да |
| <optgroup> | Да | Да | Да | Да | Да |
| <option> | Да | Да | Да | Да | Да |
| <output> | Да | Нет | Нет | Нет | Нет |
| <p> | Да | Да | Да | Да | Да |
| <param> | Да | Да | Да | Да | Да |
| <pre> | Да | Да | Да | Да | Да |
| <progress> | Да | Нет | Нет | Нет | Нет |
| <q> | Да | Да | Да | Да | Да |
| <rp> | Да | Нет | Нет | Нет | Нет |
| <rt> | Да | Нет | Нет | Нет | Нет |
| <ruby> | Да | Нет | Нет | Нет | Нет |
| <s> | Да | Да | Нет | Да | Нет |
| <samp> | Да | Да | Да | Да | Да |
| <script> | Да | Да | Да | Да | Да |
| <section> | Да | Нет | Нет | Нет | Нет |
| <select> | Да | Да | Да | Да | Да |
| <small> | Да | Да | Да | Да | Да |
| <source> | Да | Нет | Нет | Нет | Нет |
| <span> | Да | Да | Да | Да | Да |
| <strike> | Нет | Да | Нет | Да | Нет |
| <strong> | Да | Да | Да | Да | Да |
| <style> | Да | Да | Да | Да | Да |
| <sub> | Да | Да | Да | Да | Да |
| <summary> | Да | Нет | Нет | Нет | Нет |
| <sup> | Да | Да | Да | Да | Да |
| <table> | Да | Да | Да | Да | Да |
| <tbody> | Да | Да | Да | Да | Нет |
| <td> | Да | Да | Да | Да | Да |
| <textarea> | Да | Да | Да | Да | Да |
| <tfoot> | Да | Да | Да | Да | Нет |
| <th> | Да | Да | Да | Да | Да |
| <thead> | Да | Да | Да | Да | Нет |
| <time> | Да | Нет | Нет | Нет | Нет |
| <title> | Да | Да | Да | Да | Да |
| <tr> | Да | Да | Да | Да | Да |
| <track> | Да | Нет | Нет | Нет | Нет |
| <tt> | Нет | Да | Да | Да | Да |
| <u> | Да | Да | Нет | Да | Нет |
| <ul> | Да | Да | Да | Да | Да |
| <var> | Да | Да | Да | Да | Да |
| <video> | Да | Нет | Нет | Нет | Нет |
| <wbr> | Да | Нет | Нет | Нет | Нет |
@supports | CSS | WebReference
Правило @supports позволяет проверить, поддерживает браузер ту или иную возможность, и на основе этого создать набор стилевых правил. Допустимо создавать комплексные условия с помощью логических операторов not, and, or.
Синтаксис
@supports <условие> {
<стилевые правила>
}Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
В качестве условия в круглых скобках пишется стилевое свойство и его значение. Далее в фигурных скобках идут стилевые правила. Если браузер поддерживает указанное свойство, то применяются заданные стилевые правила, в противном случае они игнорируются.
@supports (transform: perspective(300px)) {
/* Браузер поддерживает свойство transform с функцией perspective() */
}Для проверки того, что свойство не поддерживается применяется логический оператор not, он ставится перед условием.
@supports not (transform: perspective(300px)) {
/* Браузер НЕ поддерживает свойство transform с функцией perspective() */
}Объединить несколько условий можно через логический оператор and. Если хотя бы одно из условий не поддерживается, то стилевые правила не применяются.
@supports (transform-origin: 50% 100%) and (transform: perspective(300px)) {
/* Браузер одновременно поддерживает свойства transform-origin И
transform с функцией perspective() */
}Для выбора одного из условий используется логический оператор or. Если поддерживается хотя бы одно из условий, то применяются стилевые правила.
@supports (perspective: 300px) or (transform: perspective(300px)) {
/* Браузер поддерживает свойство perspective ИЛИ
свойство transform с функцией perspective() */
}Пример
<!DOCTYPE html> <html> <head> <title>@supports</title> <meta charset=»utf-8″> <style> @supports (display: flex) { .no { display: none; } } @supports not (display: flex) { .yes { display: none; } } </style> </head> <body> <p>Ваш браузер поддерживает display: flex.</p> <p>Ваш браузер не поддерживает display: flex.</p> </body> </html>
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич
Как узнать поддерживает ли браузер HTML/CSS свойства?
Частенько бывает, что необходимо уточнить, какой процент браузеров поддерживает то или иное CSS свойство или HTML элемент. Дать ответ в такой ситуации поможет отличный online сервис.
Знакомьтесь – мощный онлайн помощник, в вопросе поддержки браузерами CSS/CSS3 свойств и HTML/HTML5 элементов:
Как узнать поддерживает ли браузер HTML/CSS свойство?
Узнать поддерживает браузер нужное вам свойство – очень просто, достаточно вбить его в поиск:
В скрине выше я вбил тег HTML5 article и мгновенно получил график поддержки данного тега, разными версиями браузеров. Все наглядно и очень просто 🙂
Обратите внимание на настройки и возможности
У этого сервиса есть очень полезные настройки:
1. Отсеять браузеры по % использования, т.е. если браузером пользуются менее 1% людей, вы можете не учитывать его особенности при разработке своего проекта.
2. Очень полезная опция по выбору региона, так вы можете узнать процент людей, браузеры которых поддерживают выбранное вами CSS свойство или HTML элемент.
3. Также вы настроить набор браузеров, поддержка которых вас интересует.
Узнать поддержку CSS/CSS3 свойств
Используя все тот же поиск вы можете узнать какие браузеры поддерживаю введенное CSS/CSS3 свойство, увидеть статус работы над этим свойством и в какой версии языка CSS оно было введено.
Узнать % поддержку CSS/CSS3 и HTML/HTML5 определенной версией браузера в Вашем регионе
Изменив вид на Usage relative вы можете просмотреть поддержку индивидуально по каждой версии браузера и посмотреть процент людей который им пользуется в вашем регионе, тем самым определится стоит ли использовать это свойство/элемент в своем проекте или подождать пока процент поддержки увеличится.
Сравнение браузеров между собой
На этом сайте можно провести сравнение поддержки браузерами разных свойств, например вот так отличаются версии InternetExplorer`a между собой:
