5 Нововведень в css4.

Всім привіт! У цій статті ми розглянемо 5 нововведень, які повинні з`явитися в новій специфікації CSS4.

Розвиток не стоїть на місці і, здавалося б, недавно вийшла третя версія специфікації CSS, а вже ведуться розробки четвертої версії. Що там з`явиться? Давайте подивимося на те, що вже стало відомо. Однак, не забувайте, що це ще не остаточний результат, отже, щось може змінитися до моменту виходу, хоча, я думаю, несильно.

Відео: CSS4 Grid: True Layout Finally Arrives (Jen Kramer) - Full Stack Fest 2016

Звичайно ж, з`являться нові селектори. Давайте розглянемо декілька цікавих.

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

Пам`ятайте, як нам доводилося писати щось на зразок цього:

Відео: Що нового в Photoshop CS6?

a: link, a visited {}

І тільки лише для того, щоб правило спрацьовувало відразу для двох властивостей. Оскільки це доводилося писати досить часто, з`явилося нове властивість, що об`єднує ці два:

Відео: Adobe Photoshop Tutorial: The Basics for Beginners

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

А на цьому сьогодні все. Дякую за увагу і стежте за новинами!

Поділися в соціальних мережах:

Схожі