От автора: во время работы над проектом Juju GUI, просматривая пул запросов, я обнаружил, что css свойство box-sizing написано без вендорных префиксов. И я подумал, что следует проверить, а нужны ли они перед тем, как обращаться в пул для их добавления. В поисках я был приятно удивлен, что существует гораздо больше свойств с полной поддержкой, чем я думал. Я проштудировал сайт Can I use и открыл для себя пару очень интересных вещей.
filter: sepia(1); — поддержка в браузерах 78%
CSS фильтры можно использовать для добавления эффекта размытия, оттенков серого, увеличения яркости, контрастности и оттенков. Помню еще пару лет назад меня просили создать эффект размытия как отдельный элемент, перекрывающий контент страницы. CSS в тот раз мне не помог, так как размытие не поддерживалось ни в одном браузере. И я пошел по кривой дорожке хакерства и сделал текст прозрачным, добавил ему тень и через JavaScript заменил все обычные изображения на размытые. Способ сработал, но после этого мне нужен был душ.
Я был шокирован, когда узнал, что сегодня фильтры поддерживаются 78% браузеров, а точнее всеми кроме Edge, IE и Opera Mini. Т.е. можно было бы написать следующее:
|
1 2 3 4 5 6 7 8 |
img { transition: -webkit-filter .5s; -webkit-filter: blur(0); } .overlay-active img { -webkit-filter: blur(1); } |
Хотя этого мало для всех браузеров, уже можно отойти от грязных трюков и воспользоваться техникой прогрессивного улучшения. К тому же, ничего страшного, если пользователи IE увидят просто альфа прозрачный слой, а не размытый.
CSS3 селекторы – поддержка в браузерах 97.73%
CSS3 селекторы ознаменовали новую эру возможностей в CSS и дали целую кучу новых методов. Самые интересные селекторы приведены ниже. [foo^=»bar»], символ ^ это регулярное выражение, которое означает, что будут выбираться атрибуты, начинающиеся на «bar». Простой пример использования:
|
1 2 3 4 |
a[href^="http"] { background: url(external-icon.svg) no-repeat; padding-left: 10px; } |
Мы выбираем все ссылки на сторонние сайты и автоматически добавляем к ним небольшую иконку. [foo$=»bar»], похожее регулярное выражение, только в этом случае рассматривается конец строки.
|
1 2 3 |
a[href$=".pdf"]:after { content: "(PDF)"; } |
В примере выбираются ссылки на PDF файлы и вставляется подпись «PDF», чтобы пользователь понимал, куда ведет эта ссылка. :nth-child() выбирает элементы по их появлению в последовательности. К примеру:
|
1 2 3 |
li:nth-child(n2) { background-color: light-grey; } |
Будут выбраны каждый второй элемент, к которым применится светло-серый фон. Можно использовать и odd, но я хотел показать пример с использованием именно nth. :empty выбирает любой пустой элемент, который не содержит в себе ничего, даже HTML комментариев. Подходит:
|
1 |
<div></div> |
Не подходит:
|
1 |
<div> </div> |
Псевдокласс :empty может быть полезен при скрытии пустых элементов с паддингом, которые могут сдвинуть контент. Также прячется рамка пустых элементов списка. :not() – селектор отрицания. Элемент выбирается по параметрам. Если условие равно false, то стили применяются.
|
1 2 3 |
.menu:not(.is-hidden) { // стили } |
foo ~ bar – комбинатор. Работает по принципу foo + bar, но менее строгий. В методе с + будет выбран только первый bar после foo. А в методе с ~ будут выбраны все bar после foo.
|
1 2 3 |
h2 ~ p { margin-top: 1em; } |
Вы, скорее всего, были под сильным впечатлением, как и я, что эти селекторы плохо поддерживались. Возможно, вы думали, что для их использования потребуется напрячься немного больше обычного и воспользоваться полифилами или техникой прогрессивного улучшения. Однако я был удивлен, когда узнал, что CSS3 селекторы на 97%73% поддерживаются во всех браузерах, даже в IE8 и выше.
Calc() – поддержка в браузерах 80.75%
Это одна из моих любимых новых функций в CSS. С помощью calc() в CSS можно вычислять математические выражения с разными единицами измерения. К примеру, расположение фоновой иконки справа от поля ввода.
Все мы помним, вы добавляете фоновую иконку и размещаете ее right center. Непыльная работа. Вы показываете готовый дизайн, а заказчик просит вас сдвинуть иконку на 10px вправо от элемента. Иконка идет фоном, и не хочется создавать ради нее отдельный элемент. И вы ставите фон на 90% center. На разных разрешениях данный подход не работает, но тут нам поможет calc!
|
1 2 3 4 |
.search-field { background-position: calc(100% - 10px) center; ... } |
Отличный вариант. Также если вы хотите, чтобы плавающий сайдбар занимал всю высоту экрана кроме хедера, можно написать:
|
1 2 3 |
.sidebar { height: calc(100% - 50px) } |
С такой хорошей поддержкой в 80.75% и отсутствием префиксов пора задуматься над добавлением данной функции в свой арсенал.
CSS анимация – поддержка в браузерах 90.29%
После смерти Flash мы искали, чем заменять Flash анимацию. К нашему счастью CSS анимация появилась довольно быстро. Мне было интересно, но я все же не решался использовать все эти новые функции без подходящего фолбэка. На данный момент CSS анимация может похвастаться поддержкой в 90.29% с префиксом «-webkit-». Можно смело повышать юзабилити ваших UI компонентов. К примеру, анимированные уведомления, привлекающие внимание пользователя.
Если вы хотите оживить ваш сайт или веб-приложение с помощью анимации, можно добавить немного движения в начале уведомления, как в этом простом примере:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.notification-open { -webkit-animation: dropDown .6s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; animation: dropDown .6s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @-webkit-keyframes dropDown { from {-webkit-transform: translate(0,-100px);} to {-webkit-transform: translate(0,25px);} } @keyframes dropDown { from {-webkit-transform: translate(0,-100px);} to {-webkit-transform: translate(0,25px);} } |
Совет: не анимируйте стили позиционирования типа top и margin. Это вызывает перерисовку страницы, и в некоторых случаях заставляет браузер заново вычислять позиции видимых элементов.
@supports – поддержка в браузерах 67.85%
С помощью @supports можно проверить, поддерживается ли свойство или нет, и по этому условию стилизовать элементы. К примеру, правило можно использовать для проверки поддержки flexbox. Если поддержка отсутствует, мы возвращаемся к обтеканиям.
|
1 2 3 4 5 6 7 |
@supports (display: flex) { div { display: flex; } } @supports not (display: flex) { div { float: left; } } |
@supports можно сочетать с ключевым словом not. Один из подводных камней в том, что с помощью данного правила в большинстве случаев мы проверяем старые браузеры на поддержку новейших свойств. А старые браузеры сами по себе не поддерживают такой тип запроса.
На момент написания статьи правило поддерживается на 67.85%. Значение далеко от идеального, но оно явно перекрывает последние версии основных браузеров, что уже хорошо. Данное правило не поддерживается только в IE и Opera Mini. Данное правило также полезно, так как мы теперь можем отказаться от Modernizr.
Flexbox – поддержка в браузерах 95.4%
Об этой функции я ничего не слышал. Да шучу! О данном инструменте говорят в сотнях блогов и на различных конференциях. Отличный инструмент для позиционирования элементов, как горизонтально, так и вертикально. С его помощью можно легко центрировать элементы или задавать элементы одной высоты. Также можно менять порядок, в котором элементы отображаются на странице. Вас когда-нибудь просили поменять порядок изображений и текста секции для маленьких экранов? Меня просили, и flexbox легко с этим справляется.
|
1 2 3 4 5 6 |
@media only min-width(768px) { .row { display: flex; flex-direction: column-reverse; } } |
И все же я опасался использовать данный инструмент для чего-то важного, так как и с другими случаями я не верил в такую высокую поддержку. Flexbox может гордо похвастаться своей поддержкой в 95.4%. Он поддерживается во всех последних браузерах, даже в Opera Mini. Отсутствует поддержка только в IE9 и ниже, но это можно пережить.
3D трансформации – поддержка в браузерах 89.87%
С помощью данной функции можно позиционировать элементы в третьем измерении. Также есть свойство перспективы, с помощью которого можно задать z-index 3D элемента.
Все мы видели удивительной красоты примеры использования 3D на чистом CSS, но уровень поддержки в браузерах меня сильно удивил. С поддержкой в 89.87% для префикса webkit данное свойство уже сегодня можно использовать. Я бы даже предложил не добавлять фолбэк, так как в большинстве случаев функционал 3D элемента будет работать. Быстрый пример – карточка, которая будет крутиться и переворачиваться, если навести на нее мышь.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.card { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); transition: transform 1s; } .card:hover { -webkit-transform: rotateX(180deg) rotateY(180deg); transform: rotateX(180deg) rotateY(180deg); } |
Заключение
Я прочитал много блогов и прослушал еще больше подкастов по front-end разработке, но так и не понял, что нужно было читать документацию свойств на сайте Can I use. Серьезно, снимаю шляпу перед создателями сайта.
Если вы не уверены в поддержке того или иного свойства, Can I use это святой грааль. Рекомендую всем front-end разработчикам прочитать на сайте информацию по всем свойствам, их поддержке и известных проблемах. Места лучше для улучшения навыка в CSS не найти.
Надеюсь, вы видите все те удивительные вещи, которые можно разрабатывать с помощью свойств из этого поста. 2016 год – год, когда можно начать использовать новые свойства и создавать богатый, захватывающий опыт работы с пользователем. Веб-приложение или же обычный сайт, никогда не ждите разрешения работать с новыми свойствами. Просто необходимо понимать уровень поддержки и использовать соответствующий фолбэк. А теперь вперед, пользуйтесь новыми свойствами!
Автор: Anthony Dillon
Источник: //12devsofxmas.co.uk/
Редакция: Команда webformyself.
Комментарии (1)