Неожиданные CSS свойства, которые можно использовать уже сейчас

Неожиданные CSS свойства, которые можно использовать уже сейчас

От автора: во время работы над проектом Juju GUI, просматривая пул запросов, я обнаружил, что css свойство box-sizing написано без вендорных префиксов. И я подумал, что следует проверить, а нужны ли они перед тем, как обращаться в пул для их добавления. В поисках я был приятно удивлен, что существует гораздо больше свойств с полной поддержкой, чем я думал. Я проштудировал сайт Can I use и открыл для себя пару очень интересных вещей.

filter: sepia(1); — поддержка в браузерах 78%

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

Я был шокирован, когда узнал, что сегодня фильтры поддерживаются 78% браузеров, а точнее всеми кроме Edge, IE и Opera Mini. Т.е. можно было бы написать следующее:

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». Простой пример использования:

a[href^="http"] {
   background: url(external-icon.svg) no-repeat;
   padding-left: 10px;
}

Мы выбираем все ссылки на сторонние сайты и автоматически добавляем к ним небольшую иконку. [foo$="bar"], похожее регулярное выражение, только в этом случае рассматривается конец строки.

a[href$=".pdf"]:after {
  content: "(PDF)";
}

В примере выбираются ссылки на PDF файлы и вставляется подпись «PDF», чтобы пользователь понимал, куда ведет эта ссылка. :nth-child() выбирает элементы по их появлению в последовательности. К примеру:

li:nth-child(n2) {
  background-color: light-grey;
}

Будут выбраны каждый второй элемент, к которым применится светло-серый фон. Можно использовать и odd, но я хотел показать пример с использованием именно nth. :empty выбирает любой пустой элемент, который не содержит в себе ничего, даже HTML комментариев. Подходит:

<div></div>

Не подходит:

<div> </div>

Псевдокласс :empty может быть полезен при скрытии пустых элементов с паддингом, которые могут сдвинуть контент. Также прячется рамка пустых элементов списка. :not() – селектор отрицания. Элемент выбирается по параметрам. Если условие равно false, то стили применяются.

.menu:not(.is-hidden) {
  // стили
}

foo ~ bar – комбинатор. Работает по принципу foo + bar, но менее строгий. В методе с + будет выбран только первый bar после foo. А в методе с ~ будут выбраны все bar после foo.

h2 ~ p {
  margin-top: 1em;
}

Вы, скорее всего, были под сильным впечатлением, как и я, что эти селекторы плохо поддерживались. Возможно, вы думали, что для их использования потребуется напрячься немного больше обычного и воспользоваться полифилами или техникой прогрессивного улучшения. Однако я был удивлен, когда узнал, что CSS3 селекторы на 97%73% поддерживаются во всех браузерах, даже в IE8 и выше.

Calc() – поддержка в браузерах 80.75%

Это одна из моих любимых новых функций в CSS. С помощью calc() в CSS можно вычислять математические выражения с разными единицами измерения. К примеру, расположение фоновой иконки справа от поля ввода.

Все мы помним, вы добавляете фоновую иконку и размещаете ее right center. Непыльная работа. Вы показываете готовый дизайн, а заказчик просит вас сдвинуть иконку на 10px вправо от элемента. Иконка идет фоном, и не хочется создавать ради нее отдельный элемент. И вы ставите фон на 90% center. На разных разрешениях данный подход не работает, но тут нам поможет calc!

.search-field {
  background-position: calc(100% - 10px) center;
  ...
}

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

.sidebar { 
  height: calc(100% - 50px) 
}

С такой хорошей поддержкой в 80.75% и отсутствием префиксов пора задуматься над добавлением данной функции в свой арсенал.

CSS анимация – поддержка в браузерах 90.29%

После смерти Flash мы искали, чем заменять Flash анимацию. К нашему счастью CSS анимация появилась довольно быстро. Мне было интересно, но я все же не решался использовать все эти новые функции без подходящего фолбэка. На данный момент CSS анимация может похвастаться поддержкой в 90.29% с префиксом «-webkit-». Можно смело повышать юзабилити ваших UI компонентов. К примеру, анимированные уведомления, привлекающие внимание пользователя.

Если вы хотите оживить ваш сайт или веб-приложение с помощью анимации, можно добавить немного движения в начале уведомления, как в этом простом примере:

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

@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 легко с этим справляется.

@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 элемента будет работать. Быстрый пример – карточка, которая будет крутиться и переворачиваться, если навести на нее мышь.

.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

Источник: http://12devsofxmas.co.uk/

Редакция: Команда webformyself.

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Миша

    Интересно! О @supports узнал впервые!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree