Що нового в CSS селекторах 4-ї версії?

Це переклад посту "what's new in CSS selectors 4". Він здався мені цікавим, і я вирішив перенести його на хабрахабр. P.s. Це мій перший переклад, не судіть строго, і якщо побачите якісь недоліки і помилки — напишіть будь-ласка в лічку, я постараюся виправити помилки. Далі, зі слів автора.

будь Ласка, майте на увазі, що дана стаття описує чорновий варіант специфікації на січень 2015 року, що означає, що інформація, викладена у статті, без попередження може бути змінена.

CSS-селектори четвертої версії — це наступне покоління специфікації CSS, остання версія якої була випущена у 2011 році, пробувши на протязі декількох років в стані чернетки.

Так що ж нас чекає нового?


ПРОФІЛІ СЕЛЕКТОРІВ
CSS-селектори відтепер розділені на дві групи: швидка повна. Швидкі селектори — це ті селектори, які підходять для динамічного CSS-движка. Повна група селекторів підходить для використання в тих ситуаціях, в яких швидка вибірка даних не настільки важлива, наприклад, при використанні їх через document.querySelector.

Селектори використовуються в безлічі різноманітних контекстів, які сильно відрізняються за швидкісними характеристиками. На жаль, деякі потужні селектори надто повільні для того, щоб використовувати їх у чутливих до продуктивності контекстах. Щоб вирішити дану проблему, були створені два профілю специфікацій селекторів. [джерело]


:HAS
:has — це одна з найцікавіших частин специфікації CSS селекторів четвертої версії, але вона супроводжується важливим попередженням, про який мова піде нижче. Цей селектор дозволяє вказати, які об'єкти повинні бути присутнім усередині елемента, для того, щоб це правило спрацювало по відношенню до нього.

Це відкриває великий простір для нових варіантів вказівки шуканих елементів. Для прикладу, ми можемо вибрати всі секції, в яких присутні заголовки:

// Будь-яка секція, в якій є як заголовок
section:has(h1, h2, h3, h4, h5, h6)


Інший варіант: розробник може вибрати всі параграфи, в яких присутні зображення, або, навпаки, присутні лише елементи, які не є зображеннями.

// Виберемо параграфи, які не мають чого-небудь, що не є зображенням
p
:has(img) // має зображення
:not(:has(:not(img))) // не має всередині чого-небудь, що не є зображенням


Можна навіть вибрати ті елементи, які мають певну кількість нащадків (в даному прикладі, п'ять):

// Сайдбар з п'ятьма елементами всередині
div.sidebar
:has(*:nth-child(5)) // Має п'ять нащадків
:not(:has(*:nth-child(6))) // Але не шостого


Застереження: на даний момент, селектор :has не вважається швидким, що означає, що він може виявитися недоступним для використання у файлах стилів. Але, так як ще ніхто не реалізував на практиці цей селектор, питання його продуктивності залишається відкритим. Якщо розробники браузерів зможуть зробити його реалізацію швидкої, цілком можливо, що він буде доступний для використання як один з основних інструментів.

попередній версії специфікації цей розділ був позначений знаком оклику і називався «вибором суб'єкта селектора» — він мав інший синтаксис, який в даний час скасований.

:MATCHES
:matches — це стандартизація :moz-any і :webkit-any, яка якийсь час присутня в браузерских префіксах. Це дозволяє автору стилю об'єднати схожі правила. Наприклад, це може бути корисно для об'єднання згенерованого допомогою SCSS/SASS виведення на зразок такого:

body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, 
body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4), 
body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, 
body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4), 
body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, 
body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4), 
body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, 
body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) {
....
}

в дещо більш піддається контролю варіант:
body > .layout > .body > .content 
:matches(.post .page) 
:matches(p, li) 
:matches(a.image.standard:first-child:nth-last-child(4), 
a.image.standard:first-child:nth-last-child(4) ~ a.image.standard), 
....
}

На наведених вище сторінках документації Mozilla присутні застереження про його продуктивності. Так як цей селектор відтепер стане стандартом, ми сподіваємося, що побачимо результати роботи над його продуктивністю, які допоможуть зробити його легким.

:NTH-CHILD(AN+B [OF S])
В той час як :nth-of-type існує з початку тисячоліття, CSS-селектори четвертої версії додають можливість зробити фільтрацію, засновану на селекторі:
div :nth-child(2 of .widget)

Селектор S використовується для визначення індексу, і він не залежить від селектора, що знаходиться зліва від псевдо-класу. Як написано в специфікації, якщо ви заздалегідь знаєте тип елемента, селектор :nth-of-type може бути перетворений в :nth-child(… of S), подібно до цього:
img:nth-of-type(2) => :nth-child(2 of img)

Різниця між цим селектором і :nth-of-type невелика, але вона важлива. Для :nth-of-type, кожен елемент — чи вказали ви для нього селектор, або ж ні — має неявний індекс для себе серед своїх побратимів з тим же ім'ям тега. Вираз :nth-child(n of S) створює новий лічильник кожен раз, коли ви використовуєте новий селектор.

Це створює потенціал для можливих помилок у нових селекторах. Так як селектор всередині псевдо-класу :nth-child не залежить від селектора зліва від нього, ви можете випадково пропустити частину вашого запиту, якщо вкажете в лівому селекторі все як слід, але забудете вказати все необхідне всередині :nth-child. Наприклад:
tr:nth-child(2n of [disabled])

Дане правило може не працювати так, як ви очікуєте від нього, якщо інші не-tr елементи будуть мати атрибут «disabled».

У минулій версії специфікації дана можливість називалася селектор :nth-match.

:NOT()
В той час, коли ви використовували якийсь час :not, тепер ви можете перерахувати всередині нього кілька аргументів, щоб зберегти кілька байт і ввести:
// Еквівалентно наступному:
// :not(h1):not(h2):not(h3)...
:not(h1, h2, h3, h4, h5, h6)


КОМБІНАТОР НАЩАДКІВ (>>)
Комбінатор нащадків присутня в CSS з самого початку у вигляді пробіл ( ), але тепер він має явну версію:
// Еквівалентно наступному:
// p img { ... }
p >> img { ... }

Причина додавання даного правила полягає в організації мосту між прямим нащадком (>) і оператором для прозорого DOM (>>>).

КОМБІНАТОР СТОВПЦЯ (||) І :NTH-COLUMN
CSS-селектори четвертої версії додають операції зі стовпчиками, які дозволяють розробникам стилів більш простим способом змінювати дизайн певних стовпців у таблиці. Поточний підхід у завданні стилів для таблиць вимагає використання :nth-child, який не завжди збігається зі стовпцями таблиці при використанні атрибутів colspan.

При використанні нового комбінатора стовпця, ви можете задати стиль клітинок таблиці, які знаходяться в тому ж стовпці, що і заданий елемент col:

// Наступний приклад робить комірки C, E і G жовтими
// (приклад взято з специфікації CSS селекторів 4-ї версії)
col.selected || td {
background: yellow;
color: white;
font-weight: bold;
}

<table>
<col span="2">
<col class="selected">
<tr><td>A <td>B <td>C
<tr><td colspan="2">D <td>E
<tr><td>F <td colspan="2">G
</table>

Як альтернативний варіант, автор може використовувати :nth-column :nth-last-column для завдання стилів клітинок. У будь-якому випадку, якщо комірка охоплює декілька стовпців, цей селектор торкнеться кожної з них.

:PLACEHOLDER-SHOWN
Одне невелике доповнення до мови селектора — це :placeholder-shown. Він відповідає input-елемента, якщо і тільки якщо він відображає текст з свого placeholder-атрибута.

:ANY-LINK
:any-link — це ще одне маленьке доповнення. Воно оголошено для відповідності будь-якому з властивостей :link або :visited.
// Еквівалентно наступному:
// a:link, a:visited { ... } 
a:any-link { ... }


ВИСНОВКИ
CSS-селектори четвертої версії все ще знаходяться в розробці, але вже зараз там є корисні селектори, які ми розглянули, і які можуть запропонувати розробникам нові моделі та інструменти для завдання стилів. У специфікації є і інші нові селектори, які не були розглянуті мною (автором статті — прим. пер.) у даній статті, пов'язані з доступністю, валідацією даних, а також з атрибутами scoped в елементах style.

Якщо у вас виникло бажання погратися з даними селекторами, ви повинні дочекатися, поки розробники браузерів наздоженуть специфікацію, або використовувати деякі ранні реалізації. :matches доступна як :moz-any і :webkit-any, а нічні збірки WebKit'а мають ранню підтримку :nth-child селекторів через активацію по прапору.

Оскільки це чорновий варіант, найменування псевдокласів можуть змінитися без попередження. Слідкуйте за специфікаціями для отримання більш детальної інформації.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.