5 основних новинок в CSS 4.

Всім привіт! У цій статті ми розглянемо 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: навпаки, якщо мета перетягування недійсна для об’єкта, який в даний час перетягується
}

Дякую за увагу і стежте за новинами!

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 3.00 out of 5)
Loading...

Залишити коментар