translation(CSS): web/css/important

files/uk/web/css/important/index.md

@@ -0,0 +1,156 @@
+---
+title: "!important"
+slug: Web/CSS/important
+page-type: css-keyword
+---
+
+{{CSSRef}}
+
+Розділювач `!`, після якого стоїть ключове слово `important`, позначає оголошення як важливе. Позначка `!important` змінює правила вибору оголошень у межах [каскаду](/uk/docs/Web/CSS/Cascade). Оголошення, яке не є _важливим_, зветься _звичайним_.
+
+Аби позначити оголошення як важливе, слід додати після значення в оголошенні _позначку важливості_ (`!important`). Попри те, що між розділювачем і ключовим словом дозволений пробіл, зазвичай ця позначка пишеться як `!important`, без жодних пробілів.
+
+```css-nolint
+selector {
+  property: value; /* normal звичайне оголошення */
+  property: value !important; /* важливе оголошення (бажано писати так) */
+  property: value ! important; /* важливе оголошення (бажано так не писати) */
+}
+```
+
+Позначка `!important` ставиться після значення в оголошенні пари властивості та значення, відділена щонайменше одним пробілом. Позначка важливості має бути останньою лексемою в такому оголошенні. Інакше кажучи, між позначкою та крапкою з комою в кінці оголошення можуть бути пробіли та коментарі, але нічого іншого.
+
+## Вплив на каскад
+
+Коли мова про важливі оголошення, то [порядок каскадних походжень і шарів](/uk/docs/Web/CSS/Cascade) стає оберненим. Коли позначки важливості немає, то оголошення в списках стилів розробника переважують оголошення в користувацьких стилях, які переважують оголошення в усталених стилях користувацького агента.
+
+Коли ж оголошення є важливим, то цей порядок стає оберненим. Оголошення, позначені як важливі в стилях користувацького агента, переважають всі важливі оголошення в стилях користувача. Так само, всі важливі оголошення в стилях користувача переважають всі важливі оголошення в стилях розробника. Нарешті, всі важливі оголошення мають пріоритет над усіма анімаціями.
+
+> **Примітка:** Всі важливі оголошення мають пріоритет над усіма анімаціями. Позначка `!important` не є дійсною в межах оголошень [анімацій @keyframes](/uk/docs/Web/CSS/@keyframes).
+
+Обернення порядку пріоритету для важливих оголошень забезпечує те, що користувачі з особливими потребами, наприклад, особливими колірними палітрами чи великим шрифтом, здатні переважити стилі розробника, позначивши деякі оголошення у своїх стилях користувача як важливі. Також це гарантує те, що зловмисні розширення не можуть переважити важливі стилі користувацького агента, що могло б зламати функціональність або негативно вплинути на безпеку.
+
+Чи має щось пріоритет над важливими оголошеннями? Так, це [переходи](/uk/docs/Web/CSS/CSS_transitions). Переходи CSS є способом контролю швидкості, з якою властивість змінює одне значення на інше. Поки відбувається перехід від одного значення до іншого, властивість не відповідатиме якомусь конкретному важливому оголошенню.
+
+```css
+a {
+  color: red !important;
+  background-color: yellow;
+  transition: all 2s linear;
+}
+a:hover {
+  color: blue !important;
+  background-color: orange !important;
+}
+```
+
+У цьому прикладі властивості `color` і `background-color` будуть переходити до стану наведеності протягом двох секунд. Навіть попри те, що усталені стани є звичайними оголошеннями, а стани наведеності – оголошеннями `!important`, перехід усе одно відбувається.
+
+### Каскадні шари
+
+В межах кожного з трьох походжень списків стилів – розробника, користувача та користувацького агента – звичайні оголошення в нешарових стилях переважають шарові оголошення стилів, причому останнє оголошення має пріоритет над шарами, що оголошені перед ним. Важливі оголошення обертають порядок пріоритету: важливі оголошення в першому шарі мають пріоритет над важливими оголошеннями в наступному шарі, і так далі. Крім цього, всі важливі оголошення в шарах мають пріоритет над важливими оголошеннями, що зроблені поза будь-яким шаром.
+
+### Вбудовані стилі
+
+Вбудовані стилі – це стилі, визначені за допомогою атрибутів [`style`](/uk/docs/Web/HTML/Global_attributes/style). Вони також можуть бути звичайними або важливими. Вбудовані _звичайні_ стилі переважають усі _звичайні_ оголошення, незалежно від походження. Вбудовані _важливі_ стилі переважають усі інші _важливі_ стилі розробника, незалежно від шару, але важливі стилі зі стилів користувача або користувацького агента та переходи переважають їх.
+
+### !important і специфічність
+
+Попри те, що `!important` не є частиною алгоритму визначення специфічності, ці позначка та алгоритм пов'язані одне з одним. Важливі оголошення переважують усі інші оголошення з тих самих [походження та каскадного шару](/uk/docs/Web/CSS/Cascade).
+
+```css
+#myElement#myElement#myElement .myClass.myClass p:hover {
+  color: blue;
+}
+
+p {
+  color: red !important;
+}
+```
+
+Цей приклад демонструє ситуацію надмірної специфічності селектора. Незалежно від того, наскільки висока [специфічність](/uk/docs/Web/CSS/Specificity) селектора звичайного оголошення, важливе оголошення з тих же джерела та каскадного шару завжди матиме пріоритет. У цьому випадку абзац завжди буде червоним.
+
+Коли два важливі оголошення з одних походження та шару застосовуються до одного елемента, то браузери вибирають і застосовують те з ним, що має вищу специфічність.
+
+```css
+#myElement p {
+  color: green !important;
+}
+
+p {
+  color: purple !important;
+}
+```
+
+У цьому випадку специфічність селектора грає роль. Порядок грав би роль лише якби ці селектори мали однакову специфічність.
+
+## Вплив на властивості-скорочення
+
+Оголошення властивості-скорочення з `!important` робить усі її підвластивості важливими. Два наступні блоки стилів селектора еквівалентні:
+
+```css
+p {
+  background: blue !important;
+}
+
+p {
+  background-image: none !important;
+  background-position: 0 0 !important;
+  background-size: auto auto !important;
+  background-repeat: repeat !important;
+  background-origin: padding-box !important;
+  background-clip: border-box !important;
+  background-attachment: scroll !important;
+  background-color: blue !important;
+}
+```
+
+Цей приклад демонструє одну з кількох причин, чому зазвичай рекомендують уникати позначок важливості.
+
+## Вплив на кастомні властивості
+
+Коли позначка `!important` додається до оголошення значення кастомної властивості, це робить присвоєння значення важливим. Потім позначка `!important` вилучається зі значення кастомної властивості. Позначка `!important` не передається до функції [`var()`](/uk/docs/Web/CSS/var) як частина значення кастомної властивості.
+
+```css
+:root {
+  --myColor: red !important;
+  --myColor: blue;
+}
+p {
+  color: var(--myColor);
+}
+blockquote {
+  color: var(--myColor);
+  color: purple;
+}
+```
+
+```html hidden
+<p>Це абзац</p>
+<blockquote>Це blockquote</blockquote>
+```
+
+У цьому прикладі абзац буде червоним, а не синім, оскільки присвоєння значення кастомної властивості є важливим. Blockquote буде фіолетовим, оскільки звичайне фіолетове оголошення стоїть нижче звичайного оголошення з червоним кольором.
+
+{{EmbedLiveSample('vplyv-na-kastomni-vlastyvosti', '500', '250')}}
+
+## Найкращі практики
+
+Уникайте використання `!important` для переваження специфічності. Коли важливі оголошення свідомо створюються для виконання вимог з UI, додавайте до свого коду CSS коментарі для пояснення тим, хто буде підтримувати код, чому вони не повинні переважувати якусь можливість.
+
+Навіть при роботі з переважування стилів з високою специфічністю, над якими немає контролю, наприклад, стилів у сторонній втулці, що мають [селектор ідентифікатора](/uk/docs/Web/CSS/ID_selectors), немає потреби використовувати `!important`. Розгляньте можливість імпортування стилю сторонньої втулки в [іменований або безіменний шар](/uk/docs/Web/CSS/@layer) як перший каскадний шар, а не використовувати `!important`. Якщо зовнішні стилі не містять важливих оголошень, ваші стилі переважатимуть стилі віджета, незалежно від специфічності.
+
+Якщо потрібно переважити зовнішній список стилів, що містить важливі оголошення, створіть каскадний шар, що вміщає усі необхідні переважання, і оголосіть цей шар першим.
+
+### Занепокоєння щодо доступності
+
+Важливі стилі з користувацького списку стилів мають пріоритет над важливими оголошеннями стилів розробника, а це означає, що додавання позначки `!important` до стилів сайту не завадить окремим користувачам з особливими потребами, наприклад, з великими шрифтами, переважати ваші стилі, додавши важливі стилі у свій власний список стилів користувача.
+
+## Сумісність із браузерами
+
+Ця можливість підтримується у всіх браузерах.
+
+## Дивіться також
+
+- [Специфічність CSS](/uk/docs/Web/CSS/Specificity)
+- [Каскад CSS](/uk/docs/Web/CSS/Cascade)

uk_spelling_additions.txt

@@ -72,6 +72,7 @@
 ворклета
 ворклеті
 восьмицифрової
+втулці
 гетер
 гетери
 геш
@@ -174,6 +175,7 @@
 множиноподібності
 мовозалежним
 мовозалежними
+наведеності
 надкреслення
 налаштовність
 налаштовності