Возможности CSS, которые вам понравятся в 2015
- 4 февраля 2015
- 9 мин
- 3 040
Это перевод статьи Рэйчел Эндрю — «CSS You Can Get Excited About In 2015».
CSS постоянно развивается, и с началом года самое время взглянуть на несколько новых функций, с которыми вы сможете экспериментировать.
В этой статье я рассмотрю некоторые новые модули и отдельные возможности CSS, которые уже поддерживаются браузерами. Но пока не все эти функции вы сможете запустить на продакшене, а некоторые доступны только в качестве эксперимента. Несмотря на это, вы найдёте много интересных вещей, с которыми можно поиграться — хоть и только на этапе разработки.
CSS-селекторы четвёртой версии
Спецификация селекторов третьей версии хорошо реализована в браузерах и предоставляет нам такие полезные селекторы, как :nth-child
. Четвёртая же версия даёт нам гораздо больше способов разметить контент при помощи CSS.
Отрицающий псевдокласс not
Селектор :not
появился в третьей версии, но в четвёртой он был обновлён. В третьей спецификации вы можете передать селектор, к которому не должны применяться CSS-свойства. Для того чтобы весь текст, кроме текста с классом .intro
стал полужирным, вы можете использовать следующее правило.
В четвёртой версии вы можете передавать список селекторов через запятую.
Псевдокласс has
Этот псевдокласс принимает список селекторов в качестве аргумента и CSS-свойства будут применяться, если любой из переданного списка селекторов найдёт подходящий элемент. Лучше посмотреть на примере. Здесь каждому элементу a
, который содержит в себе изображение, будет нарисована чёрная рамка:
Во втором примере я совмещаю :has
и :not
и выбираю только те элементы li
, которые не содержат элемент p
:
Псевдокласс совпадения matches
Этот псевдокласс означает, что мы можем применить правила к группе селекторов, например:
Чтобы проверить, поддерживает ли ваш браузер эти селекторы, вы можете использовать css4-selectors.com. Там же вы можете узнать больше о новых селекторах.

Режимы наложения в CSS
Если вы знакомы с режимами наложения в фотошопе, тогда, возможно, вас заинтересует спецификация смешивания и наложения. Эта спецификация позволяет нам применять режимы наложения к фонам и любым HTML-элементам прямо в браузере.
В приведённом ниже CSS у меня есть контейнер с фоновым изображением. Добавляя цвет фона и устанавливая background-blend-mode
в значения hue
и multiply
, я могу применить интересный эффект к изображениям.

background-blend-mode
Свойство mix-blend-mode
позволяет наложить текст поверх изображения. В примере ниже у меня есть заголовок h1
и затем в .box2
я устанавливаю mix-blend-mode: screen
.

mix-blend-mode
Режимы наложения в CSS на удивление хорошо поддерживаются современными браузерами, за исключением Internet Explorer. background-blend-mode
и mix-blend-mode
доступны в Safari и Firefox, в качестве экспериментальной опции в Opera и Chrome. При осторожном использовании это как раз тот вид спецификации, с которым можно поиграться, чтобы усовершенствовать ваш дизайн, при условии, что будет запасной вариант для браузеров не поддерживающих эту возможность.
Если вам требуется более полная поддержка для старых браузеров и вы не уверены, что стоит использовать режимы наложения в продакшене, не забывайте — их можно использовать на этапе разработки, чтобы избежать работы с фотошопом. А когда вы получите итоговые изображения, создайте для продакшена картинки в графическом редакторе, заменив CSS-эффекты.
Узнайте больше об использовании режимов наложения в статье на CSS Tricks, на сайте Adobe и Dev Opera.
Функция calc
Функция calc()
является частью модуля CSS-значений и единиц измерения третьей версии. Она даёт возможность выполнять математические вычисления прямо в CSS.
В качестве простого примера можно использовать calc()
для расположения фонового изображения относительно нижнего правого угла элемента. Чтобы расположить на расстоянии 30px
от верхнего левого угла, вы должны использовать:
Однако, вы не сможете этого сделать относительно правого нижнего угла, если не знаете размеров контейнера. Функция calc()
означает, что вы можете вычесть 30 пикселей из стопроцентной ширины или высоты:
В современных браузерах calc()
хорошо поддерживается, хотя использование для вычисления позиции фона в IE9 приводит к падению браузера.
CSS-хитрости и функция calc()
— забавная статья об использовании calc()
для решения проблем CSS. Вот несколько простых кейсов на CSS Tricks.
CSS-переменные
Возможность использовать переменные в CSS — это значительное преимущество CSS-препроцессоров. В самом простом примере, мы можем сохранить огромное количество времени определив цвета и шрифты, используемые в нашем дизайне, а затем использовать переменные, когда потребуется какой-то конкретный шрифт или цвет. Если мы решим изменить шрифт или цветовую палитру нам надо будет поменять это только в одном месте.
CSS-переменные, описанные в первой версии модуля пользовательские CSS-свойства для каскадных переменных, приносят эту функциональность в CSS.
К сожалению, поддержка браузерами CSS-переменных в настоящее время ограничена Firefox.
Посмотреть больше примеров и узнать подробности вы можете в статье на Mozilla Developer Network.
CSS-исключения
Мы все знакомы с обтеканием в CSS. Самым простым примером может служить обтекание текстом изображения. Но обтекание довольно ограничено, так как плавающий элемент всегда прижимается кверху, и пока мы можем прижимать изображение к левому краю и обтекать его текстом справа и снизу. Не существует способа разместить изображение по центру документа и обтекать его текстом со всех сторон.
Исключения позволяют окружить текстом позиционируемые элементы со всех сторон. Само по себе оно не определяет новый метод позиционирования и может быть использовано только в соединении с другими методами. В приведённом ниже примере я абсолютным позиционированием располагаю элемент, затем определяю его как исключение, задавая свойство wrap-flow
и его значение both
, после чего текст начинает воспринимать позицию элемента и обтекает его со всех сторон.

Поддержка браузерами исключений и wrap-flow: both
сейчас ограничена IE10+, требующим префикс -ms
. Обратите внимание, что исключения до недавнего времени были связаны со спецификацией CSS-фигур, которую я рассмотрю ниже, так что часть информации может пересекаться.
CSS-фигуры
Спецификация по исключениям рассматривает обтекание текстом вокруг прямоугольных объектов. CSS-фигуры предоставляют нам более мощную возможность такую, как обтекание текстом по кривой.
В первой версии спецификации CSS-фигуры определяются новым свойством shape-outside
. Оно может быть использовано на плавающем элементе. В примере ниже я использую shape-outside
чтобы изогнуть текст вокруг обтекаемого изображения.

Фигуры поддерживают Chrome и Safari, это означает, что вы можете начать использовать их для устройств с iOS. Во второй версии спецификации вы сможете придавать форму тексту внутри элементов при помощи свойства shape-inside
, а с этим придёт много интересных возможностей.
Вы можете узнать больше о фигурах в статьях (один и два) на A List Apart.
CSS-сетки
Самую интересную тему я оставил напоследок. Я большой фанат появления спецификации по сеткам с момента первой реализации в Internet Explorer 10. CSS-сетки предоставляют нам способ создавать при помощи CSS структурные сетки и размещать на них наш дизайн.
Сетки дают нам метод для создания структуры, которая не отличается от использования таблиц для разметки. Однако, описывая сетки в CSS, а не в HTML, мы можем создавать макеты, которые могут быть изменены при помощи медиавыражений в зависимости от контекста. Это позволяет разделить порядок элементов в коде от их визуального представления. Для дизайнеров это означает, что вы можете свободно изменять позицию элементов на странице для лучшего представления макета на разных контрольных точках, и не нужно идти на компромисс между разумно структурированным документом и вашим адаптивным дизайном. В отличие от макетов, основанных на HTML-таблицах, вы можете наслаивать элементы в сетках. Так что, если потребуется, один элемент может перекрывать другой.
В примере ниже мы объявляем сеткой элемент с классом .wrapper
. Он содержит три колонки с шириной в 100px
, отступом в 10px
между ними и три строки. Мы располагаем контейнеры внутри этой сетки, используя номера линий до и после, выше и ниже той области, где мы хотим расположить элемент.

Поддержка браузерами последней спецификации сеток ограничена Chrome с отметкой «экспериментальная возможность». Существует приличная реализация начальной версии спецификации в Internet Explorer 10 и выше.
Узнать больше о сетках вы можете на моём сайте Grid by Example, где можно увидеть несколько примеров сеток, которые работают в Chrome с включёнными экспериментальными возможностями. Я также делал доклад на CSS Conf EU по сеткам и вы можете посмотреть это видео на YouTube.
У вас есть любимая новая спецификация, не рассмотренная здесь?
Надеюсь, вам понравился этот краткий обзор некоторых новых возможностей CSS. Используйте ссылки на указанные ресурсы, чтобы узнать подробнее о том, что вас заинтересовало. Напишите мне в комментариях, если у вас есть любимая развивающаяся CSS-особенность, о которой, по вашему мнению, люди должны узнать, или дополнительные ресурсы и примеры для любой из возможностей, описанной мной.
Похожие статьи

Пять анимаций на чистом CSS
Рассказываем, как нестандартно использовать CSS, и что из этого может получиться.
- 10 июля 2019
- 2 мин
- 7 013

Следите за концом строки
Делимся опциями и настройками для контроля над окончаниями строк в Гите.
- 21 марта 2019
- 11 мин
- 5 862
Generative Art. Пишем картины на канвасе
Илья Борисов, фронтенд-разработчик в «Медузе», рассказывает о своём хобби — генеративном искусстве и показывает,…
- 14 марта 2019
- 10 мин
- 5 953
Пять докладов для бэкенд-программиста
Собрали для вас полезные доклады о PHP. Разбираемся с профилированием, возможностями и устройством языка.
- 29 января 2019
- 1 мин
- 3 311
Пять книг для фронтенд-разработчика
Вадим Макеев, автор и преподаватель профессиональных курсов, делится списком книг для начинающих фронтендеров.
- 18 января 2019
- 3 мин
- 16 957
Проекты выпускников в «Лиге А.»
«Лига А.» — фронтенд-аутсорс. Там выпускники Академии работают с настоящими коммерческими проектами.
- 23 ноября 2018
- 4 мин
- 3 425