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; }
nth-test.com
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;
}