Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update(CSS): web/css/@layer #3629

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

update(CSS): web/css/@layer #3629

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions files/uk/web/css/@layer/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ browser-compat: css.at-rules.layer

![Діаграма, що показує пріоритетність каскадних шарів](https://webdoky.github.io/shared-assets/images/diagrams/css/at-rules/layer-cascade.svg)

Як зазначено в діаграмі вище, _важливі оголошення_, тобто оголошення з позначкою `!important`, мають пріоритет над _звичайними оголошеннями_, тобто оголошеннями без позначки `!important`. Порядок пріоритету серед важливих правил зворотний щодо порядку серед звичайних правил. Переходи мають найвищий пріоритет. Далі в порядку від вищого до нижчого пріоритету стоять важливі оголошення {{glossary("user agent", "користувацького агента")}}, важливі користувацькі оголошення та важливі оголошення розробника. Користувачі можуть задавати стилі за допомогою налаштувань браузера, налаштувань операційної системи та розширень браузера. Їхні важливі оголошення мають пріоритет над важливими оголошеннями _розробника_.

В межах стилів розробника всі важливі оголошення в шарах CSS мають пріоритет над важливими оголошеннями, оголошеними поза шарами, а всі звичайні оголошення всередині шарів CSS мають нижчий пріоритет, ніж оголошення, оголошені поза шарами.
Порядок оголошення – важливий. Перший оголошений шар отримує найнижчий пріоритет, а останній – найвищий. Проте така пріоритетність перекидається на зворотну, коли вживається позначка [`!important`](/uk/docs/Web/CSS/important).

Директива `@layer` вживається для створення каскадного шару одним із трьох способів.
Expand Down Expand Up @@ -70,7 +73,7 @@ browser-compat: css.at-rules.layer

Це корисно, тому що початковий порядок, у якому оголошуються шари, вказує на те, який шар має пріоритет. Як і для оголошень, останній шар у переліку перемагає, якщо оголошення знайдено в декількох шарах. Тому, у попередньому прикладі, якщо конкурентні правила знайдено в `theme` і `utilities`, то перемагає те, що в `utilities`, – воно й застосовується.

Правило в `utilities` буде застосоване, _навіть якщо воно має меншу специфічність_, ніж правило в `theme`. Бо коли сформовано порядок шарів, то специфічність і порядок появи ігноруються. Це дає змогу створювати простіші селектори CSS, оскільки немає потреби перевіряти, що селектор матиме достатньо високу специфічність, аби переважити конкурентні правила; все, що потрібно, – це переконатися, що воно з'являється в пізнішому шарі.
Правило в `utilities` буде застосоване, _навіть якщо воно має меншу специфічність_, ніж правило в `theme`. Бо коли сформовано порядок шарів, то специфічність і порядок появи ігноруються. Це дає змогу застосовувати простіші селектори CSS, оскільки немає потреби перевіряти, що селектор матиме достатньо високу специфічність, аби переважити конкурентні правила; все, що потрібно, – це переконатися, що воно з'являється в пізнішому шарі.

> [!NOTE]
> Після оголошення назв шарів, задавши їх порядок, можна додати до шару правила CSS, повторно оголосивши його назву. Ці стилі будуть додані до шару, а порядок шарів не зміниться.
Expand Down Expand Up @@ -120,7 +123,7 @@ browser-compat: css.at-rules.layer

## Приклади

### Простий приклад
### Базовий приклад

У наступному прикладі створюються два правила CSS. Одне для елемента {{htmlelement("p")}} поза будь-яким шаром і одне всередині шару з назвою `type` для `.box p`.

Expand Down Expand Up @@ -154,7 +157,7 @@ p {

#### Результат

{{EmbedLiveSample("prostyi-pryklad")}}
{{EmbedLiveSample("bazovyi-pryklad")}}

### Призначення правил наявним шарам

Expand Down
Loading