@supports в CSS - Кодинг, CSS и SQL

Содержание

Проверяем браузер на поддержку определённого 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, про которые я знаю.

Первый включает передачу двух аргументов — свойства и его значения

Если браузер поддерживает 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 классные и безумные вещи. И хотя представленные здесь примеры демонстрируют некоторые базовые возможности, мы можем видеть как их можно использовать для создания стилей для самых разных условий, позволяя разрабатывать удобные интерфейсы и варианты взаимодействия в зависимости от разных сценариев.

Кроме материалов, опубликованных под лицензией 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

От автора: С момента своего возникновения браузерная поддержка CSS3 была непостоянной, выполнение поддержки свойств не просто хорошая идея, а лучшая практика.

Хотя такая проверка обычно делается с помощью JavaScript, было бы идеально проводить ее внутри CSS, и вот где @supports выходит на первый план. Правило CSS @supports дает нам простое и чистое определение возможностей браузера, которое не полагается на другие техники, и работает даже при отключенном JavaScript’е.

Браузерная поддержка

К сожалению, как в случае со многими классными приемами, у этого правила имеется проблема, так как старые браузеры его не поддерживают, и даже некоторые новые версии ее лишены. Во время написания статьи его поддерживают Chrome, Opera, мобильный и десктоповый Firefox, а последние версии Safari и Internet Explorer – нет. Альтернативным вариантом создания поддержки правила будет применение «костылей», но это означает использование JavaScript’а.

Правило @supports

В CSS хорошо то, что он обеспечивает отличную деградацию, что означает, если что-то не поддерживается, то оно не разрушит вашей страницы, а просто будет проигнорировано.

Идея, стоящая за @supports, состоит в продвижении еще на шаг вперед. Она дает вам возможность написать альтернативный код, который будет читаться, если предпочтительные свойства не поддерживаются в отдельном браузере.

При создании нового правила @supports вы увидите, что код сильно похож на медиазапросы; даже операторы те же самые. Получится что-то вроде этого:

php Код: Выделить всё Развернуть @ supports ( property : value ) <
/* Стили, если условие соответствует */
>

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

php Код: Выделить всё Развернуть @ supports (- webkit — text — stroke : 1px black ) <
h1 <
— webkit — text — stroke : 1px black ;
>
>

Браузер, поддерживающий контур текста, прочтет, что находится внутри скобок, а тот, который не поддерживает, даже не попытается этого сделать. Одним из применимых правилом @supports операторов является not. Он проверяет, не поддерживает ли браузер определенное свойство, а альтернативный код заключен в скобки. На примере контура – вы можете применить его для добавления тени текста, которая создаст похожий вид:

php Код: Выделить всё Развернуть @ supports not (- webkit — text — stroke : 1px black ) <
h1 <
text — shadow : — 1px — 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
>
>

Применение здесь оператора not означает, что код внутри скобок будет прочтен, только если предпочтительное свойство не поддерживается. Он работает как else-утверждение для условного предложения без оператора. Оператор or дает возможность тестировать более одного условия одновременно, и возвратит true при любом соответствии. Это очень удобно для свойств, применяющих разные вендорные префиксы для различных браузеров. Например, для проверки поддержки перехода transition можно использовать следующее:

php Код: Выделить всё Развернуть @ supports ( transition : width 500ms ) or (- webkit — transition : width 500ms ) <
div <
transition : width 500ms ;
transition : width 500ms ;
>
>

Многим свойствам CSS требуются дополнительные вендорные префиксы и оператор or позволяет проверить их одновременно. Требуется всего один возврат true, чтобы код внутри скобок был прочтен.

Последний используемый @supports оператор – это and, который тестирует более одного условия одновременно, возвращая true, только если все они соответствуют. Синтаксис похож на or:

php Код: Выделить всё Развернуть @ 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, то просто проигнорирует его и прочтет то, что находится вне скобок. Я уверен, что в свете его полезности мы начнем видеть это правило все чаще.

12 классных функций CSS3, которые вы наконец-то можете использовать

Если вы похожи на меня, то когда вы видите впечатляющий пример новой функциональности CSS3, вам не терпится начать использовать его на ваших веб-сайтах. Конечно, затем вы замечаете, что это доступно только в одном или двух основных браузерах (и никогда среди них нет IE), поэтому чаще всего вы решаете подождать.

У меня для вас хорошие новости: последние версии браузеров реализуют несколько классных функций, которые наконец-то поддерживаются везде, и вы можете начать использовать их прямо сейчас!

Небольшое предостережение: большинство этих функций не работают в старых версиях IE (9 и ниже). Если доля этих браузеров среди ваших посетителей большая, я боюсь, для реализации этих функций вам придётся использовать обходные варианты. Ну а для остальных, вот что могут нам предложить современные браузеры:

1. Анимация и переходы средствами CSS

Анимация средствами CSS наконец-то доступна во всех основных браузерах, даже в IE (начиная с 10 версии). Есть два способа создания анимации в CSS.

Первый очень прост, он осуществляется через анимацию изменений свойств CSS с помощью декларации transition (переход). С помощью переходов вы можете создать эффекты наведения мыши или нажатия кнопки мыши, или вы можете запустить анимацию, изменив стиль элемента с помощью JavaScript. В примере ниже переход осуществляется при наведении мыши на планету, это вынудит ракету приблизиться.

Второй способ определения анимации немного сложнее – он подразумевает описание особых моментов анимации с помощью правила @keyframe . Это позволит вам создать повторяющуюся анимацию, не зависящую от действий пользователя и не запускаемую при помощи Javascript.

Вы ещё много чего можете узнать про анимацию средствами CSS. Я советую начать с этой статьи в Mozilla Developer Network (MDN) . Если вас интересует поддержка браузерами, смотрите эту таблицу совместимости .

2. Расчёт значений с помощью calc()

Другая прекрасная новая особенность CSS – функция calc() . Она позволяет вам производить простые арифметические расчёты в CSS. Вы можете использовать её где угодно, где требуется длина или размер. Что ещё лучше, вы можете свободно смешивать разные единицы, например, проценты и пиксели. Это делает устаревшими множество хаков разметки, которые вы, скорее всего, использовали в прошлом. Вам этого мало? Функция работает в IE9 и выше, без префиксов.

Узнайте подробности о функции calc() здесь или смотрите таблицу совместимости .

3. Улучшенные селекторы

В настоящее время, если вы присваиваете ID элементам только для того, чтобы применить к ним стили, вы, скорее всего, делаете неправильно. CSS 2.1 и CSS 3 представили несколько мощных селекторов, которые могут сделать вашу разметку чище, а ваши таблицы стилей круче.

Следующие селекторы поддерживаются всеми основными браузерами, включая IE9 и выше.

Узнайте подробности об этих селекторах здесь или посмотрите, какие браузеры их поддерживают .

4. Генерация контента и счётчики

Генерация контента – мощный инструмент в руках разработчиков – стала доступной, благодаря псевдо-элементам ::before и ::after . Эта функция позволяет вам использовать меньше кода HTML для достижения тех же результатов.

Это особенно полезно в случаях, когда вам нужны дополнительные тени или другие визуальные элементы, которым бы понадобились дополнительные элементы span или div . В результате вы получите меньший по размеру и семантически правильный код HTML.

CSS3 также даёт псевдо-элементам доступ к счётчикам , которые могут увеличиваться с помощью правила CSS. Они также могут получить доступ к атрибутам родительских элементов, содержащих их. Смотрите код примера ниже.

Генерация контенте поддерживается везде, включая IE9 и выше.

5. Градиенты

Градиенты дают веб-дизайнерам возможность создавать гладкие переходы между цветами без использования изображений. Градиенты CSS также отлично выглядят на retina-дисплеях, потому что они генерируются на лету.

Они могут быть линейными или радиальными, а также могут повторяться. Градиенты были доступны уже в течение некоторого времени, и после нескольких небольших синтаксических изменений в последние несколько месяцев, они наконец-то доступны почти везде, без префиксов!

Смотрите детальное описание здесь , а таблицу совместимости здесь .

6. Шрифты

Можете себе представить, что было время, когда мы были ограничены всего лишь горсткой «web-безопасных» шрифтов и ничем более? Сложно поверить, учитывая, что сегодня у нас есть сервисы, вроде Google Fonts или typekit , которые позволяют вам подключить прекрасные шрифты, просто включив таблицу стилей в код вашей страницы.

Существуют даже шрифты значков, такие как fontawesome , содержащие симпатичные векторные значки вместо букв и цифр. Это всё возможно благодаря правилу @font-face, которое позволяет вам определить имя, характеристики и файлы исходного кода шрифтов, к которым вы затем можете обратиться в ваших объявлениях font/font-family.

Используя небольшие доработки, можно заставить веб-шрифты работать даже в IE6. Два сервиса шрифтов, упомянутые выше, берут эту проблему на себя, так что вам не придётся ничего делать дополнительно.

7. Размер блоков

Самая большая головная боль начинающих в CSS – это блочная модель . У создателей стандартов наверняка были свои причины, но интуитивно не совсем понятно, почему на ширину и высоту элемента влияют заполнения и границы.

Эта небольшая (вредная) особенность ломает разметку и вносит хаос, но наконец-то есть способ восстановить здравый смысл, используя правило box-sizing . Вы можете установить значение в border-box, что заставит элементы вести себя точно так, как вы задумали. Смотрите сами:

Узнайте больше о правиле box-sizing здесь , или смотрите таблицу совместимости .

8. Границы в виде изображений

Свойство border-image позволяет вам отображать нестандартные границы вокруг элементов. Границы содержатся в единственном изображении (спрайте), где каждый регион изображения соответствует определённой части границы. В следующем примере изображение используется в качестве границы.

Для более подробной информации, посмотрите страницу на MDN и эту статью про трюки CSS. Границы в виде изображений поддерживаются во всех основных браузерах и IE11.

9. Правила Media query

Правила Media query абсолютно необходимы, если вы серьёзно занимаетесь веб-дизайном. Они были доступны уже некоторое время, и стоит упомянуть, что они изменили способ создания веб-сайтов.

Раньше вам приходилось создавать обычный веб-сайт, достаточно широкий, чтобы подойти под наименьшее разрешение монитора, используемое в то время; и отдельную мобильную версию.Сайты, которые мы создаём сейчас, отзывчивы: они адаптируются к типу устройства, ориентации экрана и разрешению.

Правила Media query удивительно просты в использовании – всё, что вам нужно, заключить стили CSS в блок с правилом @media . Каждый блок @media активируется, когда соблюдается одно или более условий. Как пример, попробуйте изменить размеры этой страницы . Также в примере ниже попробуйте убрать блок @media и проверить, что изменится.

Правила media query могут содержать проверки разрешения и ориентации экрана устройств, глубину цвета, плотность пикселей и многое другое. Подробности вы найдёте в этой статье , а также смотрите таблицу совместимости .

10. Множественные фоновые изображения

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

Каждое изображение (или слой) по отдельности может быть сдвинуто или анимировано, как иллюстрирует пример ниже (наведите мышь на изображение). Все правила CSS, относящиеся к фону, теперь могут принимать разделённый запятыми список свойств, каждое для определённого фонового изображения:

Дополнительная информация по множественным фоновым изображениям находится здесь . Эта функция широко поддерживается браузерами – все новые версии её поддерживают ( смотрите таблицу ).

11. Колонки CSS

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

Этот процесс безосновательно усложнён и забирает ценное время разработчика от вещей, которые реально важны. К счастью, сейчас существует способ обойти это, используя правило CSS columns :

Это правило широко поддерживается , хотя всё ещё требует префиксов. Места, где контент разделяется на колонки, зависят от поддержки браузером тех или иных правил разбивки и от различий в обработке браузерами пограничных случаев.

12. 3D трансформация средствами CSS

Ничто так не радует глаз, как впечатляющая 3D демонстрация средствами CSS. И хотя применение подобной трансформации вне демонстрации или сайтов-портфолио очень спорно, 3D CSS предлагает мощную функциональность дизайнерам и разработчикам, которая поможет завоевать сердца пользователей, если она грамотно реализована.

Взгляните на код следующего примера:

Этот код сделан на основе нашей формы входа в стиле Apple . Если вы хотите узнать о 3D трансформациях в CSS подробнее, посмотрите эту детальную инструкцию . Если вам не нужна поддержка старых версий IE, остальные браузеры поддерживают её достаточно широко.

Другие методы, достойные упоминания

Существуют и другие запоминающиеся функции, о которых стоило бы упомянуть. Если вы так ещё не сделали, можете прекратить использовать префиксы для свойств border-radius и box-shadow . Также вы теперь можете использовать data-uri как фоновые изображения во всех браузерах. Opacity также поддерживается везде, также как и очень полезное свойство background-size .

Придётся ещё немного подождать поддержки flexbox , @supports , фильтров, и CSS масок, но я думаю, это ожидание окупится!

Данная публикация представляет собой перевод статьи « 12 Awesome CSS3 Features That You Can Finally Start Using » , подготовленной дружной командой проекта Интернет-технологии.ру

Ответить Новая тема