From 35e35b584428bececda060c32f669de0cfeebcb1 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Sat, 28 Dec 2024 00:03:23 +0200 Subject: [PATCH] translation(CSS): web/css/_colon_where (#2734) * translation(CSS): web/css/_colon_where * update(CSS): web/css/_colon_where * Apply suggestions from code review Co-authored-by: Mykola Myslovskyi --------- Co-authored-by: Mykola Myslovskyi --- files/uk/web/css/_colon_where/index.md | 153 +++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 files/uk/web/css/_colon_where/index.md diff --git a/files/uk/web/css/_colon_where/index.md b/files/uk/web/css/_colon_where/index.md new file mode 100644 index 0000000000..6d70f8808d --- /dev/null +++ b/files/uk/web/css/_colon_where/index.md @@ -0,0 +1,153 @@ +--- +title: ":where()" +slug: Web/CSS/:where +page-type: css-pseudo-class +browser-compat: css.selectors.where +--- + +{{CSSRef}} + +Функція-[псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:where()`** (де) приймає як аргумент список селекторів і вибирає всі елементи, які можуть бути вибрані будь-яким з селекторів у цьому списку. + +Різниця між `:where()` та {{CSSxRef(":is", ":is()")}} полягає в тому, що `:where()` завжди має [специфічність](/uk/docs/Web/CSS/Specificity) 0, тоді як `:is()` приймає специфічність найбільш специфічного селектора серед своїх аргументів. + +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-where.html", "tabbed-shorter")}} + +## Синтаксис + +Псевдоклас `:where()` вимагає [список селекторів](/uk/docs/Web/CSS/CSS_selectors/Selector_structure#spysok-selektoriv) — розділений комами список з одного чи більшої кількості селекторів — як його аргумент. Такий список не повинен містити [псевдоелементів](/uk/docs/Web/CSS/Pseudo-elements), але будь-які інші прості, складені та складні селектори допускаються. + +```css-nolint +:where(<складний-список-селекторів>) { + /* ... */ +} +``` + +### Поблажливий розбір селекторів + +Специфікація визначає те, що `:is()` та `:where()` приймають [поблажливий список селекторів](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list). + +У CSS, коли використовується список селекторів, то якщо будь-який з селекторів є недійсним, то весь список вважається недійсним. Проте коли використовується `:is()` або `:where()`, то замість того, щоб недійсним вважався весь список, якщо один з селекторів не виходить розібрати, то цей селектор, що має помилку або не підтримується, ігнорується, а інші використовуються. + +```css +:where(:valid, :unsupported) { + /* … */ +} +``` + +CSS вище все одно правильно розбирається і дає збіг з `:valid` навіть у браузерах, які не підтримують `:unsupported`, тоді як: + +```css +:valid, +:unsupported { + /* … */ +} +``` + +Ігнорується в браузерах, які не підтримують `:unsupported`, навіть якщо вони підтримують `:valid`. + +## Приклади + +### Порівняння :where() та :is() + +Цей приклад показує, як працює `:where()`, а також ілюструє різницю між `:where()` та `:is()`. + +Погляньмо на такий HTML: + +```html +
+

Посилання, оформлені за допомогою :is()

+
+

+ Ось мій головний вміст. Тут є посилання. +

+
+ + + +
+

+ Це мій нижній колонтитул, у якому також є + посилання. +

+
+
+ +
+

Посилання, оформлені за допомогою :where()

+
+

+ Ось мій головний вміст. Тут є посилання. +

+
+ + + + +
+``` + +У цьому дещо штучному прикладі є дві статті, кожна з яких містить розділ, побічний вміст і нижній колонтитул. Вони відрізняються класами, які використовуються для позначення дочірніх елементів. + +Аби згрупувати вибирання посилань, тим часом зберігаючи відмінні стилі `is-styling` та `where-styling`, _можна було б_ скористатися `:is()` або `:where()`, наступним чином: + +```css +html { + font-family: sans-serif; + font-size: 150%; +} + +:is(section.is-styling, aside.is-styling, footer.is-styling) a { + color: red; +} + +:where(section.where-styling, aside.where-styling, footer.where-styling) a { + color: orange; +} +``` + +Проте що, якщо пізніше захочеться перевизначити колір посилань у нижніх колонтитулах за допомогою складеного селектора, що складається з селекторів типу низької специфічності? + +```css +footer a { + color: blue; +} +``` + +Це не спрацює для червоних посилань, тому що селектори всередині `:is()` враховуються при розрахунку специфічності загального селектора, а класові селектори мають більшу специфічність, ніж селектори елементів. + +Проте селектори всередині `:where()` мають специфічність 0, тому помаранчеве посилання в нижньому колонтитулі буде перевизначено нашим складеним селектором, що складається лише з типів. + +> [!NOTE] +> Також цей приклад можна знайти на GitHub; див. [is-where](https://webdoky.github.io/css-examples/is-where/). + +{{EmbedLiveSample('pryklady', '100%', 600)}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- {{CSSxRef(":is", ":is()")}} +- [Список селекторів](/uk/docs/Web/CSS/Selector_list) +- [Вебкомпоненти](/uk/docs/Web/API/Web_components)