Проверяем браузер на поддержку определённого CSS свойства
Автор — Юрий Спивак
Поддержка браузерами того или иного CSS свойства до сих пор остаётся одной из основных проблем веб-вёрстки, так как корректировка под различные браузера, особенно старые, занимает очень много времени и портит настроение. Поэтому многие верстальщики ограничиваются поддержкой IE с помощью условных комментариев, а некоторые вообще забивают на старые браузера и блокируют доступ к своему сайту со старых версий выводя сообщение типа «Ваш браузер устарел…».
В этой статье я расскажу, как можно проверить, поддерживает ли браузер то или иное CSS свойство.
CSS проверка на поддержку
Долгое время проверить поддержку с помощью одного CSS было невозможно. Но в 2013 году Firefox, Chrome и Opera «объявили» о поддержки специальной директивы под названием @supports и её JavaScript аналога — функции CSS.supports() , про которую я буду писать ниже. С помощью этой директивы, можно проверить браузер на поддержку указанного CSS свойства.
Общий вид директивы
Пример использования
Если браузер поддерживает свойство display: flex , то он запустит свойства из директивы.
Ключевое слово not
С помощью ключевого слова not, можно осуществить проверку на отсутствие поддержки какого-либо свойства.
Если браузер не поддерживает display: flex , то он запустит свойства из директивы
Ключевое слово or
Используя ключевое слово or, можно осуществить проверку на поддержку хотя бы одного свойства из указанных.
Если браузер поддерживает display: flex или display: -webkit-flex , то он запустит свойства из директивы
Ключевое слово and
Если указать ключевое слово and, то можно проверить поддержку браузером двух или более свойств сразу.
Если браузер поддерживает display: flex и display: -webkit-flex , то он запустит свойства из директивы
Множественные проверки и условия
Если браузер поддерживает display: flex или display: -webkit-flex , и flex-wrap: wrap , то он запустит свойства из директивы
Примечание: директива @supports достаточно новая и IE её не поддерживает.
JavaScript проверка на поддержку
Есть четыре варианта на поддержку браузером CSS свойства с помощью JavaScript, про которые я знаю.
-
С помощью функции CSS.supports() , про которую я упоминал выше.Технология работы функции почти не отличается от работы директивы. Отличие состоит в том, что функция CSS.supports() возвращает true , если свойство поддерживается, и false — если нет.Есть два варианта использования функции. Первый включает передачу двух аргументов — свойства и его значения:Если браузер поддерживает display: flex , то скрипт вернёт true .
Если браузер поддерживает display: flex или display: -webkit-flex , и flex-wrap: wrap , то скрипт вернёт true .
Примечание: так же, как и директива @supports , эта функция новая и IE её не поддерживает.
Примечание: если вы проверяете поддержку свойства в старом браузере, через эмулятор современного, то данный метод будем показывать true на значениях, которые не поддерживаются.
Это происходит из за того, что хоть вы и эмулируете старую версию, но браузер, через который вы это делаете, знает это значение CSS свойства и может применить.
Определения поддержки браузером того или иного CSS свойства позволяет более детально подстроить сайт под разные браузера и их версии. Ещё нужно помнить: чем меньше CSS кода мы используем в проекте, тем меньше мороки будет с корректировкой.
На этом закончу статью. Я рассказал про все варианты проверки, про которые знал. Если вы знаете ещё варианты — пишите про них в комментариях.
Frontender Magazine
Директивы — это конструкции, которая позволяет создавать в CSS инструкции для изменения отображения либо поведения элементов страницы. Директива начинается со знака @ , за которым следует одно из служебных слов. Это общий синтаксис, которому следуют все директивы.
Обычные правила
Такие директивы следуют стандартному синтаксису:
@charset
Эта директива определяет кодировку, используемую браузером. Это очень удобно, если таблица стилей содержит символы, не входящие в ASCII (например UTF-8). Обратите внимание, что кодировка указанная в HTTP-заголовке переопределяет любые @charset , заданные в вашей таблице стилей.
@import
Эта директива сообщает таблице стилей о необходимости запросить и включить в себя внешний CSS-файл, причём содержимое этого файла будет добавлено непосредственно в то место, где находится @import .
Учитывая популярность CSS-препроцессоров поддерживающих @import , нужно помнить о том, что препроцессоры трактуют правило иначе, чем это делает обычный CSS. Препроцессор запрашивает все импортируемые файлы, обрабатывает их и отдаёт на выходе один CSS-файл. Обычный CSS обрабатывает каждый @import как отдельный HTTP-запрос для каждого отдельного файла.
@namespace
Эта директива особенно полезна для применения CSS к XML HTML (XHTML), с его помощью XHTML-элементы могут быть использованы как CSS-селекторы.
Вложенные правила
Вложенные директивы содержат подмножество дополнительных объявлений, которые могут служить условиями для конкретных ситуаций.
@document
Эта директива определяет условия для стилей, которые применяются к конкретной странице. Например, можно задать URL страницы и затем настроить стили именно для неё. На других страницах эти стили будут проигнорированы.
На момент написания статьи поддержка @document была довольно скудной:
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Нет | Нет | -moz | Нет | Нет | Нет | Нет |
@font-face
Эта директива позволяет загружать пользовательские шрифты для использования на странице. Такие шрифты по-разному поддерживаются браузерами, однако директива поддерживает разные условия, которые позволяют подключать и использовать эти шрифты.
@keyframes
Эта директива является базовым для создания покадровой анимации, позволяя задавать начальные, конечные и промежуточные шаги CSS-анимации.
@media
В этой директиве находятся условные выражения, применяющие определённые стили в зависимости от характеристик экрана. Эти выражения могут содержать, например, размеры экрана, что может пригодиться для создания адаптивных стилей для различных устройств:
Эта же директива позволит добавлять стили только при печати документа:
Эта директива определяет стили для отдельных страниц при выводе на печать. Например, она содержит специальные псевдоэлементы для обращения к первой ( :first ), а также к левой ( :left ) и правой ( :right ) страницам при печати двух страниц на листе.
@supports
Эта директива определяет поддерживает ли браузер те или иные возможности, и, если поддерживает, применяет к элементам заданные стили. Как Modernizr, но заточенный на проверку CSS-свойств.
К сожалению, @supports не очень хорошо поддерживается браузерами:
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
28+ | Нет | 31+ | 12.1+ | Edge | 4.4+ | Нет |
Подводя итоги
Директивы позволяют делать с помощью CSS классные и безумные вещи. И хотя представленные здесь примеры демонстрируют некоторые базовые возможности, мы можем видеть как их можно использовать для создания стилей для самых разных условий, позволяя разрабатывать удобные интерфейсы и варианты взаимодействия в зависимости от разных сценариев.
© 2013 Frontender Magazine
Кроме материалов, опубликованных под лицензией Creative Commons
Определение поддержки браузером конкретных свойств CSS с помощью правила @supports
5 января 2020 | Опубликовано в css | 1 Комментарий »
Так как браузеры сами решают, какие свойства поддерживать, веб-разработчикам часто нужно узнать, поддерживает ли браузер конкретные свойства, после чего заполнить пробел с помощью Polyfills (пломб, по смыслу), если нужно. Широко применяется способ решения такой задачи с помощью библиотеки JavaScript Modernizr, но это можно сделать и используя только CSS.
В черновике W3C есть новое правило, которое называется @supports. В этом уроке мы покажем, как работает это правило для определения поддержки браузером конкретных свойств с помощью CSS.
Использование правила @supports
В отличие от библиотеки JavaScript Modernizr, правилу @supports для работы нужно свойство и заданное значение. Например, нам нужно применить сетку CSS3 только в браузерах, которые ее поддерживают. Это можно написать так:
Правила CSS внутри правила @support применятся, только если условие будет выполнено. В примере выше правила выполнятся, если браузер поддерживает отображение сеткой. В ином случае браузер применит другие подходящие свойства, находящиеся вне правила @support.
Смешанные условия
Более того, можно совмещать несколько условий с помощью логических элементов «и», «или», «не». Например, нужно применить правила, только если браузер отвечает следующим условиям:
- Поддерживает или сетки CSS3, или Flexbox CSS3.
- Поддерживает столбцы CSS3.
В этом случае можно написать, например, такие условия:
Обратите внимание, что если в условии есть несколько логических элементов, то каждый из них должен быть помещен в круглые скобки, как показано выше.
Способ написания условий, показанный ниже, неверен, и браузер не поймет эти условия:
Заключение
Это отличное правило, и его применение было бы полезно в некоторых случаях.
Сейчас поддержка правила @supports у последних версий браузеров стала весьма широкой. Современные версии браузеров Firefox, Chrome, Opera и их мобильные версии поддерживают это правило, недавно его стал поддерживать и браузер Safari, в том числе и его мобильная версия. Все версии Internet Explorer, включая 11, не поддерживают правило @supports. Но, возможно, этим как раз можно воспользоваться, ведь нередко для Internet Explorer нужны другие значения свойств или даже другие свойства, чем для остальных браузеров.
За дополнительной информацией можно обратиться к следующим источникам:
Автор урока Thoriq Firdaus
@supports
The @supports CSS at-rule allows you to perform feature detection in the browser right from your style sheet instead of resorting to third-party polyfills, such as Modernizr, for example.
Using @supports , you can perform a test and then execute normal CSS rules placed inside the block depending on whether the test returns true or not.
The @supports rule is a conditional group rule whose condition tests whether the user agent supports CSS property:value pairs. This means that, unlike most JavaScript feature detection tools, the @supports rule requires the property and the value specified. For example, a simple @supports declaration looks like this:
The above example checks whether the browser supports the display property with a value of flex . If it does, that is, if the condition returns true, the style rules declared inside the @supports block will be applied.
The not Keyword
Just like you can check if a feature is supported, you can also check is a feature is not supported, using the not operator. For example, you can combine the above Flexbox support test with another test that provides alternative styles for when Flexbox is not supported.
Multiple Checks with Multiple Conditions
You can check for multiple feature support in a @supports rule using the and and or operators.
For example, if a certain property is supported with prefixes in some browsers and unprefixed in others, you may want to check for support for any of the prefixed and unprefixed versions. The following example checks for support for Flexbox, including checking for support for vendor-prefixed versions of it.
You can also check for support for two features in a browser using the and keyword. For example, you may want to check for browser support for CSS 3D transforms and transitions to create some kind of three-dimensional effect:
You can also combine and and or keywords in one @supports declaration to do multiple feature detections.
To avoid confusion caused by precedence rules, you are now allowed to combine and , or , and not without using layers of parentheses. This means that the following declaration is invalid:
You’re allowed to combine conditionals using parentheses, just like you would with other programming languages, to make precedence clear. So, the above example becomes valid of you do this:
Trivia & Notes
Whitespace is required after a not and on both sides of an and or or .
The declaration being tested must always occur within parentheses, when it is the only thing in the expression. For example, the following declaration is invalid:
The @supports syntax allows extra parentheses when they are not needed. This flexibility is sometimes useful (for example, when commenting out parts of an expression) and may also be useful for authoring tools. For example, you may write:
If you combine the not operator with the other operators, there is no need to enclose the not between two parenthesis when at the top level. Parentheses are required, however, if it is not the first condition in the declaration.
Official Syntax
Where the support conditions are a set of one or more property:value pairs to be tested. When combining operators, parentheses must be used to make precedence clear.
Examples
The @supports rule can be used in a progressive enhancement workflow to provide extra styles for browsers that supports certain features or CSS properties.
For example, you can provide certain graphical effects to images on a page if the browser supports the filter property. You could then provide normal effect-less images for non-supporting browsers, and apply image filter effects in browsers than do support it:
Browser Support
CSS Feature Queries
CSS Feature Queries allow authors to condition rules based on whether particular property declarations are supported in CSS using the @supports at rule.
CSS @supports
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn’t been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we do check for CSS property support with JavaScript which leads to brief flashes of content, hopeful code and support, and other problems. Firefox, Chrome, and Opera have just recently added support for CSS @supports (CSS) and CSS.supports (JavaScript) to detect browser support for a given style directive. Let’s see how it works!
CSS @supports
CSS @supports directives go in your CSS code just as @media queries do:
CSS @supports allows developers to check style support in a number of different ways.
Basic Property Checks
You can perform basic property and value checks:
This is the most basic usage of @supports .
not Keyword
@supports can be paired with a ‘not’ keyword to check for no support:
Multiple Checks and Conditionals
Multiple CSS property checks can be made via ‘or’ and ‘and’ chaining:
You can chain multiple multiple conditionals with parens, just as you can in most other programming languages:
The @supports structure’s conditional pattern matches that of @media ‘s conditional pattern.
JavaScript CSS.supports
The JavaScript counterpart to CSS @supports is window. CSS.supports . The CSS.supports spec provides two methods of usage. The first method of usage includes providing two arguments: one for the property and another for the value:
The second usage method includes simply providing the entire string to be parsed:
Great that you can check CSS support via either method — it avoids property checking on transient nodes and string-building to check for support.
Before using the JavaScript method of supports, it’s important to detect the feature first. Opera uses a different method name so that throws things for a bit:
@supports Usage
In most cases, the best usage of @supports is setting an older set of styles as backup and then canceling those styles out and enhancing if a given property is supported. One brilliant use case for @supports is layout. Some edge browsers are now providing support for flexbox while others lag behind. In this case, you could code:
Other good uses cases will pop up as developers have more time to experiment with the new @supports feature.
Enabling @supports
If you want to dabble with new features like @support , you should invest some time installing edge browsers like Canary, Firefox Nightly, and Opera Next. Opera 12.1, WebKit Nightly, and Firefox Nightly all support @supports . Old versions of Firefox provide support after [ layout.CSS.supports-rule.enabled ] is enabled.
@supports is a welcomed addition to the CSS and JavaScript specs. Feature detection is our number one best practice for feature support and @supports provides a lower level layer than the hacks we’ve been using the past few years. I suspect we’ll see loads of @support directives over the next few years as flexbox becomes more useful and widely used!
Совет: Добавляем @supports в CSS файлы ваших демо на CodePen
Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
Когда ваши демо-версии в CodePen зависят от передовых CSS, будет не плохо предупредить людей. Покажем уведомление, если браузеры не поддерживают наши демки, используя правило @support , чтобы сделать удобный многоразовый объект CodePen.
Конечный результат
Вот то, что мы хотим сделать; многоразовое уведомление, чтобы показать неподдерживаемый CSS. Он будет храниться почти полностью в своем собственном pen’е, который мы можем добавить к другим демкам через ссылку External CSS:
Вы увидите, что мы используем это в уроках по CSS на Tuts+, например в этих:
Better CSS Drop Caps With “initial-letter”
Having Fun With Tomorrow’s CSS: Backdrop Filters
Правило @supports
CSS @supports существует уже несколько лет и располагает довольно приличной поддержкой браузеров. Это позволяет нам запрашивать функции и применять CSS только в том случае, если браузер поддерживает определенные свойства. Это предотвращает от применения стилей только на половину и даже позволяет нам вывести предупреждение, если мы его укажем.
Чтобы это заработало, нужно просто обернуть стили в условие, вот так:
Уведомления
Давайте сделаем пару быстрых уведомлений:
Мы добавим текстовое сообщение через псевдо-элемент, чтобы мы могли управлять им из одного места. Эти надписи в конечном счете будут использоваться во многих демках, поэтому хранение содержания отдельно означает, что мы можем изменить их все за один раз.
не поддерживаются. Давайте добавим условие для этого::
«если initial-letter или -webkit-initial-letter поддерживаются, не отображать уведомление .support-initial-letter»..
@supports в своих pen; Джен Симмонс делает это, Рэйчел Эндрю делает это, и мы это делаем. Вытягивание стилей уведомлений во внешний pen — это отличный способ управлять такими вещами, не захламляя разметку. Обновляйте сообщения, добавляйте новые свойства CSS, применяйте временный стиль, сходите с ума! Сообщите нам, как вы используете @supports в комментариях..
One more step
Please complete the security check to access codepen.io
Why do I have to complete a CAPTCHA?
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 533ff4ae9d408e23 • Your IP : 188.64.174.135 • Performance & security by Cloudflare
CSS @supports
Мне бы хотелось, чтобы новые CSS свойства поддерживались лучше.
Список можно продолжать. Однако среди них есть одно свойство, для которого я уже не могу дождаться поддержки во всех или хотя бы в текущих версиях основных браузеров. Это @supports.
Магия @supports
@supports — это условная группа правил, как media queries, но для проверки, поддерживает ли браузер определенные CSS свойства. Так же как и в media queries, если утверждение получает значение true, то правила внутри группы применяются.
@supports предлагает 4 варианта проверки:
1. Проверка одной пары
Самый простой способ использования – это проверка одной пары «свойство-значение». Например, если мы хотим проверить, поддерживается ли новый синтаксис flexbox, мы можем написать:
Для таких браузеров как Internet Explorer 9 все, что внутри блока, будет проигнорировано.
2. Проверка нескольких пар
Иногда нужно использовать комбинацию свойств. С помощью правила «and», можно проверить на поддержку сразу несколько пар «свойство-значение».
3. Проверка одной из нескольких пар
Так же мы можем узнать, поддерживается ли хоть одна пара из списка. Это может быть полезно, если нужно определить, какая версия свойства, с префиксом или без, поддерживается браузером.
4. Не поддерживается
Знать, поддерживается ли свойство – очень полезно, но иногда знать, что оно не поддерживается – еще полезнее. Для этого можно использовать правило «not»:
Мы даже можем определить, что одно свойство поддерживается, а другое – нет. Пример для браузеров, поддерживающих только старый синтаксис flexbox:
Почему @supports?
Причина, по которой я хочу это свойство больше, чем все остальные прикольные\безумные\крутые CSS свойства в том, что на данный момент я не могу использовать все эти прикольные\безумные\крутые свойства.
Если браузер, такой как IE или Opera Mini, не поддерживает свойство, то я просто не могу его применять, так как большинство моих сайтов рассчитаны на аудиторию, которая использует эти браузеры.
@supports позволит мне получить и то и другое – я смогу использовать крутые, новые штуки в браузерах, которые их поддерживают, и в то же время писать старый, проверенный код для всех остальных браузеров.
Поддержка @supports
На данный момент @supports поддерживается на 80%.
Can I Use css-featurequeries? Data on support for the css-featurequeries feature across the major browsers from caniuse.com.
Не смотря на то, что @supports уже поддерживается большинством браузеров, я не могу его использовать, пока он не появится во всех браузерах хотя бы в текущих версиях. Если он работает только в некоторых браузерах, то это как изъян. Наверное, это мое открытое письмо, умоляющее браузеры поддержать @supports. В тот день, когда я увижу, что все текущие версии основных браузеров поддерживают его, я буду самой счастливой.
Определение поддержки CSS свойств при помощью @supports CSS
Определение поддержки CSS свойств при помощью @supports CSS
Ответить Новая тема |