CSS был с нами долгое время — с 1994 года (в зависимости кого спрашивать) — и де-факто стал стандартом для оформления сайтов. Новые спецификации (такие как новые модули CSS4) продолжают добавлять крутую функциональность, связанную с анимациями, трансформациями, тенями и кое-какими новыми селекторами. Классные вещи, но сегодня мы будем говорить не о них.
Из-за активности в мире CSS, иногда хочется погрузиться в новейшие спецификации, чтобы почерпнуть идеи, как реализовать дизайн. Но есть много более ранних, часто недооцененных фич в предшествующих спецификациях, которые предоставляют удобный функционал. Ну что, поехали.
1. CSS функция calc()
Calc() наверное самая используемая из этого списка, но ее все равно стоит упомянуть. Если вы еще не использовали ее, чтобы понять назначение вы можете представить, что говорите: «Я хочу чтобы этот элемент был вот такой ширины минус столько-то пикселей».
.box {
width: calc( 100% - 20px );
}
Похоже на что-то из препроцессоров типа SASS, но это чистый CSS, и здесь используется высчитанный браузером размер элемента для дальнейших математических операций.
Элемент .box из примера будет таким, «каким он был бы при 100% ширине, минус 20 пикселей». Это может быть использовано для различных целей, таких как расположение элементов с фиксированной шириной бок о бок с теми, у которых ширина резиновая.
2. Медиа-запрос pointer
Пока поддерживаемый браузерами не настолько хорошо, как хотелось бы (~70%), медиа-запрос pointer может быть весьма полезным. Чаще медиа-запросы основаны на простом измерении: размере окна. Но есть много случаев, когда хочется спросить у браузера: «пользователь использует для навигации палец или компьютерную мышь?», чтобы мы могли задать соответствующие стили.
@media( pointer: coarse) { }
Можно использовать следующие значения:
- none — Основное устройство не включает указывающее устройство
- coarse — Основное устройство включает указывающее устройство с ограниченной точностью. Например, тачскрины или сенсоры движения.
- fine — Основное устройство включает тоное указывающее устройство. Сюда входят мыши, тачпады или стилусы.
Поддержка браузерами
Она не самая лучшая, но становится все лучше. Webkit, Blink и Edge надежны, но с Gecko/Firefox пока облом.
3. Переменная currentColor
Представленная в CSS3, эта нативная переменная позволяет довольно просто получить текущее значение цвета (color) элемента.
.card {
color: #333333;
}
.card--error {
color: #ff0000;
}
.card__guts {
border-top-color: currentColor; // см. пояснение [1]
}
[1] Michael Wong советует убедиться что вы используете эту переменную только там, где она и так каскадно не наследуется. Если быть кратким, я пренебрег этим советом в моем примере с border-top-color, который и так будет брать значение из цвета (color) родителя. Думаю при использовании этого значения для таких свойств, как background, оно будет работать.
4. Пседоклассы :valid, :invalid и :empty
Псевдоклассы :valid и :invalid используются для стилизации проверенных на валидность инпутов. Большинство новых типов инпутов могут быть валидными и невалидными в засимости от их атрибута type. Например, инпут с типом email с некорректным почтовым адресом вызовет псевдокласс :invalid — всю работу берет на себя браузер.
input:valid { color: green; }
input:invalid { color: red; }Псевдокласс :empty добавляется к элементам без содержимого. То есть вместо того чтобы оборачивать заголовок условной логикой в шаблоне, вы можете просто оставить его как есть и прятать, используя этот псевдокласс, если этот элемент не содержит текста.
h1:empty { display: none; }5. Счетчики на чистом CSS
Нужен список с порядковыми номерами, но не хотите (или не можете) использовать элемент ol? Также не хочется писать javascript для этого? Без паники, старый добрый CSS может помочь вам со счетчиками.
.shelf { counter-reset: books; }.shelf__book { counter-increment: books; }.shelf__book::before {
content: "Book " counter(books) " of 10.";
}Окей, иногда CSS выглядит нелепо. Это тот самый момент. Для конкатенации не нужен никакой символ — просто поставьте пробел между ними.
6. Предсказуемые таблицы с фиксированной разбивкой
Таблица по умолчанию уделяет сильное внимание содержимому ячеек, для того чтобы решить, какой ширины их показывать. Добавление table-layout:fixed заставляет таблицу вести себя более «управляемо».
.grid {
table-layout: fixed;
}7. Состояния форм с использованием селекторов смежных элементов
Селектор смежного «соседа» — это самая основа 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()
Селектор nth-child полезен для удаления бордера у последнего элемента в списке или для чередования строк в таблице, но это только верхушка айсберга.
Используя простую арифметику, вы можете выбрать «каждый четвертый элемент начиная с первого».
.book:nth-child(4n+1) { color: red; }или «каждый третий начиная со второго».
.book:nth-child(3n-1) { color: blue; }9. Анимирование элементов с animation-fill-mode
Часто, при работе с анимациями, элемент должен «запомнить» свои стили в конце анимации и не сбрасывать их на изначальное состояние до анимации. Когда вы хотите воспроизвести анимации и оставить у элемента стили измененными, вы можете использовать animation-fill-mode.
@keyframes slideIn {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
.slideIn {
animation-name: slideIn;
animation-duration: .25s;
animation-fill-mode: forwards;
}Заключение
С продолжением браузеров движения в сторону «application-like веба», наши инструменты получают больше нативности, коплексности и интересности. Есть новые фичи, которые будут появляться каждый день, и крутая функциональность, которая всегда будет на горизонте.
Но даже ожидая появления всей новизны, рассмотрев, что на данный момент доступно для использования, вы можете найти именно то, что вам нужно.
Статью перевел aziev. Оригинал на Medium.com доступен по ссылке.