Селектори CSS — інтригуючий Selectors level 4

325

Від автора: селектори CSS масово прогресували протягом багатьох років, надаючи розробникам набагато більше можливостей для орієнтації певних бітів на своїх сторінках. Приклади в цій статті є частиною специфікації Selectors CSS level 4. Давайте зануримося і досліджуємо сім з цих інтригуючих селекторів, з яких, я гарантую, що деякі ви ще жодного разу не використовували на практиці!

Selectors level 4

The Level 4 специфікація, безумовно, містить не тільки відомі селектори, такі як nth-child, але і деякі унікальні символи. Більша частина специфікації level 4 описує багато нових і корисних псевдо-класів і псевдо-селекторів, тому в цьому питанні давайте коротко розглянемо, яка різниця між поодинокими і подвійними двокрапками, коли мова йде про псевдо у CSS.

Поодинокі vs. подвійні двокрапки

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

Селектори CSS — інтригуючий Selectors level 4

«Ця запис з двома двокрапками введена …, щоб встановити дискримінацію між псевдо-класами та псевдо-елементами. Для сумісності з існуючими таблицями стилів браузери також повинні приймати попереднє позначення поодиноким двокрапкою для псевдо-елементів, введених в CSS level 1 і 2 (а саме: first-line,: first-letter, before: after). Ця сумісність не допускається для нових псевдо-елементів, введених в CSS level 3. »- Специфікація W3C

Добре, це зрозуміло, але в чому різниця між класами та елементами?

Псевдо-класи vs. Псевдо-елементи

Псевдо-клас завжди складається з «двокрапки» :, за яким слідує ім’я псевдо-класу (ключове слово), а для функціональних псевдо-класів — один або декілька аргументів між круглими дужками (подібно функцій CSS). Це метод, що дозволяє авторам вказувати і налаштовувати особливий стан вибраного елемента(ів).

«Псевдо-класи дозволяють застосовувати стиль елементу не тільки по відношенню до вмісту дерева документів, але і по відношенню до зовнішніх чинників, таких як історія навігатора ( :visited, наприклад), його статус вмісту (наприклад :checked на певних елементах форми) або на позицію миші (наприклад :hover, яка дозволяє дізнатися, чи миші над елементом чи ні). — MDN Web Docs

Псевдо-елементи створюють абстракції про дереві документів, крім тих, які вказані мовою документа. Наприклад, мови документа не пропонують механізмів доступу до «першої букві» або «першої рядку» вмісту елемента. Псевдо-елементи дозволяють авторам посилатися на цю неприйнятну інформацію.

Псевдо-елементи також надають авторам механізм для посилання на контент, якого немає у вихідному документі, таких як відомі ::before ::after псевдо-елементи, які дозволяють доступ до згенеровані контенту в CSS 2.

Тепер, коли ми встановили зв’язок, давайте поринемо і досліджуємо деякі з цих інтригуючих селекторів CSS level 4.

: matches ()

Псевдо-клас :matches(), безсумнівно, сильний селектор прийшов з level 4, але браузери поки все ще обговорюють його включення за винятком Safari (WebKit).

Його можна використовувати для об’єднання декількох правил вибору в одну лаконічну лінію. Він приймає список селекторів в якості аргументу. Ці аргументи можуть бути складовими селекторами і комплексними селекторами, однак селектори комбінаторів не допускаються.

/* Chrome */
:-webkit-any(:hover, :focus, :active) {
color: #222;
}
/* Firefox */
:-moz-any(:hover, :focus, :active) {
color: #222;
}
/* Safari */
:matches(:hover, :focus, :active) {
color: #222;
}

У той час як цей фрагмент поєднує всі наші спільні стану для :hover, :focus: activeв один набір правил, він все ще не розкрив потенціал, яким він володіє. Нижче ми розглянемо більш складний приклад.

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

:matches(section, article) :matches(h1, h2, h3, h4, h5, h6) {
color: goldenrod;
}
/* equivalent to: */
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
color: goldenrod;
}

Можна навіть об’єднати їх разом, щоб відкрити ще один набір можливостей.

/* Firefox */
:-moz-any(a):-moz-any(:link, :відвідали) {
color: blue;
}
:-moz-any(a):-moz-any(:hover, :focus, :active) {
color: red;
text-decoration: none;
}
/* Chrome */
:-webkit-any(a):-webkit-any(:link, :відвідали) {
color: blue;
}
:-webkit-any(a):-webkit-any(:hover, :focus, :active) {
color: red;
text-decoration: none;
}
/* Safari */
:matches(a):matches(:link, :відвідали) {
color: blue;
}
:matches(a):matches(:hover, :focus, :active) {
color: red;
text-decoration: none;
}

Цей приклад еквівалентний написання:

a:link,
a:visited {…}
a:hover,
a:focus,
a:active {…}

Майте на увазі, що :matches() не може бути вкладений ( :matches(:matches())) і не працює з :not() ( :matches(:not()), :not(:matches())).

На жаль, специфікація для цього селектора закріпилася тільки в Safari і раніше чекає від інших розробників браузерів підтримки, тому вам доведеться використовувати окремі декларації та префікси постачальників. В даний час такі інструменти, як Autoprefixer, не підтримують :matches(), але не бійтеся, оскільки нещодавно я підняв на GitHub питання про надання цієї підтримки.

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

: placeholder-shown

Елементи вводу мають можливість вказувати текст заповнювача для користувача, який повинен бути введений. Це відбувається, коли атрибут placeholder присутній у вхідному тезі і, таким чином, відповідає елемента вводу, що відображає текст заповнювача.

/* affects entire input */
:placeholder-shown {
opacity: 1; /* works */
color: gold; /* sketchy */
background: blue; /* works */
font-weight: bold; /* works */
border: 1px solid red; /* works */
}
/* only affects placeholder text */
::placeholder {
opacity: 1; /* works */
color: gold; /* works */
background: goldenrod; /* works */
font-weight: bold; /* works */
border: 1px solid red; /* works */
}

По суті, :placeholder-shown це вибір самого входу, коли відображається її текст покажчика місця заповнення, а навпаки ::placeholder, який стилізує текст-заповнювач. Насправді є документація про: :placeholder, зазначена в CSS Pseudo-Elements Module Level 4 Editors Draft. Майте на увазі, що :placeholder-shown це псевдо-клас (елемент в певному стані) а ::placeholder — псевдо елемент (видима річ, яка насправді не входить в DOM).

Під час мого дослідження я виявив, що color це особлива властивість (коли для зміни кольору тексту заповнювача використовується :placeholder-shown), яке відзначене увагою тільки в браузері Firefox, тоді як Chrome і Safari підтримують сірий колір тексту заповнювача.

: any-link

Псевдо-клас :any-link представляє собою елемент, який діє в якості джерела якоря гіперпосилання.

:any-link {…}

Наприклад, в HTML5, будь , або елементи з атрибутом href є гіперпосиланнями, які відповідають :any-link і еквівалентні :matches(:link, :відвідали). По-моєму, це дійсно своєрідний селектор і раніше очікує кращого імені, проте в наші дні, за винятком Edge, підтримка досить широка.

В даний час Autoprefixer підтримує це властивість і надає правильні префікси постачальників для браузерів, які їх вимагають.

: indeterminate

Псевдо-клас :indeterminate є селектором, призначеним для певних елементів форми і застосовним до всіх середовищ.

:indeterminate {
outline: 2px solid red;
}

Зазвичай цей селектор буде відповідати входів, таким як радіо і прапорці, коли немає атрибут checked. Входи, подібні цим, можуть існувати без будь-яких перевірених або неперевірених станів.

Він також обирає елементи, типу елемент progress без атрибута value контенту (тобто коли відсоткове завершення невідомо). В даний час підтримка багатьох широко використовуваних постачальників стабільна.

: user-error

Псевдо-клас :user-error являє вхідний елемент з неправильним введенням, але тільки після того, як користувач почне з ним взаємодіяти. Наприклад, з моменту, коли користувач намагається надіслати форму або перед тим, як користувач починає роботу з елементом форми.

:user-error {
background: red;
color: red;
border: 2px solid red;
}

Однак підтримки немає, і немає способу дізнатися, чи будуть вони реалізовані великими постачальниками браузерів. На даний момент краще використовувати :invalid або :required, якщо потрібен такий стиль оформлення помилок для веб-форм.

:invalid {
background: red;
color: red;
border: 2px solid red;
}

: optional

Псевдо-клас : optional може використовуватися, коли значення дійсно і до того, як буде відправлена його форма.

: optional {…}

Він вибирає будь-input або textarea елемент, який не має атрибуту required. Це дозволяє формами легко вказувати необов’язкові поля і відповідним чином їх форматувати.

Це один з дуже легко задокументованих селекторів, включених в чернетку специфікації Selectors level 4.

: scope

Псевдо-клас :scope може обмежувати правила стилю, які застосовуються лише до частини сторінки, встановлюючи scoped атрибут елемента (прямий дочірній елемент кореня елемента піддерево, до якого ви хочете застосувати стилі). Він обмежує стилі впливом тільки на елемент, який є батьківським елементом елемента і всіх його нащадків, або, іншими словами, батьком елемента і все всередині.

    :scope {
    color: red;
    }

  • item 1
  • item 2
  • item 3

На жаль, більшість браузерів не підтримують або його підтримали в свій час, але потім повністю видалили. І хоча Chrome і Safari реєструють збіг псевдо-класу і, отже, застосовують правило CSS, вони поки не підтримують самостійність стилю; це означає, що застосовуване правило CSS виходить за межі передбачуваної частини документа і прирівнюється до :root.

Виходячи з поточних досліджень, Chrome 35 FF 55 видалили підтримку, однак був час, коли Chrome і Firefox підтримувалися :scope. Всі ці back і forth роблять зовнішній вигляд видимій області досить похмурим, та відповідно Can I Use, більшість браузерів в даний час мають підтримку позначену прапорцем.

Селектори CSS — інтригуючий Selectors level 4

Висновок

Звичайно, є деякі дуже перспективні Selectors Level 4 і багато інші, не згадані в цій статті. Як і в будь-якій формі специфікації, деякі селектори можуть дещо змінюватися з часом або повністю віддалятися. Нам, як розробникам, потрібно чіплятися за ті, які ми цінуємо більше всього, і стежити за тим, щоб команди відповідали. Успішного кодування!