update(CSS): css/display/index.md

* chore(css): replace html-encoded values with native m-dashes * chore(css): update some terms according to convention * update(CSS): css/display/index.md Co-authored-by: Vitalii Perehonchuk <[email protected]>
webdoky · Jun 4, 2022 · 98909b7 · 98909b7
1 parent 6610cdb
commit 98909b7
Showing 1 changed file with 17 additions and 16 deletions.
diff --git a/files/uk/web/css/display/index.md b/files/uk/web/css/display/index.md
@@ -13,16 +13,16 @@ browser-compat: css.properties.display
 
 {{CSSRef}}
 
-Властивість [CSS](/uk/docs/Web/CSS) **`display`** встановлює, як розглядається елемент: як [блоковий чи рядковий елемент](/uk/docs/Web/CSS/CSS_Flow_Layout), і яке компонування буде застосовано до його нащадків: [потокове](/uk/docs/Web/CSS/CSS_Flow_Layout), [сіткове](/uk/docs/Web/CSS/CSS_Grid_Layout) чи [гнучке](/uk/docs/Web/CSS/CSS_Flexible_Box_Layout).
+Властивість [CSS](/uk/docs/Web/CSS) **`display`** (зображувати) встановлює, як розглядається елемент: як [блоковий чи рядковий елемент](/uk/docs/Web/CSS/CSS_Flow_Layout), і яке компонування буде застосовано до його нащадків: [потокове](/uk/docs/Web/CSS/CSS_Flow_Layout), [сіткове](/uk/docs/Web/CSS/CSS_Grid_Layout) чи [гнучке](/uk/docs/Web/CSS/CSS_Flexible_Box_Layout).
 
-Формально кажучи, властивість **`display`** встановлює для елемента внутрішній та зовнішній _типи відображення_. Зовнішній тип визначає участь елемента у [потоковому компонуванні](/uk/docs/Web/CSS/CSS_Flow_Layout); внутрішній тип визначає компонування нащадків. Деякі значення `display` повністю описані у власних специфікаціях; до прикладу, деталі того, що відбувається при встановленні `display: flex` визначено у специфікації Гнучкої блокової моделі CSS. Перегляньте [таблицю у кінці цього документа](#spetsyfikatsii) з усіма окремими специфікаціями.
+Формально кажучи, властивість **`display`** встановлює для елемента внутрішній та зовнішній _типи відображення_. Зовнішній тип визначає участь елемента у [потоковому компонуванні](/uk/docs/Web/CSS/CSS_Flow_Layout); внутрішній тип визначає компонування нащадків. Деякі значення `display` повністю описані у власних специфікаціях; до прикладу, деталі того, що відбувається при встановленні `display: flex` визначено у специфікації Гнучкої блокової моделі CSS.
 
 ## Синтаксис
 
 Властивість CSS `display` вказується за допомогою ключових слів.
 
 ```css
-/* застарілі значення */
+/* складені значення */
 display: block;
 display: inline;
 display: inline-block;
@@ -55,6 +55,7 @@ display: list-item;
 display: inherit;
 display: initial;
 display: revert;
+display: revert-layer;
 display: unset;
 ```
 
@@ -73,7 +74,7 @@ display: unset;
     - `inline`
       - : Елемент утворює одну або більше рядкових рамок, що не утворюють розривів рядка до або після них. У нормальному потоці наступний елемент буде розташований на тому ж самому рядку, що й попередній, якщо в рядку достатньо місця для нього.
 
-> **Зверніть увагу:** У випадку отримання виключно зовнішнього значення (наприклад, `display: block`, чи `display: inline`) ті браузери, що підтримують синтаксис із двома значеннями, встановлюють внутрішнє значення у `flow`.
+> **Примітка:** У випадку отримання виключно зовнішнього значення (наприклад, `display: block`, чи `display: inline`) ті браузери, що підтримують синтаксис із двома значеннями, встановлюють внутрішнє значення у `flow`.
 > Така логіка призводить до очікуваної поведінки, наприклад: описавши елемент як `block`, очікуємо, що нащадки такого елемента братимуть участь у блоковій та рядковій звичайних потокових розкладках.
 
 ### Спрямовані всередину
@@ -99,7 +100,7 @@ display: unset;
     - `ruby` {{Experimental_Inline}}
       - : Елемент поводиться як рядковий, і розкладає свій вміст згідно з рубіновою моделлю форматування. Він поводиться як відповідний елемент HTML {{HTMLElement("ruby")}}.
 
-> **Зверніть увагу:** Браузери, що підтримують синтаксис із двома значеннями, отримуючи виключно внутрішнє значення, наприклад, `display: flex`, чи `display: grid`, встановлюють внутрішнє значення у `block`.
+> **Примітка:** Браузери, що підтримують синтаксис із двома значеннями, отримуючи виключно внутрішнє значення, наприклад, `display: flex`, чи `display: grid`, встановлюють внутрішнє значення у `block`.
 > Така логіка призводить до очікуваної поведінки, наприклад: описавши елемент як `grid`, очікуємо, що для сіткового контейнера буде створено рамки блокового рівня.
 
 ### Пункт списку
@@ -112,7 +113,7 @@ display: unset;
 
 `list-item` також може бути скомбінований з будь-яким ключовим значенням {{CSSxRef("&lt;display-outside&gt;")}}, а також із ключовими словами {{CSSxRef("&lt;display-inside&gt;")}} `flow` чи `flow-root`.
 
-> **Зверніть увагу:** У браузерах, що підтримують синтаксис із двома значеннями, якщо внутрішнє значення не вказане, то воно вважається рівним `flow`.
+> **Примітка:** У браузерах, що підтримують синтаксис із двома значеннями, якщо внутрішнє значення не вказане, то воно вважається рівним `flow`.
 > Якщо не вказане зовнішнє значення, головні рамки елемента матимуть тип зовнішнього представлення `block`.
 
 ### Внутрішні
@@ -162,11 +163,11 @@ display: unset;
       - : Вимикає відображення елемента так, що він не впливає на розкладку (документ візуалізується так, ніби елемент не існує). Усі дочірні елементи також не відображаються.
         Аби змусити елемент зайняти простір, котрий він би усталено зайняв, але не показувати нічого на його місці, використовуйте натомість властивість {{CSSxRef("visibility")}}.
 
-### Застарілі
+### Складені
 
 - {{CSSxRef("&lt;display-legacy&gt;")}}
 
-  - : CSS 2 використовував однослівний синтаксис властивості `display`, вимагаючи окремих ключових слів для варіантів одного й того ж режиму компонування на рівні блока та рівні вбудування.
+  - : CSS 2 використовував однослівний, складений синтаксис властивості `display`, вимагаючи окремих ключових слів для варіантів одного й того ж режиму компонування на рівні блока та рівні вбудування.
 
     - `inline-block`
 
@@ -186,9 +187,9 @@ display: unset;
 
 ### Який синтаксис слід використовувати сьогодні?
 
-Специфікація рівня 3 вимагає два значення для властивості `display`, аби дати змогу вказати зовнішній та внутрішній типи представлення явно, &mdash; однак це поки не підтримується браузерами як слід.
+Специфікація рівня 3 вимагає два значення для властивості `display`, аби дати змогу вказати зовнішній та внутрішній типи представлення явно, — однак це поки не підтримується браузерами як слід.
 
-Методи `<display-legacy>` дають змогу досягнути тих самих результатів з одним ключовим значенням, і розробники повинні надавати йому перевагу, поки двослівний синтаксис не отримає більшої підтримки. Наприклад, при використанні двох значень можна було б описати рядковий flex-контейнер наступним чином:
+Складені методи `<display-legacy>` дають змогу досягнути тих самих результатів з одним ключовим значенням, і розробники повинні надавати йому перевагу, поки двослівний синтаксис не отримає більшої підтримки. Наприклад, при використанні двох значень можна було б описати рядковий flex-контейнер наступним чином:
 
 ```css
 .container {
@@ -217,7 +218,7 @@ display: unset;
 
 ## Опис
 
-Окремі сторінки для різних типів значень, котрі може прийняти властивість `display`, містять численні приклади цих значень в дії &mdash; дивіться розділ {{anch("Syntax")}}. На додачу &mdash; перегляньте наступний матеріал, що поглиблено описує різні значення display.
+Окремі сторінки для різних типів значень, котрі може прийняти властивість `display`, містять численні приклади цих значень в дії — дивіться розділ [Синтаксис](#syntaksys). На додачу — перегляньте наступний матеріал, що поглиблено описує різні значення display.
 
 - [Пристосування до двослівного синтаксису display](/uk/docs/Web/CSS/display/two-value_syntax_of_display)
 
@@ -267,14 +268,14 @@ display: unset;
 
 Поточні реалізації у більшості браузерів приберуть із [дерева доступності](/uk/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) будь-який елемент зі значенням `contents` властивості `display` (залишивши у дереві його нащадків). Це призведе до того, що сам елемент більше не буде оголошений технологією читання екрану. Це некоректна поведінка згідно зі [специфікацією CSS](https://drafts.csswg.org/css-display/#valdef-display-contents).
 
-- [Більш доступна розмітка із display: contents | Гідде де Вріс](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents)
-- [Display: Contents не є скиданням CSS | Адріан Розеллі](http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
+- [Більш доступна розмітка із display: contents | Гідде де Вріс](https://hidde.blog/more-accessible-markup-with-display-contents/)
+- [Display: Contents не є скиданням CSS | Адріан Розеллі](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
 
 ### Таблиці
 
 Зміна значення `display` для елемента {{HTMLElement("table")}} на `block`, `grid` чи `flex` змінить його представлення у [дереві доступності](/uk/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis). Це спричинить до того, що таблиця не буде оголошена як слід технологією читання екрану.
 
-- [Коротка нотатка про те, що властивість CSS display робить із семантикою таблиці — The Paciello Group](https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/)
+- [Коротка нотатка про те, що властивість CSS display робить із семантикою таблиці — The Paciello Group](https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/)
 - [Прихований вміст для кращої доступності | Go Make Things](https://gomakethings.com/hidden-content-for-better-a11y/)
 - [MDN: Розуміння Вказівок з доступності вебконтенту, пояснення Вказівки 1.3](/uk/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways)
 - [Розуміння критерію успіху 1.3.1 | W3C Розуміння Вказівок з доступності вебконтенту 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
@@ -291,7 +292,7 @@ display: unset;
 
 ### Порівняння значень display
 
-У цьому прикладі &mdash; два контейнерні елементи блокового рівня, кожен із трьома рядковими дочірніми елементами. Нижче &mdash; меню вибору, що дає змогу застосувати різні значення `display` до контейнерів, аби порівняти та протиставити те, як різні значення впливають на компонування елемента і його нащадків.
+У цьому прикладі — два контейнерні елементи блокового рівня, кожен із трьома рядковими дочірніми елементами. Нижче — меню вибору, що дає змогу застосувати різні значення `display` до контейнерів, аби порівняти та протиставити те, як різні значення впливають на компонування елемента і його нащадків.
 
 Ми включили {{cssxref("padding")}} та {{cssxref("background-color")}} на контейнерах та їх нащадках, щоб було легше бачити ефект значень `display`.
 
@@ -381,7 +382,7 @@ updateDisplay();
 
 {{EmbedLiveSample('display_value_comparison','100%', 440)}}
 
-> **Зверніть увагу:** Більше прикладів можна знайти на сторінках кожного окремого типу представлення даних, посилання &mdash; вище.
+> **Примітка:** Більше прикладів можна знайти на сторінках кожного окремого типу представлення даних, посилання — вище.
 
 ## Специфікації