HTML, CSS

9 забытых возможностей CSS

Karina | 06.12.2016

CSS существует уже более 20 лет и является стандартным языком описания внешнего вида веб-страниц. В каждой последующей спецификации появляются новые полезные возможности, такие как анимация, трансформация, дополнительные единицы измерения и т. д.

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

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

W3C | Caniuse

Итак, функция calc() — это, пожалуй, самая крутая вещь в данном списке, которая позволяет задавать значения свойств, используя математические выражения с добавлением, вычитанием, умножением и делением. Функция делает возможным перенос таких выражений в CSS-код: «Я хочу, чтобы элемент занимал всю ширину минус 20 пикселей».

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

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

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

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

W3C | Caniuse

Пока что этот медиа-запрос не очень хорошо поддерживается браузерами (примерно 70%). Но несмотря на это, он может принести немало пользы. Как правило, при разработке адаптивной верстки разработчики отталкиваются от ширины окна браузера. Но помимо этого существует возможность узнать, что использует пользователь для управления устройством — мышь или палец? В соответствии с этим можно регулировать размер кнопок.

@media (pointer: coarse) { }

Возможные значения для pointer:

none — основной механизм ввода устройства не предусматривает наличие указателя;
coarse — основной механизм ввода устройства включает указатель ограниченной точностинапример, сенсорные экраны, Xbox Kinect;
fine — Основной механизм ввода устройства включает точный указательмышь, тачпад, графический планшет.

Поддержка пока не идеальна, но положительные сдвиги наблюдаются. Так, Webkit, Blink и Edge уже поддерживают эту возможность, а вот Gecko/Firefox — пока нет.

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

W3C | Caniuse

Внедренная в CSS3 переменная currentColor представляет собой, как несложно догадаться, текущее значение color элемента.

.card {
    color: #333333;
}
.card--error {
    color: #ff0000;
}
    .card__guts {
        border-top-color: currentColor;
    }

Рекомендация: не стоит использовать эту переменную там, где цвет и так наследуется за счет каскадности.

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

W3C (W3C 2) | Caniuse

Псевдоклассы :valid и :invalid могут использоваться для стилизации полей ввода с валидацией. Большинство новых инпутов в HTML5 могут иметь статус «valid» или «invalid» в соответствии с их типом. Например, неверно заполненное поле ввода с типом 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 может показаться смешным, как в этом случае. Для конкатенации строк не требуются дополнительные символы или операторы — просто поставьте между ними пробел.

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

W3C | Caniuse

По умолчанию, ширина столбца в таблице вычисляется после рендеринга таблицы, и таким образом на нее влияют все элементы в столбце. Использование table-layout: fixed заставит браузер устанавливать ширину столбца, исходя из первого элемента в нем. Это сделает таблицу более предсказуемой.

.grid {
    table-layout: fixed;
}

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 — сервис для тестирования своих значений nth-child и nth-of-type.

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;
}

Итог

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

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

По материалам medium.com