Всем привет! В этом материале рассмотрим 5 нововведений, которые должны появиться в новой спецификации CSS4 .
Всем привет! В этом материале рассмотрим 5 нововведений, которые должны появиться в новой спецификации CSS4.
Развитие не стоит на месте и, казалось бы, недавно вышла третья версия спецификации CSS, а уже ведутся разработки четвертой версии. Что там появится? Давайте посмотрим на то, что уже стало известно. Однако, не забывайте, что это еще не окончательный результат, следовательно, что-то может поменяться к моменту выхода, хотя, я думаю, несильно.
Конечно же, появятся новые селекторы. Давайте рассмотрим несколько интересных.
1. :NOT()
Этот селектор уже есть, но он был усовершенствован. Теперь вы можете перечислять внутри него не один, а сразу несколько тегов:
:not(p, h1, div) // то же самое, что и :not(p):not(h1):not(div)
2. :HAS()
Это очень интересный селектор, открывающий большие возможности для выборки. Указанное правило сработает только, если в нем будут определенные элементы:
div:has(img) // любой блок, в котором есть картинка
p:has(h1, h2) // любой параграф, имеющий заголовки первого или второго типов
p:has(:not(h1)) // любой параграф, не имеющий заголовок первого типа
3. :any-link
Помните, как нам приходилось писать что-то вроде этого:
a:link, a visited {}
И только лишь для того, чтобы правило срабатывало сразу для двух свойств. Поскольку это приходилось писать достаточно часто, появилось новое свойство, объединяющее эти два:
a:any-link {}
4. :placeholder-shown
Этот псевдо-класс выбирает элементы ввода, когда показывается текст, заданный в placeholder:
input:placeholder-shown {
outline: 1px solid blue;
}
5. :drop и :drop()
Первый псевдо-класс выбирает любой элемент, который перетаскивается пользователем. Второй – похож на первый, но имеет дополнительные возможности сортировки:
div:drop {}
div:drop(active || valid || invalid) {
// active: перетаскиваемый объект
// valid: сработает, если цель перетаскивания действительна для объекта, который в настоящее время перетаскивается
// invalid: наоборот, если цель перетаскивания недействительная для объекта, который в настоящее время перетаскивается
}
А на этом сегодня все. Спасибо за внимание и следите за новостями!
