CSS с нами уже давно — некоторые знакомы с ним еще с 1994 года, и за это время он стал стандартом для оформления сайтов. Новые спецификации (такие как модуль CSS4) продолжают добавлять крутые возможности типа анимации, теней, трансформаций; вводить новые единицы измерения и селекторы. Это все замечательно, но сегодня мы обсудим другие свойства.

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

1. Функция CSS calc()

W3c • CanIuse

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

.box {
  width: calc( 100% - 20px );
}

Эта функция может напоминать возможности препроцессоров типа Sass, но она полностью нативна и использует выведенный браузером размер элемента, прежде чем заниматься своими расчетами.

Элемент .box будет занимать 100% доступной ширины за вычетом 20 пикселей. Это можно использовать для многих целей, например, для размещения элементов фиксированной ширины рядом с элементами переменной ширины.

Use Cases For Css Calc (перевод)

2. Медиазапрос pointer

W3c • CanIuse

Хотя поддержка этого свойства пока оставляет желать лучшего (примерно 70%), медиазапрос pointer может быть крайне полезен. Большинство медиазапросов основываются на простой метрике: ширине окна браузера. Но есть случаи, когда нам надо спросить браузер: “использует пользователь мышь или касания” и в соответствии с этим настроить размер кнопок.

@media( pointer: coarse) { }

Значения pointer:

none
Основной механизм ввода устройства не предусматривает наличие указателя.
coarse
Основной механизм ввода устройства включает указатель ограниченной точности. Сюда относятся сенсорные экраны и сенсоры обнаружения движения (типа Kinect для Xbox)
fine
Основной механизм ввода устройства включает точный указатель. Это мышь, тачпад или стилус.

Поддержка pointer пока далека от идеала, но постепенно улучшается. В Webkit, Blink и Edge она есть, но Gecko/Firefox пока не спешит.

Using pointer-events with Media Queries (перевод)

3. Переменная currentColor

W3c • CanIuse

Представленная в CSS3 переменная currentColor является нативной переменной CSS и представляет текущее значение color элемента.

.card {
    color: #333333;
}

.card--error {
    color: #ff0000;
}

    .card__guts {
        border-top-color: currentColor;
    }

Extending the Color Cascade with the CSS currentColor Variable, Sara Soueidan (перевод)

4. Псевдоклассы :valid, :invalid и :empty

W3C(2) • CanIuse

Псевдоклассы :valid и :invalid используются для оформления валидированных полей ввода формы. В HTML5 большинство новых форм могут быть валидными или невалидными в соответствии с их типом. Например, поле ввода типа “email”, заполненное неправильно, получает псевдокласс :invalid при помощи нативных средств браузера.

input:valid { color: green; }
input:invalid { color: red; }

Псевдокласс :empty применяется к элементам, не содержащим контента. Поэтому вместо того, чтобы оборачивать <h1>{name}</h1> условными тегами в шаблоне, вы можете оставить все как есть и спрятать пустой тег с помощью CSS.

h1:empty { display: none; }

5. Счетчики на основе CSS

W3C • CanIuse

Вам нужен упорядоченный список, но вас не устраивают возможности элемента <ol>, а применять JavaScript вы не хотите? Не беспокойтесь, в старом добром CSS есть счетчики:

.shelf { counter-reset: books; }

    .shelf__book { counter-increment: books; }

        .shelf__book::before {
            content: "Book " counter(books) " of 10.";
        }

Да, иногда CSS выглядит забавно и это один из тех случаев — для конкатенации нам не надо никаких символов, хватает простого пробела.

Fun Times with CSS Counters (перевод)

6. Предсказуемые таблицы с table-layout:fixed

W3C • CanIuse

По умолчанию таблицы уделяют много внимания содержимому своих ячеек при определении их ширины. Добавление правила table-layout:fixed делает поведение таблиц более управляемым.

.grid {
    table-layout: fixed;
}

Fixed Table Layouts, CSS-Tricks (перевод)

7. Индикация состояния полей формы с помощью соседнего селектора

W3C • CanIuse

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

[type="checkbox"] + label {
    font-weight:normal;
}

    [type="checkbox"]:checked + label {
        font-weight:bold;
    }

[required]:valid + span { color: green; }
[required]:invalid + span { color: red; }

8. Математический селектор nth-child()

W3C • CanIuse

Селекторы на основе Nth-child отлично подходят для удаления рамки у последнего элемента в списки или выделения четных и нечетных рядов в таблице, но это только вершина айсберга в использовании этого крайне полезного селектора.

Немного используя базовую математику вы можете выбрать, например, “каждый четвертый элемент, начиная с первого”.

.book:nth-child(4n+1) { color: red; }

Или “каждый третий элемент, начиная со второго”

.book:nth-child(3n-1) { color: blue; }

nth-test.com

How nth-child works, CSS-Tricks(перевод)

9. Анимация элементов с помощью animation-fill-mode

W3C • CanIuse

Часто при работе с анимациями, элементу нужно “запомнить” свои стили в конце анимации и не сбрасывать их до дефолтного, доанимационного состояния. Когда вы хотите, чтобы ваша анимация после окончания работы прикрепляла стили своего итогового состояния к элементу, используйте animation-fill-mode.

@keyframes slideIn {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

.slideIn {
    animation-name: slideIn;
    animation-duration: .25s;
    animation-fill-mode: forwards;
}

animation-fill-mode, webref.ru

Заключение

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

Но ориентируясь на новейшие вещи не стоит забывать то, что уже доступно — так вы можете найти то, что нужно именно вам.