alt
", "#attr-alt")}}. Коли вживається значення `0`, зображення поводитиметься звичним чином та просто покаже вміст атрибута `alt`.
+ - : Значення `1` означає, що значок зламаного зображення буде показаний навіть якщо зображення має атрибут [`alt`](/uk/docs/Web/HTML/Element/img#alt). Коли вживається значення `0`, зображення поводитиметься у звичний спосіб та просто покаже вміст атрибута `alt`.
-> **Зверніть увагу:** Навіть якщо значення встановлено у `1`, вміст атрибута `alt` все одно буде показаний, поруч зі значком зламаного зображення.
+> **Примітка:** Навіть якщо значення встановлено у `1`, вміст атрибута `alt` все одно буде показаний, поруч зі значком зламаного зображення.
## Формальне визначення
@@ -35,7 +34,7 @@ browser-compat: css.properties.-moz-force-broken-image-icon
### HTML
```html
-
+
```
### CSS
@@ -50,9 +49,9 @@ img {
### Результат
-{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }}
+{{EmbedLiveSample('pryklady','125','125')}}
-> **Зверніть увагу:** Попри те, що зображення має вказані висоту та ширину, значок зламаного зображення не буде показаний, але вміст атрибута `alt` також буде прихований, якщо значення властивості `-moz-force-broken-image-icon` встановлено у `1`.
+> **Примітка:** Попри те, що зображення має вказані висоту та ширину, значок зламаного зображення не буде показаний, але вміст атрибута `alt` також буде прихований, якщо значення властивості `-moz-force-broken-image-icon` встановлено у `1`.
## Зауваження
@@ -69,4 +68,4 @@ img {
## Дивіться також
-- {{ Bug(58646) }}
+- [Вада Firefox 58646](https://bugzil.la/58646)
diff --git a/files/uk/web/css/-moz-image-rect/index.md b/files/uk/web/css/-moz-image-rect/index.md
index 5a0676d763..e2f38e0bc8 100644
--- a/files/uk/web/css/-moz-image-rect/index.md
+++ b/files/uk/web/css/-moz-image-rect/index.md
@@ -3,14 +3,14 @@ title: "-moz-image-rect"
slug: Web/CSS/-moz-image-rect
page-type: css-function
status:
- - experimental
+ - deprecated
- non-standard
browser-compat: css.types.-moz-image-rect
---
-{{CSSRef}}{{Non-standard_Header}}{{SeeCompatTable}}
+{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}}
-Властивість [CSS](/uk/docs/Web/CSS) **`-moz-image-rect`** для {{CSSxRef("background-image")}} дає змогу використовувати частину більшого зображення як тло.
+Властивість [CSS](/uk/docs/Web/CSS) **`-moz-image-rect`** (Mozilla – прямокутник зображення) для {{CSSxRef("background-image")}} дає змогу використовувати частину більшого зображення як тло.
## Синтаксис
@@ -157,4 +157,4 @@ function rotate() {
## Дивіться також
- [Розширення CSS від Mozilla](/uk/docs/Web/CSS/Mozilla_Extensions)
-- [Модуль CSS тла та меж](/uk/docs/Web/CSS/CSS_Backgrounds_and_Borders)
+- [Модуль CSS тла та меж](/uk/docs/Web/CSS/CSS_backgrounds_and_borders)
diff --git a/files/uk/web/css/-moz-image-region/index.md b/files/uk/web/css/-moz-image-region/index.md
index 93069673b6..c50bc8733b 100644
--- a/files/uk/web/css/-moz-image-region/index.md
+++ b/files/uk/web/css/-moz-image-region/index.md
@@ -11,6 +11,10 @@ browser-compat: css.properties.-moz-image-region
Для певних XUL елементів та псевдоелементів, що використовують зображення із властивості {{CSSxRef("list-style-image")}}, ця властивість задає ділянку зображення, що використовується замість усього зображення. Це дає змогу елементам використовувати різні шматки одного й того ж зображення – для покращення швидкодії.
+Синтаксис подібний до синтаксису властивості {{CSSxRef("clip")}}. Усі чотири значення відносні щодо верхнього лівого кута зображення.
+
+## Синтаксис
+
```css
/* Ключове слово як значення */
-moz-image-region: auto;
@@ -24,12 +28,6 @@ browser-compat: css.properties.-moz-image-region
-moz-image-region: unset;
```
-Синтаксис подібний до синтаксису властивості {{CSSxRef("clip")}}. Усі чотири значення відносні щодо верхнього лівого кута зображення.
-
-> **Примітка:** Для системи, що працює на будь-якому тлі, дивіться {{CSSxRef("-moz-image-rect")}}.
-
-## Синтаксис
-
### Значення
- `auto`
diff --git a/files/uk/web/css/-moz-orient/index.md b/files/uk/web/css/-moz-orient/index.md
index 4271a01e95..e03af42686 100644
--- a/files/uk/web/css/-moz-orient/index.md
+++ b/files/uk/web/css/-moz-orient/index.md
@@ -1,17 +1,15 @@
---
-title: '-moz-orient'
+title: "-moz-orient"
slug: Web/CSS/-moz-orient
-tags:
- - CSS
- - CSS Property
- - Non-standard
- - Reference
- - recipe:css-property
+page-type: css-property
+status:
+ - non-standard
browser-compat: css.properties.-moz-orient
---
+
{{CSSRef}}{{Non-standard_header}}
-Властивість [CSS](/uk/docs/Web/CSS) **`-moz-orient`** вказує орієнтацію елемента, до котрого застосована.
+Властивість [CSS](/uk/docs/Web/CSS) **`-moz-orient`** (Mozilla – орієнтація) задає орієнтацію елемента, до котрого застосована.
## Синтаксис
@@ -34,23 +32,20 @@ browser-compat: css.properties.-moz-orient
## Формальний синтаксис
-{{csssyntax}}
+```plain
+-moz-orient =
+ inline | block | horizontal | vertical
+```
## Приклади
### HTML
```html
-- Наступний індикатор виконання — - горизонтальний (як усталено): -
+Наступний індикатор виконання – горизонтальний (як усталено):
-- Наступний індикатор виконання — - вертикальний: -
+Наступний індикатор виконання – вертикальний:
``` @@ -66,7 +61,7 @@ browser-compat: css.properties.-moz-orient ### Результат -{{EmbedLiveSample("Examples","200","360")}} +{{EmbedLiveSample("pryklady","200","360")}} ## Специфікації diff --git a/files/uk/web/css/@media/index.md b/files/uk/web/css/@media/index.md new file mode 100644 index 0000000000..58a34deb67 --- /dev/null +++ b/files/uk/web/css/@media/index.md @@ -0,0 +1,252 @@ +--- +title: "@media" +slug: Web/CSS/@media +page-type: css-at-rule +browser-compat: css.at-rules.media +--- + +{{CSSRef}} + +[Директива](/uk/docs/Web/CSS/At-rule) [CSS](/uk/docs/Web/CSS) **`@media`** може вживатися для застосування частини списку стилів на основі результату одного чи більше [медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries). За її допомогою можна задати медіазапит і блок CSS до застосування тоді та тільки тоді, коли цей медіазапит відповідає пристроєві, на якому використовується вміст. + +> **Примітка:** У JavaScript правила, створені за допомогою `@media`, можна отримати за допомогою інтерфейсу {{domxref("CSSMediaRule")}} об'єктної моделі CSS. + +{{EmbedInteractiveExample("pages/tabbed/at-rule-media.html", "tabbed-standard")}} + +## Синтаксис + +Директива `@media` повинна стояти на зовнішньому рівні коду або бути вкладена в якусь іншу [директиву умовного групування](/uk/docs/Web/CSS/At-rule#pravyla-umovnykh-hrup). + +```css +/* На зовнішньому рівні коду */ +@media screen and (min-width: 900px) { + article { + padding: 1rem 3rem; + } +} + +/* Вкладена в іншу умовну директиву */ +@supports (display: flex) { + @media screen and (min-width: 900px) { + article { + display: flex; + } + } +} +``` + +Більше про синтаксис медіазапитів дивіться в статті [Використання медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries#syntaksys). + +## Опис + +### Типи медіа + +_Типи медіа_ описують загальні категорії пристроїв. +Коли не використовуються логічні оператори `not` і `only`, тип медіа є необов'язковим, – якщо він не вказаний, то вважається, що він дорівнює `all`. + +- `all` + - : Підходить для всіх пристроїв. +- `print` + - : Для сторінкових матеріалів і документів, що переглядаються на екрані в режимі попереднього перегляду перед друком. (Будь ласка, дивіться [сторінкові медіа](/uk/docs/Web/CSS/CSS_paged_media) для отримання інформації про проблеми форматування, які специфічні для цих форматів.) +- `screen` + - : Перш за все для екранів. + +> **Примітка:** CSS2.1 і [Медіазапити 3](https://drafts.csswg.org/mediaqueries-3/#background) визначали декілька додаткових типів медіа (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed` і `aural`), але вони стали нерекомендованими в [Медіазапитах 4](https://drafts.csswg.org/mediaqueries/#media-types) і не повинні використовуватися. + +### Можливості медіа + +_Можливості медіа_ описують конкретні характеристики {{glossary("User agent", "користувацького агента")}}, пристрій виведення чи оточення. +Вирази можливостей медіа перевіряють на їхню присутність або значення, і є цілковито необов'язковими. Кожен вираз можливості медіа повинен бути оточений дужками. + +- {{cssxref("@media/any-hover", "any-hover")}} + - : Чи дає який-небудь доступний механізм уведення користувачеві змогу наводити курсор на елементи? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/any-pointer", "any-pointer")}} + - : Чи є який-небудь доступний механізм уведення пристроєм-вказівником, і якщо так, то наскільки він точний? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/aspect-ratio", "aspect-ratio")}} + - : Співвідношення ширини до висоти області перегляду +- {{cssxref("@media/color", "color")}} + - : Число біт на колірний компонент пристрою виведення, або нуль, якщо пристрій не кольоровий +- {{cssxref("@media/color-gamut", "color-gamut")}} + - : Приблизний діапазон кольорів, що підтримується користувацьким агентом і пристроєм виведення. + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/color-index", "color-index")}} + - : Число записів у таблиці пошуку кольорів пристрою виведення, або нуль, якщо пристрій не використовує таку таблицю +- {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{deprecated_inline}} + - : Співвідношення ширини до висоти пристрою виведення. + Нерекомендований від Медіазапитів рівня 4. +- {{cssxref("@media/device-height", "device-height")}} {{deprecated_inline}} + - : Висота поверхні візуалізації пристрою виведення. + Нерекомендований від Медіазапитів рівня 4. +- {{cssxref("@media/device-width", "device-width")}} {{deprecated_inline}} + - : Ширина поверхні візуалізації пристрою виведення. Нерекомендований від Медіазапитів рівня 4. +- {{cssxref("@media/display-mode", "display-mode")}} + - : Режим виведення застосунку, як це визначено в полі [`display`](/uk/docs/Web/Manifest#display) маніфесту вебзастосунку. + Визначено в [специфікації Маніфесту вебзастосунку](https://w3c.github.io/manifest/#the-display-mode-media-feature). +- {{cssxref("@media/dynamic-range", "dynamic-range")}} + - : Поєднання яскравості, контрастності та глибини кольору, які підтримуються користувацьким агентом і пристроєм виведення. Додано в Медіазапитах рівня 5. +- {{cssxref("@media/forced-colors", "forced-colors")}} + - : З'ясувати, чи обмежує користувацький агент палітру кольорів. + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/grid", "grid")}} + - : Чи використовує пристрій сітку або бітовий екран? +- {{cssxref("@media/height", "height")}} + - : Висота області перегляду. +- {{cssxref("@media/hover", "hover")}} + - : Чи дає основний механізм уведення користувачеві змогу наводити курсор на елементи? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/inverted-colors", "inverted-colors")}} + - : Чи обертає користувацький агент або операційна система кольори? + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/monochrome", "monochrome")}} + - : Кількість біт на піксель у монохромному буфері кадру пристрою виведення, або нуль, якщо пристрій не монохромний. +- {{cssxref("@media/orientation", "orientation")}} + - : Орієнтація області перегляду. +- {{cssxref("@media/overflow-block", "overflow-block")}} + - : Як пристрій виведення обробляє вміст, що виходить за межі області перегляду вздовж блокової осі? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/overflow-inline", "overflow-inline")}} + - : Чи можна прокручувати вміст, що не вміщається в область перегляду вздовж рядкової осі? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/pointer", "pointer")}} + - : Чи є головний механізм введення пристроєм-вказівником, і якщо так, то наскільки точним він є? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} + - : З'ясувати, чи віддає користувач перевагу світлій, чи темній колірній схемі. + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/prefers-contrast", "prefers-contrast")}} + - : З'ясовує, чи вимагає користувач від системи збільшити або зменшити контрастність між сусідніми кольорами. + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} + - : Користувач віддає перевагу меншому рівню руху на сторінці. + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/resolution", "resolution")}} + - : Піксельна щільність пристрою виведення. +- {{cssxref("@media/scripting", "scripting")}} + - : Визначає, чи доступно використання сценаріїв (тобто JavaScript). + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/update", "update")}} + - : Як часто пристрій виведення може змінювати вигляд вмісту. + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/video-dynamic-range", "video-dynamic-range")}} + - : Поєднання яскравості, контрастності та глибини кольору, які підтримує план відео користувацького агента і пристрою виведення. Додано в Медіазапитах рівня 5. +- {{cssxref("@media/width", "width")}} + - : Ширина області перегляду, включно з шириною смуги прокрутки. + +### Логічні оператори + +_Логічні оператори_ `not`, `and`, `only` і `or` можуть використовуватися для створення складних медіазапитів. +Також можна поєднувати декілька медіазапитів в одне правило, розділяючи їх комами. + +- `and` + - : Використовується для поєднання декількох можливостей медіа в один медіазапит, вимагаючи `true` від кожної з можливостей, щоб запит був `true`. + Також використовується для поєднання можливостей медіа з типами медіа. +- `not` + + - : Використовується для заперечення медіазапиту, повертаючи `true`, якщо інакше запит повернув би `false`. + Якщо цей оператор присутній в розділеному комами списку запитів, то заперечує лише конкретний запит, до якого застосовується. + Якщо використовується оператор `not`, то _обов'язково_ повинен бути вказаний тип медіа. + + > **Примітка:** На рівні 3 ключове слово `not` не може використовуватися для заперечення окремого виразу можливості медіа, а лише цілого медіазапиту. + +- `only` + - : Застосовує стиль лише тоді, коли весь запит має відповідність. + Це корисно, щоб не дати старим браузерам застосувати вибрані стилі. + Коли `only` не використовується, старі браузери тлумачать запит `screen and (max-width: 500px)` як `screen`, ігноруючи решту запиту, і застосовують його стилі на всіх екранах. + Якщо використовується оператор `only`, _обов'язково_ повинен бути заданий тип медіа. +- `,` (кома) + - : Коми вживаються для поєднання різних медіазапитів у одне правило. + Кожен запит у списку, розділеному комами, розглядається окремо від інших. + Таким чином, якщо будь-який запит у списку дає `true`, то все твердження медіа дає `true`. + Інакше кажучи, списки поводяться як логічний оператор `or`. +- `or` + - : Рівносильно операторові `,`. Додано в Медіазапитах рівня 4.\ + +### Клієнтські підказки користувацькому агентові + +Частина медіазапитів має відповідні [клієнтські підказки користувацькому агентові](/uk/docs/Web/HTTP/Client_hints). +Це заголовки HTTP, що запитують вміст, який наперед оптимізований для конкретних потреб медіа. +Серед них {{HTTPHeader("Sec-CH-Prefers-Color-Scheme")}} і {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}. + +## Занепокоєння щодо доступності + +Щоб якнайкраще врахувати потреби людей, які змінюють розмір тексту на сайті, слід використовувати для ваших [медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries) одиниці [`em`](/uk/docs/Learn/CSS/Building_blocks/Values_and_units#chyslovi-znachennia), коли потрібні значення {{cssxref("<length>")}}. + +Як [`em`](/uk/docs/Learn/CSS/Building_blocks/Values_and_units#chyslovi-znachennia), так і [`px`](/uk/docs/Learn/CSS/Building_blocks/Values_and_units#chyslovi-znachennia) є дійсними одиницями, але [`em`](/uk/docs/Learn/CSS/Building_blocks/Values_and_units#chyslovi-znachennia) працює краще, якщо користувач змінює розмір тексту в браузері. + +Також варто розглянути медіазапити чи [клієнтські підказки користувацькому агентові](/uk/docs/Web/HTTP/Client_hints#kliientski-pidkazky-korystuvatskomu-ahentovi), щоб покращити користувацький досвід. +Наприклад, медіазапит [`prefers-reduced-motion`](/uk/docs/Web/CSS/@media/prefers-reduced-motion) або відповідний заголовок {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}) можна використати для мінімізації кількості анімації чи руху, на основі побажань користувача. + +## Безпека + +Оскільки медіазапити надають інформацію про можливості – і, відповідно, про функції та дизайн – пристрою, з яким працює користувач, існує потенціал їхнього зловживання для створення ["відбитку"](/uk/docs/Glossary/Fingerprinting), який ідентифікує пристрій, або принаймні категоризує його до певної міри деталізації, що може бути небажаним для користувачів. + +У зв'язку з цим потенціалом браузер може вирішити якось викривити повернені значення, щоб запобігти їх використанню для точного ідентифікування комп'ютера. Браузер може також пропонувати додаткові заходи в цій галузі; наприклад, якщо ввімкнено налаштування Firefox "Опиратися відстеженню за відбитком", то чимало медіазапитів віддає усталені значення, а не значення, що представляють реальний стан пристрою. + +## Формальний синтаксис + +{{csssyntax}} + +## Приклади + +### Перевірка на типи медіа – друк і екран + +```css +@media print { + body { + font-size: 10pt; + } +} + +@media screen { + body { + font-size: 13px; + } +} + +@media screen, print { + body { + line-height: 1.2; + } +} + +@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) { + body { + line-height: 1.4; + } +} +``` + +У 4 рівні Медіазапитів запроваджено новий синтаксис діапазону, що дає змогу писати менш об'ємні медіазапити при перевірці будь-якої можливості, що приймає діапазон, як показано в наступних прикладах: + +```css +@media (height > 600px) { + body { + line-height: 1.4; + } +} + +@media (400px <= width <= 700px) { + body { + line-height: 1.4; + } +} +``` + +Більше прикладів – на сторінці [Застосування медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries). + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- [Застосування медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries) +- У JavaScript `@media` можна отримати через інтерфейс об'єктної моделі CSS {{domxref("CSSMediaRule")}}. +- [Розширені можливості медіа Mozilla](/uk/docs/Web/CSS/Mozilla_Extensions#mozhlyvosti-media) +- [Розширені можливості медіа WebKit](/uk/docs/Web/CSS/WebKit_Extensions#mozhlyvosti-media) diff --git a/files/uk/web/css/@media/prefers-reduced-transparency/index.md b/files/uk/web/css/@media/prefers-reduced-transparency/index.md index 03ab4f4bb3..8700887c26 100644 --- a/files/uk/web/css/@media/prefers-reduced-transparency/index.md +++ b/files/uk/web/css/@media/prefers-reduced-transparency/index.md @@ -20,19 +20,12 @@ browser-compat: css.at-rules.media.prefers-reduced-transparency ## Користувацькі налаштування -У Firefox запит `reduce` враховується, якщо існує відповідне системне налаштування, інакше – він увімкнений, якщо також ввімкнено зниження рухів: +Різні операційні системи пропонують налаштування для зниження використання прозорості, і користувацькі агенти, ймовірно, покладаються на ці системні налаштування. +Також вони можуть покладатися на менш явні сигнали на платформах, що не пропонують такого окремого налаштування. -- У GTK/GNOME: Налаштування > Доступність > Бачення > Зниження анімації увімкнено. - - - У старіших версіях GNOME – GNOME Tweaks > Загальна вкладка (або Зовнішній вигляд, залежно від версії) > Анімації вимкнено. - - Інший варіант – додати `gtk-enable-animations = false` до блоку `[Settings]` [файлу конфігурації GTK 3](https://wiki.archlinux.org/title/GTK#Configuration). - -- У Plasma/KDE: Налаштування системи > Поведінка робочого простору -> Загальна поведінка > "Швидкість анімації" встановлена максимальною – "Миттєво". -- У Windows 10: Налаштування > Персоналізація > Кольори > Ефекти прозорості. -- У Windows 11: Налаштування > Персоналізація > Кольори > Ефекти прозорості. -- У macOS: Налаштування системи > Доступність > Відображення > Зниження прозорості. -- В iOS: Налаштування > Доступність > Рух. -- В Android 9+: Налаштування > Доступність > Відключити анімацію. +- У Windows 10 та 11: Налаштування > Персоналізація > Кольори > Ефекти прозорості. +- У macOS: Системні налаштування > Доступність > Дисплей > Менше прозорості. +- В iOS: Параметри > Доступність > Дисплей і розмір тексту > Зменшити прозорість. ## Приклади diff --git a/files/uk/web/css/_colon_blank/index.md b/files/uk/web/css/_colon_blank/index.md new file mode 100644 index 0000000000..aa334b993e --- /dev/null +++ b/files/uk/web/css/_colon_blank/index.md @@ -0,0 +1,60 @@ +--- +title: ":blank" +slug: Web/CSS/:blank +page-type: css-pseudo-class +status: + - experimental +browser-compat: css.selectors.blank +--- + +{{CSSRef}}{{SeeCompatTable}} + +> **Примітка:** Селектор `:blank` вважається ризикованим, оскільки CSSWG постійно його змінює. +> +> Дивіться [проблему CSSWG #1967](https://github.com/w3c/csswg-drafts/issues/1967). + +[Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:blank`** (незаповнений, прогалина) вибирає порожні елементи користувацького введення (наприклад, {{HTMLElement("input")}} або {{HTMLElement("textarea")}}). + +## Синтаксис + +```css +:blank { + /* ... */ +} +``` + +## Приклади + +### Простий приклад :blank + +У браузерах, що врешті-решт його підтримуватимуть, псевдоклас `:blank` дасть розробникам змогу певним чином виділяти контрольні поля, які не є обов'язковими, але все ж не мають введеного вмісту, можливо, як нагадування для користувачів. + +#### HTML + +```html + +``` + +#### CSS + +```css +textarea:blank { + border: 3px solid red; +} +``` + +#### Результат + +{{EmbedLiveSample('prostyi-pryklad-blank', '100%', 150)}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- {{CSSxRef(":empty")}} diff --git a/files/uk/web/css/_colon_checked/index.md b/files/uk/web/css/_colon_checked/index.md new file mode 100644 index 0000000000..fefa5c7b4d --- /dev/null +++ b/files/uk/web/css/_colon_checked/index.md @@ -0,0 +1,188 @@ +--- +title: ":checked" +slug: Web/CSS/:checked +page-type: css-pseudo-class +browser-compat: css.selectors.checked +--- + +{{CSSRef}} + +Селектор-[псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:checked`** (позначений) представляє будь-який елемент **radio** ([``](/uk/docs/Web/HTML/Element/input/radio)), **checkbox** ([``](/uk/docs/Web/HTML/Element/input/checkbox)) або **option** ({{HTMLElement("option")}} у {{HTMLElement("select")}}), що має позначку або переключений у стан `on`. + +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-checked.html", "tabbed-shorter")}} + +Користувачі можуть задати цей стан, вибравши елемент, або зняти його, скасувавши вибір елемента. + +> **Примітка:** У зв'язку з тим, що браузери нерідко обробляють елементи `