diff options
Diffstat (limited to 'files/uk/web/css')
40 files changed, 9386 insertions, 0 deletions
diff --git a/files/uk/web/css/-moz-orient/index.html b/files/uk/web/css/-moz-orient/index.html new file mode 100644 index 0000000000..fbed678743 --- /dev/null +++ b/files/uk/web/css/-moz-orient/index.html @@ -0,0 +1,153 @@ +--- +title: '-moz-orient' +slug: Web/CSS/-moz-orient +translation_of: Web/CSS/-moz-orient +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p><code>-moz-orient</code> <a href="/en-US/docs/Web/CSS">CSS</a> властивість, що задає орієнтацію обраного елемента.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Значення">Значення</h3> + +<dl> + <dt><code>inline</code></dt> + <dd>The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes.</dd> + <dt><code>block</code></dt> + <dd>The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes.</dd> + <dt><code>horizontal</code></dt> + <dd>The element is rendered horizontally.</dd> + <dt><code>vertical</code></dt> + <dd>The element is rendered vertically.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + The following progress meter + is horizontal (the default): +</p> +<progress max="100" value="75"></progress> + +<p> + The following progress meter + is vertical: +</p> +<progress class="vert" max="100" value="75"></progress></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.vert { + -moz-orient: vertical; + width: 16px; + height: 150px; +}</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Examples","200","360")}}</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Though <a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">submitted</a> to the W3C, with positive initial feedback, this property is not yet part of any specification; currently, this is a Mozilla-specific extension (that is, <code>-moz-orient</code>).</p> + +<h2 id="Браузерна_сумісність">Браузерна сумісність</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>auto</code> value</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("21.0")}}<sup>[2]</sup><br> + {{CompatNo}}{{CompatGeckoDesktop(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>inline</code> and <code>block</code> values</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>auto</code> value</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("21.0")}}<sup>[2]</sup><br> + {{CompatNo}}{{CompatGeckoDesktop(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>inline</code> and <code>block</code> values</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Gecko 6.0 {{geckoRelease("6.0")}}, there was a bug that causes vertical {{HTMLElement("progress")}} elements to render with the dimensions of a horizontal bar. This is fixed in Gecko 7.0 {{geckoRelease("7.0")}}.</p> + +<p>[2] The <code>auto</code> value was equivalent to <code>horizontal</code>.</p> + +<h2 id="Дивитися_також">Дивитися також</h2> + +<ul> + <li>{{cssxref("box-orient")}}</li> +</ul> diff --git a/files/uk/web/css/@font-face/font-display/index.html b/files/uk/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..d11214dcbc --- /dev/null +++ b/files/uk/web/css/@font-face/font-display/index.html @@ -0,0 +1,87 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +translation_of: Web/CSS/@font-face/font-display +--- +<div>{{CSSRef}}</div> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Властивість </span></font>font-display</code> визначає як font face відображаєтся стосовно як він завантижився і готовий до використання.</p> + +<h2 id="Хронологія_відображення_шрифта">Хронологія відображення шрифта</h2> + +<p>Хронологія відображення шрифта залежить від часу на початку завантаження шрифта та його використання. Типи хронології поділені на три частини які вказують поведінку відображення усих елементів які використовують цей шрифт.</p> + +<dl> + <dt>Блокування шрифту(block)</dt> + <dd>Якщо шрифт не завантажений, усі елементи які очікують на його використання мають відображатись невидимими(<em>invisible</em>). Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.</dd> + <dt>Заміна шрифту(swap)</dt> + <dd>Якщо шрифт не завантажений, усі елементи що очікують на його використання , мають використати запасний шрифт. Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.</dd> + <dt>Невдача(failure)</dt> + <dd>Якщо шрифт не був завантажений, клієнт відображає його як невдачно завантажений, що викликає звичайне резервування шрифту.</dd> +</dl> + +<p>{{cssinfo}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: css;">/* Keyword values */ +font-display: auto; +font-display: block; +font-display: swap; +font-display: fallback; +font-display: optional;</pre> + +<h3 id="Значення">Значення</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Відображення шрифту виконуєтся автоматично клієнтом.</dd> + <dt><code>block</code></dt> + <dd>Надає елементам короткий період блокування і нескінченний swap період.</dd> + <dt><code>swap</code></dt> + <dd>Надає надзвичайно малий період блокування і нескінченний період підміни шрифту.</dd> + <dt><code>fallback</code></dt> + <dd>Надає надзвичайно малий період блокування і малий період підміни шрифту.</dd> + <dt><code>optional</code></dt> + <dd>Надає надзвичайно малий період блокування без підміни шрифту.</dd> +</dl> + +<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклад">Приклад</h2> + +<pre class="brush: css; highlight[7]">@font-face { + font-family: ExampleFont; + src: url(/path/to/fonts/examplefont.woff) format('woff'), + url(/path/to/fonts/examplefont.eot) format('eot'); + font-weight: 400; + font-style: normal; + font-display: fallback; +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + + + +<p>{{Compat("css.at-rules.font-face.font-display")}}</p> diff --git a/files/uk/web/css/@font-face/index.html b/files/uk/web/css/@font-face/index.html new file mode 100644 index 0000000000..6a872bcb8f --- /dev/null +++ b/files/uk/web/css/@font-face/index.html @@ -0,0 +1,197 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - '@-правила' + - '@font-face' + - CSS + - CSS Шрифти + - Посилання + - типографія + - шрифти +translation_of: Web/CSS/@font-face +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> вказує спеціальний шрифт для відображення текста. Шрифт може бути завантажений з зовнішнього сервера або встановлено локально на комп'ютері користувача. Якщо функція </span><code>local()</code> вказує ім'я шрифта то його пошук буде відбуватися на комп'ютері користувача. Інакше ресурси шрифти вказані з використанням функції <code>url()</code> будуть завантажені і використані</p> + +<p>Дозвіл авторам впроваджувати їх власні шрифти дає можливість стилізувати контент без обмежень в так званих "безпечних" шрифтах (Це такі шрифти,що широко використовуються та визнані як загальнодоступні). Можливість вказувати ім'я локально встановлених шрифтів дає можливість налаштовувати шрифт більш гнучко без залежності від інтернет з'єднання.</p> + +<p>Поширеним випадком є використання <code>url()</code> і <code>local()</code> разом, що дає змогу використовувати втановлений користувачем шрифт і завантажувати шрифт у разі його відсутності на користувацькому пристрої.</p> + +<p><code>@font-face</code> @-правило може бути використане не лише на вищому рівні CSS, а й всередині будь-якого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">@-правила</a>.</p> + +<pre class="brush: css no-line-numbers">@font-face { + font-family: "Open Sans"; + src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); +}</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<h3 id="Опис">Опис</h3> + +<dl> + <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt> + <dd>Вказує як шрифт відображатиметься в залежності від того чи він завантажений та готовий до використання.</dd> + <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt> + <dd>Задає ім'я, що буде використовуватися для задання властивостей шрифта.</dd> + <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt> + <dd>Значення {{cssxref("font-stretch")}} . Починаючи з Firefox 61 (та інших сучасних браузерів) {{cssxref("font-stretch")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-stretch: 50% 200%;</code></dd> + <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt> + <dd>Значення {{cssxref("font-style")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-style")}}.також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-style: oblique 20deg 50deg;</code></dd> + <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt> + <dd>Значення {{cssxref("font-weight")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-weight")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-weight: 100 400;</code></dd> + <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt> + <dd>Значення {{cssxref("font-variant")}}.</dd> + <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt> + <dd>Дозволяє контролювати інші розширені можлифості OpenType шрифтів.</dd> + <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt> + <dd>Дозволяє здійснювати низькорівневий контроль над варіаціями шрифтів OpenType чи TrueType, вказуючи назви осей з чотирьох букв для зміни разом з їх значеннями.</dd> + <dt>{{cssxref("@font-face/src", "src")}}</dt> + <dd> + <p>Вказує ресурс, що містить дані шрифта. Це може бути URL для віддаленого файлу шрифта чи ім'я для шрифта на комп'ютері користувача.</p> + + <p>Щоб дати браузеру підказку який вибрати формат ресурсу шрифта, формат можна вказати в середині функції <code>format()</code>:</p> + + <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>, + url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre> + + <p>Достіпні типи: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, і <code>"svg"</code>.</p> + </dd> + <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt> + <dd>Діапазон Unicode кодів, що буде використовуватись в шрифті.</dd> +</dl> + +<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклади">Приклади</h2> + +<p>Цей приклад просто вказує завантажуваний шрифт для використання і застосовує його до всього тіла документа:</p> + +<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Дивитися live приклад</a></p> + +<pre class="brush: html"><html> +<head> + <title>Web Font Sample</title> + <style type="text/css" media="screen, print"> + @font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); + } + + body { font-family: "Bitstream Vera Serif Bold", serif } + </style> +</head> +<body> + This is Bitstream Vera Serif Bold. +</body> +</html> +</pre> + +<p>В цьому прикладі використовується локальний шрифт користувача "Helvetica Neue Bold"; якщо у користувача цей шрифт не встановлений тоді натомість використовується завантажуваний шрифт "MgOpenModernaBold.ttf":</p> + +<pre class="brush: css">@font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; +} +</pre> + +<h2 id="MIME-типи_шрифтів">MIME-типи шрифтів</h2> + +<table> + <thead> + <tr> + <th>Формат</th> + <th>MIME-тип</th> + </tr> + </thead> + <tbody> + <tr> + <td>TrueType</td> + <td><code>font/ttf</code></td> + </tr> + <tr> + <td>OpenType</td> + <td><code>font/otf</code></td> + </tr> + <tr> + <td>Web Open File Format</td> + <td><code>font/woff</code></td> + </tr> + <tr> + <td>Web Open File Format 2</td> + <td><code>font/woff2</code></td> + </tr> + </tbody> +</table> + +<h2 id="Нотатки">Нотатки</h2> + +<ul> + <li>Веб шрифти підлягають одному і тому ж обмеженню доменів (файли шрифтів повинні знаходитись на тому ж домен, що і сторінка на яких вони використовуться) , <a href="/en-US/docs/HTTP_access_control">HTTP контроль доступу</a> використовується для полегшення цього обмеження.</li> + <li><code>@font-face</code> не може бути оголошеним в CSS селекторі. Наприклад наступне не працюватиме: + <pre class="brush: css; example-bad">.className { + @font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; + } +}</pre> + </li> +</ul> + +<h2 id="Специфікація">Специфікація</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td> + <td>{{Spec2('WOFF2.0')}}</td> + <td>Специфікація фомату шрифта з новим алгоритмом стиснення</td> + </tr> + <tr> + <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td> + <td>{{Spec2('WOFF1.0')}}</td> + <td>Специфікація формата шрифта</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Початкове визначення</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_браузерів">Підтримка браузерів </h2> + +<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div> + +<p>{{Compat("css.at-rules.font-face")}}</p> + +<h2 id="Прогляньте_також">Прогляньте також</h2> + +<ul> + <li><a href="/en-US/docs/WOFF"> Про WOFF</a></li> + <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li> + <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Гарні шрифти @font-face</a></li> + <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li> + <li><a class="external" href="http://caniuse.com/woff">Коли я можу використовувати WOFF?</a></li> + <li><a class="external" href="http://caniuse.com/svg-fonts">Коли я можу використовувати SVG Fonts?</a></li> + <li><a href="https://coolfont.org">Безкоштовні круті шрифти</a></li> +</ul> diff --git a/files/uk/web/css/@page/bleed/index.html b/files/uk/web/css/@page/bleed/index.html new file mode 100644 index 0000000000..f937f5dfaf --- /dev/null +++ b/files/uk/web/css/@page/bleed/index.html @@ -0,0 +1,83 @@ +--- +title: bleed +slug: Web/CSS/@page/bleed +tags: + - '@сторінка' + - CSS + - Web +translation_of: Web/CSS/@page/bleed +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p> <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>bleed </strong>це пропускний дескриптор правил css</span></font>, використовується з {{cssxref("@page")}} за правилом , визначає ступінь області пропуску сторінки за межами сторінки. Ця властивість має тільки ефект якщо позначки обрізання увімкнено за допомогою властивості {{cssxref("@page/marks", "marks")}} property.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css notranslate">/* Keyword values */ +bleed: auto; + +/* <length> values */ +bleed: 8pt; +bleed: 1cm; +</pre> + +<h3 id="Значення">Значення</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Обчислюється до 6pt якщо значення в {{cssxref("@page/marks", "marks")}} є обрізаним. В іншому випадку він обчислюється до нуля.</dd> + <dt><code>{{cssxref("<довжина>")}}</code></dt> + <dd><br> + Вказує, наскільки назовні, в кожному напрямку, область випуску простягається поза полем сторінки. Значення можуть бути від’ємними, але можуть бути певні обмеження щодо реалізації.</dd> +</dl> + +<h2 id="Формальне_визначення">Формальне визначення</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Формальний_синтаксис">Формальний синтаксис</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Встановлення_кровоточення_сторінки_в_1см.">Встановлення кровоточення сторінки в 1см.</h3> + +<pre class="brush: css notranslate">@page { + bleed: 1cm; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Стан</th> + <th scope="col">Коментарі</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}</td> + <td>{{Spec2("CSS3 Paged Media")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Сувмістність_з_браузерами">Сувмістність з браузерами</h2> + +<div class="hidden"> Таблиця сувмістності на цій сторінці on згенерована зі структорованих даних . Якщо ви хочете зробити свій внесок інформації</div> + +<div class="hidden"><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит на висвітлення.</div> + +<p>{{Compat("css.at-rules.page.bleed")}}</p> + +<h2 id="Зазвичай_переглядають">Зазвичай переглядають</h2> + +<ul> + <li>{{cssxref("@page/marks", "marks")}}</li> + <li>{{cssxref("@page/size", "size")}}</li> +</ul> diff --git a/files/uk/web/css/@page/index.html b/files/uk/web/css/@page/index.html new file mode 100644 index 0000000000..7704892bfb --- /dev/null +++ b/files/uk/web/css/@page/index.html @@ -0,0 +1,112 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - '@page' + - At-rule + - CSS + - Layout + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/@page +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>@page</code></strong> CSS at-rule is used to modify some CSS properties when printing a document.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">@page { + margin: 1cm; +} + +@page :first { + margin: 2cm; +}</pre> + +<h3 id="Descriptors">Descriptors</h3> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt> + <dd>Specifies the target size and orientation of the page box’s containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@page/marks"><code>marks</code></a></dt> + <dd>Adds crop and/or registration marks to the document.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt> + <dd>Specifies the extent beyond the page box at which the page rendering is clipped.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>You can't change all CSS properties with <code>@page</code>. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.</p> + +<p>The <code>@page</code> at-rule can be accessed via the CSS object model interface {{domxref("CSSPageRule")}}.</p> + +<div class="note"><strong>Note:</strong> The W3C is discussing how to handle viewport-related {{cssxref("<length>")}} units, <code>vh</code>, <code>vw</code>, <code>vmin</code>, and <code>vmax</code>. Meanwhile do not use them within a <code>@page</code> at-rule.</div> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="page_pseudo-class_examples">@page pseudo-class examples</h3> + +<p>Please refer to the various <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> of <code>@page</code> for examples.</p> + +<ul> + <li>{{Cssxref(":blank")}}</li> + <li>{{Cssxref(":first")}}</li> + <li>{{Cssxref(":left")}}</li> + <li>{{Cssxref(":right")}}</li> + <li>{{Cssxref(":recto")}} {{experimental_inline}}</li> + <li>{{Cssxref(":verso")}} {{experimental_inline}}</li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#page', ':recto and :verso')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Adds the <code>:recto</code> and <code>:verso</code> page selectors</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>No change from {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a <code>@page</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.at-rules.page")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>See the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.)</li> +</ul> diff --git a/files/uk/web/css/_colon_active/index.html b/files/uk/web/css/_colon_active/index.html new file mode 100644 index 0000000000..f85ba17940 --- /dev/null +++ b/files/uk/web/css/_colon_active/index.html @@ -0,0 +1,129 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Веб + - Довідка + - Макет + - Псевдоклас +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS псевдо-клас</a> <strong><code>:active</code></strong> відображає елемент (наприклад, кнопку), який в даний момент активовано користувачем. У випадку застосування миші, "активація" зазвичай починається в момент натискання основної клавіші.</p> + +<pre class="brush: css no-line-numbers">/* Вибирає будь-який <a>, що активується */ +a:active { + color: red; +}</pre> + +<p>Псевдоклас <code>:active</code> частіш за все використовується на елементах {{HTMLElement("a")}} і {{HTMLElement("button")}}. Інші поширені варіанти застосування цього селектору включають елементи, що <em>містять</em> активований елемент, а також елементи форм, які активуються через асоційований із ними {{HTMLElement("label")}}.</p> + +<p>Стилі, задані псевдокласом <code>:active</code> будуть перевизначені будь-яким наступним спорідненим із посиланнями псевдокласом ({{cssxref(":link")}}, {{cssxref(":hover")}}, чи {{cssxref(":visited")}}), що має хоча б таку ж специфічність. Для правильної стилізації посилань помістіть правила <code>:active</code> після всіх інших споріднених із посиланнями правил, як визначено порядком <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Зауважте, що:</strong> на системах із багатокнопковими мишами CSS3 вказує, що псевдоклас <code>:active</code> повинен застосовуватись лише для основної кнопки; у випадку правосторонньої миші це зазвичай крайня ліва кнопка.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Активні_посилання">Активні посилання</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Цей абзац містить посилання: + <a href="#">Це посилання буде забарвлено у червоний при натисканні на нього.</a> + Цей абзац отримає сірий фон при натисканні на посилання. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a:link { color: blue; } /* Невідвідані посилання */ +a:visited { color: purple; } /* Відвідані посилання */ +a:hover { background: yellow; } /* Посилання із наведеним курсором */ +a:active { color: red; } /* Активні посилання */ + +p:active { background: #eee; } /* Активні абзаци */</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample('Активні_посилання')}}</p> + +<h3 id="Активні_елементи_форм">Активні елементи форм</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><form> + <label for="my-button">Моя кнопка: </label> + <button id="my-button" type="button">Спробуйте натиснути на мене чи на мою мітку!</button> +</form></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">form :active { + color: red; +} + +form button { + background: white; +}</pre> + +<h4 id="Результат_2">Результат</h4> + +<p>{{EmbedLiveSample('Активні_елементи_форм')}}</p> + +<h2 id="Специфікації"><span>Специфікації</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Примітка</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Без змін.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Без змін.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Без змін.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Первинне визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div> + +<p>{{Compat("css.selectors.active")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>Споріднені з посиланнями псевдокласи: {{cssxref(":link")}}, {{cssxref(":visited")}}, та {{cssxref(":hover")}}</li> +</ul> diff --git a/files/uk/web/css/_colon_root/index.html b/files/uk/web/css/_colon_root/index.html new file mode 100644 index 0000000000..b7b20a01d9 --- /dev/null +++ b/files/uk/web/css/_colon_root/index.html @@ -0,0 +1,100 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - Псевдо-клас +translation_of: 'Web/CSS/:root' +--- +<div>{{CSSRef}}</div> + +<h2 id="Опис">Опис</h2> + +<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдо-клас</a> <code>:root</code> вказує на кореневий елемент дерева документа. Якщо застосувати його до HTML, <code>:root</code> відображає {{HTMLElement("html")}} і є ідентичним селектору <code>html</code>, та не зважаючи на це, його <a href="/en-US/docs/Web/CSS/Specificity">вага</a> є більшою.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклад">Приклад</h2> + +<p>Використання <code>:root</code> може бути корисним при декларуванні глобальних <a href="/en-US/docs/Web/CSS/Using_CSS_variables">змінних CSS</a></p> + +<pre class="brush: css">:root { + --main-color: hotpink; + --pane-padding: 5px 42px; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Стан</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Селектори', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Без змін</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Селектори', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Початкове визначення</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерна_сумісність">Браузерна сумісність</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Підтримка</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базова</td> + <td>1</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>9</td> + <td>9.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Підтримка</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базова</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/uk/web/css/_doublecolon_before/index.html b/files/uk/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..ec3560be1f --- /dev/null +++ b/files/uk/web/css/_doublecolon_before/index.html @@ -0,0 +1,237 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Web + - Псевдо-елемент + - Розмытка +translation_of: 'Web/CSS/::before' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">В CSS, <strong><code>::before</code></strong> створює <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-елемент</a>, що є першим дочірнім елементом вибраного елемента. Це часто використовується для косметичного вмісту елемента з властивістю {{cssxref("content")}}.</span> Він за замовчуванням лінійний</p> + +<pre class="brush: css"><code class="language-css"><span class="comment token">/* Додає серце перед посиланнями */</span> +<span class="selector token">a<span class="pseudo-class token">::before</span> </span><span class="punctuation token">{ +</span> <span class="property token">content: "</span></code>♥<code class="language-css"><span class="property token">";</span> +<span class="punctuation token">}</span></code></pre> + +<div class="note"> +<p><strong>Нотатка:</strong> Псевдо-елемент згенерований за допомогою <code>::before</code> і<code>::after</code> <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">міститься в вікні форматування об'єкта</a>, і таким чином не приймає <em><a href="/en-US/docs/Web/CSS/Replaced_element">замінювані елементи</a> як </em> {{htmlelement("img")}}, або {{htmlelement("br")}} елементи.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<div class="note"> +<p><strong>Нотатка:</strong> CSS3 представляє позначення <code>::before</code> (з двома двокрапками) щоб розрізняти <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдо-класи</a> і <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-елементи</a>. Браузер також приймає <code>:before</code>, представлений в CSS2.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Додавання_лапок">Додавання лапок</h3> + +<p>Простий приклад використання псевдо-елемента <code>::before</code> додає лапки. Тут ми використовуємо і <code>::before</code> і <code>{{Cssxref("::after")}}</code> замість символів лапок.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><q>Деякі цитати,</q> сказав він, <q> кращі за інші.</q></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css">q::before { + content: "«"; + color: blue; +} + +q::after { + content: "»"; + color: red; +}</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}</p> + +<h3 id="Декоративний_приклад">Декоративний приклад</h3> + +<p>Ми можемо стилізувати текст чи зображення у властивості {{cssxref("content")}} майже як завгодно.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><span class="ribbon">Зверніть увагу де помаранчевий блок</span></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::before { + content: "Подивіться на цей помаранчевий блок."; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="Результат_2">Результат</h4> + +<p>{{EmbedLiveSample('Decorative_example', 450, 60)}}</p> + +<h3 id="Список_завдань">Список завдань</h3> + +<p>В цьому прикладі ми створимо простий список завдань, використовуючи псевдо-елемент. Цей метод може часто використовуватись щоб додавати невеликі штрихи до UI щоб покращити user experience.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><ul> + <li>Купити молоко</li> + <li>Вигуляти собаку</li> + <li>Вправи</li> + <li>Писати код</li> + <li>Грати музику</li> + <li>Відпочити</li> +</ul> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">li { + list-style-type: none; + position: relative; + margin: 2px; + padding: 0.5em 0.5em 0.5em 2em; + background: lightgrey; + font-family: sans-serif; +} + +li.done { + background: #CCFF99; +} + +li.done::before { + content: ''; + position: absolute; + border-color: #009933; + border-style: solid; + border-width: 0 0.3em 0.25em 0; + height: 1em; + top: 1.3em; + left: 0.6em; + margin-top: -1em; + transform: rotate(45deg); + width: 0.5em; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var list = document.querySelector('ul'); +list.addEventListener('click', function(ev) { + if (ev.target.tagName === 'LI') { + ev.target.classList.toggle('done'); + } +}, false); +</pre> + +<p>Вище - код живого прикладу. Відмітьте, що ми не використовуємо іконки, а галочкою являється псевдо-елемент <code>::before</code> які стилізовані за допомогою CSS.</p> + +<h4 id="Результат_3">Результат</h4> + +<p>{{EmbedLiveSample('To-do_list', 400, 300)}}</p> + +<h2 id="Нотатки">Нотатки</h2> + +<p>Також виправлення позиціонування в Firefox 3.5 не дозволяють вмісту бути згенерованим як окремий попередній елемент (відповідно до <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">специфікації CSS</a> "Псевдо-елемент :before і :after впливають на інші блоки так як вони були б справжніми елементами"), Вони можуть використовуватись, щоб впроваджувати незначні поліпшення для не табличних розміток. (наприклад, щоб досягти центрування) в випадку доки вміст, що має центруватись поміщений в дочірній наступний , колонка до і після контенту може бути представлена без додавання попереднього чи наступного сусіднього блоку (наприклад, це, можливо, найбільш семантично правильніше, додавати допоміжний span як нижче, чим додавати <div/> перед і після). (І завжди пам'ятайте додавати ширину до float об'єкта, інакше він не буде обтікати!)</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><div class="example"> +<span id="floatme">"Floated Before" має згенеруватись ліворуч від +вікна перегляду і не виносити за межі рядка на потік нижче. Аналогічно +"Floated After" має з'являтись праворуч</span> +</div></pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css">#floatme { float: left; width: 50%; } + +/* Щоб отримати пусту колонку просто позначте в hex коді + нерозривний пробіл: \a0 у якості контенту +(Використовуйте \0000a0 коли іде після такого символа як пробіл ) +*/ +.example::before { + content: "Floated Before"; + float: left; + width: 25%; +} +.example::after { + content: "Floated After"; + float: right; + width: 25%; +} + +/* For styling */ +.example::before, .example::after { + background: yellow; + color: red; +}</pre> + +<h4 id="Результат_4">Результат</h4> + +<p>{{EmbedLiveSample("Notes")}}</p> + +<h2 id="Специфікація">Специфікація</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>No significant changes to the previous specification.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Allows transitions on properties defined on pseudo-elements.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Allows animations on properties defined on pseudo-elements.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Introduces the two-colon syntax.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition, using the one-colon syntax</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_браузерів">Підтримка браузерів</h2> + +<div> +<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div> + +<p>{{Compat("css.selectors.before")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{Cssxref("::after")}}</li> + <li>{{Cssxref("content")}}</li> +</ul> diff --git a/files/uk/web/css/_doublecolon_slotted/index.html b/files/uk/web/css/_doublecolon_slotted/index.html new file mode 100644 index 0000000000..56b3e5e86d --- /dev/null +++ b/files/uk/web/css/_doublecolon_slotted/index.html @@ -0,0 +1,104 @@ +--- +title: '::slotted()' +slug: 'Web/CSS/::slotted' +translation_of: 'Web/CSS/::slotted' +--- +<div>{{ CSSRef }}</div> + +<p><a href="/en-US/docs/Web/CSS/Pseudo-elements">Псевдо-елемент </a><code><strong>::slotted()</strong></code> являє собою будь-який елемент, поміщений в слот всередині шаблону HTML (додаткову інформацію див. в розділі <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Використання шаблонів і слотів</a>).</p> + +<p>Це працює тільки при використанні всередині CSS, поміщеного в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">тіньовий DOM</a>. Зверніть увагу, що цей селектор не буде вибирати текстовий вузол, поміщений в слот; він призначений тільки для фактичних елементів.</p> + +<pre class="brush: css no-line-numbers">/* Вибір будь-якого елемента, поміщеного в слот */ +::slotted(*) { + font-weight: bold; +} + +/* Вибір будь-якого <span> елемента, поміщеного в слот */ +::slotted(span) { + font-weight: bold; +} +</pre> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклади">Приклади</h2> + +<p>Наступні фрагменти коду взяті з демо-версії застосування псевдо-елемента <a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">:slotted</a> (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">див. демо</a>).</p> + +<p>У цьому демо ми використовуємо простий шаблон з трьома слотами:</p> + +<pre class="brush: html"><template id="person-template"> + <div> + <h2>Personal ID Card</h2> + <slot name="person-name">NAME MISSING</slot> + <ul> + <li><slot name="person-age">AGE MISSING</slot></li> + <li><slot name="person-occupation">OCCUPATION MISSING</slot></li> + </ul> + </div> +</template></pre> + +<p>Кастомний веб-компонент— <code><person-details></code> — визначений, як:</p> + +<pre class="brush: js">customElements.define('person-details', + class extends HTMLElement { + constructor() { + super(); + let template = document.getElementById('person-template'); + let templateContent = template.content; + + const shadowRoot = this.attachShadow({mode: 'open'}); + + let style = document.createElement('style'); + style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + + 'h2 { margin: 0 0 10px; }' + + 'ul { margin: 0; }' + + 'p { margin: 10px 0; }' + + '::slotted(*) { color: gray; font-family: sans-serif; } '; + + shadowRoot.appendChild(style); + shadowRoot.appendChild(templateContent.cloneNode(true)); + } +})</pre> + +<p>Ви побачите, що при заповненні елемента <code>стилю</code> певними значеннями, ми вибираємо всі слотовані елементи (<code>::slotted(*)</code>) і надаємо їм інший шрифт і колір. Це дозволяє їм краще виділятися поруч зі слотами, які не були успішно заповнені. </p> + +<p>Для вибору конкретних елементів, вказуєм необхідний тип елементу замість *. Для прикладу - селектор, який застосує стилі лише для <code>div</code> елементів, матиме наступний вигляд (<code>::slotted(div)</code>). Більше інформації про стилізацію <code>slot</code> елементів та розробку кастомних веб компонентів, ви можете знайти на <a href="https://github.com/Halochkin/Components/blob/master/Articles/CSS/How%20to%20style%20slot.childNodes%3F.md">моєму github</a>.</p> + +<p>При вставці на сторінку елемент виглядає наступним чином:</p> + +<p><person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> </person-details></p> + +<h2 id="Cпецифікації">Cпецифікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}</td> + <td>{{ Spec2('CSS Scope') }}</td> + <td>Початкове визначення</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Сумісність браузерами</h2> + + + +<p>{{Compat("css.selectors.slotted")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Веб компоненти</a></li> +</ul> diff --git a/files/uk/web/css/animation-name/index.html b/files/uk/web/css/animation-name/index.html new file mode 100644 index 0000000000..1f53e12cf4 --- /dev/null +++ b/files/uk/web/css/animation-name/index.html @@ -0,0 +1,141 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +translation_of: Web/CSS/animation-name +--- +<div>{{CSSRef}}</div> + +<div><strong><code>Animation-name </code></strong><code>- це</code> властивість <a href="/en-US/docs/CSS" title="CSS">CSS</a>, яка визначає одну або декілька анімацій, які повинні бути застосовані на елементі. Кожне animation-name вказує на {{cssxref("@keyframes")}} правило, яке визначає значення властивостей для анімаційного ряду.</div> + +<div> </div> + +<pre class="brush:css no-line-numbers">/* Single animation */ +animation-name: none; +animation-name: test_05; +animation-name: -specific; +animation-name: sliding-vertically; + +/* Multiple animations */ +animation-name: test1, animation4; +animation-name: none, -moz-specific, sliding; + +/* Global values */ +animation-name: <a href="/en-US/docs/Web/CSS/initial">initial</a> +animation-name: <a href="/en-US/docs/Web/CSS/inherit">inherit</a> +animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a></pre> + +<p>Часто, буде зручно користуватися коротким варіантом {{cssxref("animation")}} для встановлення усіх властивостей анімації за один раз.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Значення, яке вказує на відсутність основних кадрів (keyframes). Може бути використано для деактивації анімації без зміни інших параметрів анімації, or to deactivate animations coming from the cascade.</dd> + <dt>{{cssxref("<custom-ident>")}}</dt> + <dd>Ім'я анімації. Цей ідентифікатора складається з комбінаціїThis identifier is composed of a combination of літер <code>a<font face="Open Sans, arial, x-locale-body, sans-serif">-</font></code><code>z (без врахування регістру літер)</code>, цифр <code>0-</code><code>9</code>, підкреслення (<code>_</code>), і/або дефісу (<code>-</code>). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code>.</dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: When you specify multiple comma-separated values on an <code>animation-*</code> property, they will be assigned to the animations specified in the {{cssxref("animation-name")}} property in different ways depending on how many there are. For more information, see <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">Setting multiple animation property values</a>.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>See <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a> for examples.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(43.0)}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td> + <td>10 </td> + <td>12 {{property_prefix("-o")}}<br> + 12.10</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code>- prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>JavaScript {{domxref("AnimationEvent")}} API</li> +</ul> diff --git a/files/uk/web/css/attr()/index.html b/files/uk/web/css/attr()/index.html new file mode 100644 index 0000000000..1a484489b4 --- /dev/null +++ b/files/uk/web/css/attr()/index.html @@ -0,0 +1,265 @@ +--- +title: attr() +slug: Web/CSS/attr() +tags: + - CSS + - CSS функція + - Web + - attr + - Макет +translation_of: Web/CSS/attr() +--- +<div>{{CSSRef}}</div> + +<div></div> + +<div></div> + +<div class="blockIndicator note"><strong>Примітка:</strong> Функція <code>attr()</code> може буті використана з будь-якою властивісттю CSS, але підтримка для властивостей інших ніж {{CSSxRef("content")}} є експериментальною, і підтримка для параметру type-or-unit обмежена.</div> + +<div></div> + +<p>Функція <strong><code>attr()</code></strong> в <a href="/en-US/docs/Web/CSS">CSS</a> використовується для повернення значення атрибуту вибраного елементу і використання його в таблиці стилів. Вона може бути використана на псевдоелементах, і в цьому випадку повертається значення атрибута для використання в якості тексту псевдоелемента.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Просте застосування */ +attr(data-count); +attr(title); + +/* З параметром type */ +attr(src url); +attr(data-count number); +attr(data-width px); + +/* З параметром fallback */ +attr(data-count number, 0); +attr(src url, ""); +attr(data-width px, inherit); +attr(data-something, "default"); + +</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<h3 id="Значення">Значення</h3> + +<dl> + <dt><code>attribute-name</code></dt> + <dd>Це ім'я атрибута елемента HTML, на який функція посилається у CSS.</dd> + <dt><code style="white-space: nowrap;"><type-or-unit></code> {{Experimental_Inline}}</dt> + <dd>Це ключове слово, що представляє або тип значення атрибута, або його одиницю, оскільки в HTML деякі атрибути мають неявні одиниці. Якщо використання <type-or-unit> як значення для даного атрибуту недійсне, вираз з attr() також буде недійсним. Якщо пропущено, за замовчуванням використовується string. Список дійсних значень: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Ключове слово</th> + <th scope="col">Асоційований тип</th> + <th scope="col">Коментар</th> + <th scope="col">Значення за замовчуванням</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>string</code></td> + <td style="white-space: nowrap;">{{CSSxRef("<string>")}}</td> + <td>Значення атрибута трактується як CSS {{CSSxRef("<string>")}}. Воно НЕ буде оброблюватися, і зокрема символи будуть використані як-є замість того, щоб маскування CSS перетворювалися на інші символи.</td> + <td>Пустий рядок.</td> + </tr> + <tr> + <td><code>color</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<color>")}}</td> + <td>Значення атрибуту аналізується як хеш (3- або 6-значні хеші) або як ключове слово. Повінне бути дійсним значенням CSS {{CSSxRef("<string>")}}.<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td><code>currentColor</code></td> + </tr> + <tr> + <td><code>url</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<url>")}}</td> + <td>Значення атрибута аналізується як CSS рядок що використовується всередині CSS функції <code>url()</code>.<br> + Відносна URL-адреса вирішується відносно оригінального документа, а не щодо таблиці стилів.<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td> + </tr> + <tr> + <td><code>integer</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<integer>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef("<integer>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + <tr> + <td><code>number</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<number>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + <tr> + <td><code>length</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<length>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef("<length>")}} вимір, що вміщує одиниці виміру (наприклад, <code>12.5em</code>). Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> + Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + <tr> + <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<length>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, що не містить одиниць виміру (e.g. <code>12.5</code>), і трактується як {{CSSxRef("<length>")}} з вказаними одиницями виміру. Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> + Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + <tr> + <td><code>angle</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<angle>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef("<angle>")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5deg</code>). Якщо воно не є дійсним значенням, тобто не є мірою кута або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td><code>0deg</code>, або, якщо <code>0deg</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + <tr> + <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<angle>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, тобто без одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("<angle>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td><code>0deg</code>, або, якщо <code>0deg</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + <tr> + <td><code>time</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<time>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef("<time>")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5ms</code>). Якщо воно не є дійсним значенням, тобто не є значенням часу або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td><code>0s</code>, або, якщо <code>0s</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + <tr> + <td><code>s</code>, <code>ms</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<time>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, що не містить одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("<time>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> + Провідні і кінцеві прогалини будуть прибрані..</td> + <td><code>0s</code>, або, якщо <code>0s</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + <tr> + <td><code>frequency</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<frequency>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef("<frequency>")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5kHz</code>). Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.</td> + <td><code>0Hz</code>, або, якщо <code>0Hz</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + <tr> + <td><code>Hz</code>, <code>kHz</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<frequency>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, тобто без одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("<frequency>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td><code>0Hz</code>, або, якщо <code>0Hz</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + <tr> + <td><code>%</code> {{Experimental_Inline}}</td> + <td style="white-space: nowrap;">{{CSSxRef("<percentage>")}}</td> + <td>Значення атрибута аналізується як CSS {{CSSxRef ("<number>")}}, тобто без одиниць виміру (наприклад, 12.5), і інтерпретується як {{CSSxRef ("<percentage>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> + Якщо дане значення використовується як довжина, attr () обчислює його до абсолютної довжини.<br> + Провідні і кінцеві прогалини будуть прибрані.</td> + <td><code>0%</code>, або, якщо <code>0%</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> + </tr> + </tbody> + </table> + </dd> + <dt><code><fallback></code> {{Experimental_Inline}}</dt> + <dd>Значення, яке буде використовуватися, якщо пов'язаний атрибут відсутній або містить неприпустиме значення. Резервне значення має бути допустимим, якщо вказано attr(), навіть якщо воно не використовується, і не повинно містити іншого виразу attr(). Якщо attr() не є єдиним значенням компонента властивості, його значення <fallback> повинно мати тип, визначений <type-or-unit>. Якщо не встановлено, CSS буде використовувати значення за замовчуванням, визначений для кожного <type-or-unit>.</dd> +</dl> + +<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Властивість_content">Властивість content</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p data-foo="hello">world</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css highlight[2] notranslate">[data-foo]::before { + content: attr(data-foo) " "; +}</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p> + +<h3 id="<color>_значення"><color> значення</h3> + +<p>{{SeeCompatTable}}</p> + +<div id="color-value"> +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div class="background" data-background="lime">background expect to be red if your browser does not support adavanced usage of attr()</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<div class="hidden"> +<pre class="brush: css notranslate">.background { + height: 100vh; +}</pre> +</div> + +<pre class="brush: css highlight[6] notranslate">.background { + background-color: red; +} + +.background[data-background] { + background-color: attr(data-background color, red); +}</pre> +</div> + +<h4 id="Результат_2">Результат</h4> + +<p>{{EmbedLiveSample("color-value", "100%", 50)}}</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}</td> + <td>{{Spec2("CSS4 Values")}}</td> + <td>Без змін.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}</td> + <td>{{Spec2("CSS3 Values")}}</td> + <td> + <p>Додано два не обов'язкові параметри;<br> + може використовуватися зі всіма властивостями;<br> + може повертати інші значення, крім {{CSSxRef("<string>")}}.</p> + Ці зміни експериментальні і можуть бути скасовані під час фази CR, якщо підтримка браузерів занадто мала.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Обмежено властивісттю {{CSSxRef("content")}};<br> + завжди повертає {{CSSxRef("<string>")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_браузерів">Сумісність браузерів</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо Ви хочете зробити свій внесок у дані перегляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам запит на отримання.</div> + +<p>{{Compat("css.types.attr")}}</p> + +<h2 id="Також_перегляньте">Також перегляньте</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">HTML <code>data-*</code> attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute/data-*">SVG <code>data-*</code> attributes</a></li> +</ul> diff --git a/files/uk/web/css/backdrop-filter/index.html b/files/uk/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..ca4da47ee3 --- /dev/null +++ b/files/uk/web/css/backdrop-filter/index.html @@ -0,0 +1,136 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +translation_of: Web/CSS/backdrop-filter +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>Властивість backdrop-filter дозволяє застосувати графічні ефекти, такі як розмиття або зміщення кольорів до області позаду елемента. Оскільки це стосується всього, що стоїть поза елементом, щоб побачити ефект, ви повинні зробити елемент або його фон принаймні частково прозорим.</p> + +<pre class="brush: css no-line-numbers">/* Значення ключового слова */ +backdrop-filter: none; + +/* URL до SVG фільтру */ +backdrop-filter: url(commonfilters.svg#filter); + +/* Значення фільтру функцій */ +backdrop-filter: blur(2px); +backdrop-filter: brightness(60%); +backdrop-filter: contrast(40%); +backdrop-filter: drop-shadow(4px 4px 10px blue); +backdrop-filter: grayscale(30%); +backdrop-filter: hue-rotate(120deg); +backdrop-filter: invert(70%); +backdrop-filter: opacity(20%); +backdrop-filter: sepia(90%); +backdrop-filter: saturate(80%); + +/* Кілька фільтрів */ +backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); + +/* Глобальні значення */ +backdrop-filter: inherit; +backdrop-filter: initial; +backdrop-filter: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<h3 id="Значення">Значення</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Фільтр відключений для фону</dd> + <dt><code><filter-function-list></code></dt> + <dd>Перелік фільтрів, розділених пробілами які застосовані для фону. Список фільтрів такий же як і для властивості <a href="/en-US/docs/Web/SVG/Element/filter">filter</a>.</dd> +</dl> + +<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклад">Приклад</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.box { + background-color: rgba(255, 255, 255, 0.3); + border-radius: 5px; + font-family: sans-serif; + text-align: center; + line-height: 1; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + max-width: 50%; + max-height: 50%; + padding: 20px 40px; +} + +html, +body { + height: 100%; + width: 100%; +} + +body { + background-image: url('https://lorempixel.com/400/200/'); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +.container { + align-items: center; + display: flex; + justify-content: center; + height: 100%; + width: 100%; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="container"> + <div class="box"> + <p>backdrop-filter: blur(10px)</p> + </div> +</div> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Example", 600, 400)}}</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікаця</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td> + <td>{{Spec2('Filters 2.0')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + + + +<p>{{Compat("css.properties.backdrop-filter")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{cssxref("filter")}}</li> + <li><a href="http://www.domneill.com/blog/posts/2015/07/28/my-favourite-new-features-in-webkit-and-safari/">Blog post by Dom Neill with examples</a></li> + <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Building iOS-like transparency effects in CSS with backdrop-filter</a></li> +</ul> diff --git a/files/uk/web/css/css_animations/index.html b/files/uk/web/css/css_animations/index.html new file mode 100644 index 0000000000..9b1af6c15e --- /dev/null +++ b/files/uk/web/css/css_animations/index.html @@ -0,0 +1,140 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS анімації + - Довідка + - Огляд +translation_of: Web/CSS/CSS_Animations +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS-анімації</strong> - це модуль CSS, який дозволяє вам змінювати значення CSS-правил впродовж певного часу, використовуючи ключові кадри (keyframes). Поведінка цих анімацій може контролюватися шляхом встановлення їх функцій синхронізації, тривалості, числа повторів, та інших атрибутів.</p> + +<h2 id="Довідка">Довідка</h2> + +<h3 id="CSS_Властивості">CSS Властивості</h3> + +<div class="index"> +<ul> + <li>{{cssxref("animation")}}</li> + <li>{{cssxref("animation-delay")}}</li> + <li>{{cssxref("animation-direction")}}</li> + <li>{{cssxref("animation-duration")}}</li> + <li>{{cssxref("animation-fill-mode")}}</li> + <li>{{cssxref("animation-iteration-count")}}</li> + <li>{{cssxref("animation-name")}}</li> + <li>{{cssxref("animation-play-state")}}</li> + <li>{{cssxref("animation-timing-function")}}</li> +</ul> +</div> + +<h3 id="CSS_-правила">CSS @-правила</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@keyframes")}}</li> +</ul> +</div> + +<h2 id="Посібники">Посібники</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Виявлення підтримки CSS-анімації</a></dt> + <dd>Описує техніку виявлення підтримки браузером CSS-анімації.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Використання CSS анімацій</a></dt> + <dd>Покроковий підручник про те, як створити анімацію засобами CSS. Дана стаття описує кожне відповідне CSS властивість і at-правило, та пояснює, як вони взаємодіють між собою.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Tips">Підказки і хитрощі для CSS анімацій</a></dt> + <dd>Підказки і хитрощі, які допоможуть вам досягти якнайкращих результатів у CSS-анімаціях. В даний момент описує техніку, що дозволяє програти спочатку уже запущену анімацію (API не підтримує напряму такий функціонал).</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Початкове визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Властивість</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + 43.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>12{{property_prefix("-o")}}<br> + 12.10<sup>[2]</sup></td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Властивість</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{property_prefix("-webkit")}} [1]<br> + 4.0 {{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Часткова підтримка: властивість {{cssxref("animation-fill-mode")}} не підтримується в Android браузері до версії 2.3.</p> + +<p>[2] Ознайомтесь із <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>Подібно до CSS-анімацій, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> можуть запускати анімації на підставі дій користувача.</li> +</ul> + +<p> </p> diff --git a/files/uk/web/css/css_animations/використання_css_анімацій/index.html b/files/uk/web/css/css_animations/використання_css_анімацій/index.html new file mode 100644 index 0000000000..f8b8466ef4 --- /dev/null +++ b/files/uk/web/css/css_animations/використання_css_анімацій/index.html @@ -0,0 +1,357 @@ +--- +title: Використання CSS анімацій +slug: Web/CSS/CSS_Animations/Використання_CSS_анімацій +tags: + - CSS Animations + - Довідка +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +<p>{{SeeCompatTable}}{{CSSRef}}</p> + +<p><span class="seoSummary"><strong>CSS анімації</strong> роблять можливим анімацію переходів (<em>transitions</em>) з однєї конфігурації CSS стилю до іншої.</span> Анімації складаються з двох компонентів, а власне - стилю, котрий описує CSS анімацію та набір ключових кадрів (<em>keyframes</em>), які задають початковий та кінцевий стан стилю анімації, а також є можливим задання точок проміжного стану.</p> + +<p>В CSS анімацій є три ключові переваги перед традиційними скриптовими техніками анімації:</p> + +<ol> + <li>Вони легкі у використанні для простих анімацій; ви можете створити їх навіть без знань JavaScript.</li> + <li>Анімації добре функціонують, навіть при помірному навантаженні на систему. Прості анімації на JavaScript можуть працювати не дуже добре (в разі, якщо вони не ідеально зроблені). Движок рендера може використовувати техніку пропуску кадрів та інші засоби для підтримки гладкої анімації.</li> + <li>Надаючи таким чином браузеру контроль над послідовністю анімації ви надаєте можливість брауцзеру оптимізувати свою роботу та ефективність, наприклад, завдяки зупинці анімації у вкладках, які не є відкриті для перегляду.</li> +</ol> + +<h2 id="Конфігурування_анімації">Конфігурування анімації</h2> + +<p>Щоб створити CSS-анімаційну послідвність, ви стилізуєте анімований елемент {{ cssxref("animation") }} властивістю чи її підвластивостями. Це дозвоялє вам коригувати таймінг, тривалість та інші деталі анімації згідно з вашими потребами. Це <strong>не</strong> конфігурує актуальний вигляд анімації, яка здійснюється проходом через {{ cssxref("@keyframes") }} at-правила, як це описано в {{ anch("Визначення послідовності анімації через ключові кадри") }} нижче.</p> + +<p>Підвластивостями властивості {{ cssxref("animation") }} є:</p> + +<dl> + <dt>{{ cssxref("animation-delay") }}</dt> + <dd>Змінює час затримки між часом з моменту завантаження елемента та початком анімаційної послідовності.</dd> + <dt>{{ cssxref("animation-direction") }}</dt> + <dd>Визначає зміну напрямку анімації та його чергування в залежності від кількості проходів анімації, а також може задавати повернення в початковий стан і починати прохід заново.</dd> + <dt>{{ cssxref("animation-duration") }}</dt> + <dd>Визначає тривалість циклу анімації.</dd> + <dt>{{ cssxref("animation-iteration-count") }}</dt> + <dd>Визначає кількість проходів (повторів) анімації; ви можете також обрати значення <strong><em><code>infinite</code></em></strong> для нескінченного повтору анімації.</dd> + <dt>{{ cssxref("animation-name") }}</dt> + <dd>Задає ім'я для анімації {{ cssxref("@keyframes") }} через at-правило, яке описує анімаційні ключові кадри.</dd> + <dt>{{ cssxref("animation-play-state") }}</dt> + <dd>Дозволяє вам призупиняти та відновлювати анімацію.</dd> + <dt>{{ cssxref("animation-timing-function") }}</dt> + <dd>Задає конфігурацію таймінгу анімації; інакше кажучи, як саме буде анімація робити прохід через ключові кадри, це можливо завдяки кривим прискорення.</dd> + <dt>{{ cssxref("animation-fill-mode") }}</dt> + <dd>Визначає, які значення будуть застосовані для анімації перед початком та після її закінчення.</dd> +</dl> + +<h2 id="Визначення_послідовності_анімації_через_ключові_кадри">Визначення послідовності анімації через ключові кадри</h2> + +<p>Опісля того, як ви задали анімації таймінг, вам потрібно задати вигляд анімації. Це робиться завдяки одному чи більше ключовому кадру шляхом застосування at-правила {{ cssxref("@keyframes") }}. Кожен ключовий кадр описує, як саме повинен відображатися анімований елемент у певний момент під час проходження анімаційної послідовності.</p> + +<p>Після того, як таймінг анімації був заданий в CSS стилі, який конгфігурує анімацію, ключові кадри використовують {{ cssxref("percentage") }} для відображення моменту під час анімації, в якому буде розміщений той чи інший ключовий кадр. 0% вказує на сам початок анімаціїйної послідовності, тоді як 100% вказує на завершальний етап анімації. Оскільки ці два моменти є такими важливими, вони мають свої спеціальні імена: <em><strong><code>from</code></strong></em> і <em><strong><code>to</code></strong></em><code> відповідно</code>. Обидва ці імені є необов'язковими. Якщо <em><strong><code>from</code></strong></em>/<code>0%</code> чи <em><strong><code>to</code></strong></em>/<code>100%</code> не є задано, то браузер починає чи зупиняє анімацію використовуючи середньообраховані значення всіх атрибутів.</p> + +<p>Ви також можете на свій розсуд додавати проміжні кадри до анімації, аби описати стан анімації в проміжні періоди.</p> + +<h2 id="Приклади">Приклади</h2> + +<div class="note"><strong>Примітка:</strong> Подані приклади не використовують вендорних префіксів. WebKit-браузери та старіші версії інших браузерів можуть потребувати цих префіксів; приклади, на які ви можете клацнути для перегляду у вашому браузері також включають <code>-webkit</code>-префіксовані версії.</div> + +<h3 id="Текст_що_ковзає_у_вікні_браузера">Текст, що ковзає у вікні браузера</h3> + +<p>Цей простий приклад стилізує елемент {{ HTMLElement("p") }} так, що текст "зісковзує" в вікно браузера з-поза його правого краю.</p> + +<p>Майте на увазі, що такі анімації можуть робити сторінку ширшою, аніж вікно браузера. Аби уникнути такої проблеми, потрібно помістити анімований елемент в контейнер і встановити для останнього {{cssxref("overflow")}}<code>:hidden</code>.</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<p>В цьому прикладі стиль для {{ HTMLElement("p") }}-елемента визначає, що тривалість анімації становить 3 секунди від початку до кінця, використовуючи властивість {{ cssxref("animation-duration") }}, а також присвоює ім'я цій анімації, яке використано у ключових кадрах {{ cssxref("@keyframes") }} . Їхні at-правила визначили, що це ключові кадри для анімації, яка називається “slidein”.</p> + +<p>Якщо нам потрібно ще якусь додаткову стилізацію елемента {{ HTMLElement("p") }} для відобаження в браузерах, які не підтримують CSS анімацій, то ми б її включили туди ж; однак, в цьому випадку ми не потребуємо додаткової стилізації, крім анімації елемента.</p> + +<p>Ключові кадри визначені через at-правила {{ cssxref("@keyframes") }}. В даному випадку є лише два ключових кадри. Перший ключовий кадр наступає в 0% (вжито спеціальне ім'я <em><strong><code>from</code></strong></em>). Тут, ми змінюємо лівий маргін елемента як 100% (тобто це відраховується, як відстань від правого краю контейнера), і встановили 300% ширини для елемента (Втричі ширше за контейнер). Завдяки цьому на першому ключовому кадрі анімований елемент буде знаходитися поза межами контейнера (вікна браузера).</p> + +<p>Другий ключовий кадр (він же завершальний) розміщений на завершенні анімації, 100% (спеціальне ім'я <strong><em><code>to</code></em></strong>). Лівий маргін встановлено як 0% і ширину елемента ми встановили як 100%. Це спричиняє "приклеювання" елемента до лівого краю вікна браузера.</p> + +<pre class="brush: html"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на кнопку CodePen, щоб побачити анімацію в середовищі CodePen)</p> + +<p>{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}</p> + +<h3 id="Додавання_інших_ключових_кадрів">Додавання інших ключових кадрів</h3> + +<p>Давайте додамо ще один ключовий кадр до анімації з попереднього прикладу. Припустимо, нам потрібно трішки збільшити шрифт, коли текст рухається вліво, а потім ми його повертаємо до попередніх параметрів. Це просто, як додавання ось такого ключового кадру:</p> + +<pre class="brush: css">75% { + font-size: 300%; + margin-left: 25%; + width: 150%; +} +</pre> + +<pre class="brush: css hidden">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + 75% { + font-size: 300%; + margin-left: 25%; + width: 150%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>Це повідомляє браузеру, що елемент, при виконанні 75% анімації, повинен мати лівий маргін 25% і ширину 150%.</p> + +<p>(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на конпку CodePen, щоб побачити анімацію в середовищі CodePen)</p> + +<p>{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}</p> + +<h3 id="Making_it_repeat">Making it repeat</h3> + +<p>Якщо вам потрібно, аби анімація повторювалась, просто використайте властивість {{ cssxref("animation-iteration-count") }} , щоб зазначити, скільки разів повинна повторитися анімація. В даному випадку давайте використаємо значення <em><strong><code>infinite</code></strong></em> для отримання постійної анімації:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; +} +</pre> + +<pre class="brush: css hidden">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>{{EmbedLiveSample("Making_it_repeat","100%","250")}}</p> + +<h3 id="Змінюємо_напрямки_анімації">Змінюємо напрямки анімації</h3> + +<p>Отже, анімація повторювана, але це виглядає дивно: текст по завершенню циклу, з початком нового знову стрибає вбік. Отже нам треба зробити, аби текст плавно повертався назад, на початкову позицію. Це просто: прописуємо у {{ cssxref("animation-direction") }} значення <em><strong><code>alternate</code></strong></em>:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +} +</pre> + +<pre class="brush: css hidden">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}</p> + +<h3 id="Використання_скорочень_для_правил_анімації">Використання скорочень для правил анімації</h3> + +<p>{{ cssxref("animation") }} скорочення є вигідним для економії місця. От, для прикладу, правила анімації, які ми вже використали в статті:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +} +</pre> + +<p>Їх можна замінити ось таким чином</p> + +<pre>p { + animation: 3s infinite alternate slideIn; +}</pre> + +<div class="note"> +<p><strong>Примітка</strong>: Ви можете дізнатися про це більше на сторінці довідки {{ cssxref("animation") }} :</p> +</div> + +<h3 id="Задання_множинних_значень_властивостей_анімації">Задання множинних значень властивостей анімації</h3> + +<p>Нескорочені значення CSS анімації можуть приймати множинні значення, розділені комами — таку особливість можна використати, якщо вам потрібно задати множинні анімації єдиним набором правил і відповідно задати різні тривалості, повтори і так далі для різних анімацій. Давайте глянемо на кілька швидких прикладів, аби пояснити різні зміни:</p> + +<p>В першому прикладі у нас є набір з трьох різних імен анімації, але одна й та ж тривалість і кількість повторів:</p> + +<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 3s; +animation-iteration-count: 1;</pre> + +<p>В другому прикладі в нас є набір з 3х значень для кожної властивості. В цьому випадку кожна анімація буде здійснюватися з відповідними значеннями, згідно з їх розміщенням у властивостях, то ж, приміром, <code>fadeInOut</code> має тривалість в 2.5s і кількість повторів 2, і т.д..</p> + +<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 2.5s, 5s, 1s; +animation-iteration-count: 2, 1, 5;</pre> + +<p>У цьому третьому випадку є три різні анімації, але лише дві різні тривалості та кількості повторів. У таких випадках наборів значень недостатньо, то ж кожна анімація отримає свій набір значень шляхом перебору від початку до кінця. Наприклад, fadeInOut отримає тривалість в 2.5s і moveLeft300px матиме тривалість 5s. Набори значень на цьому закінчились, тому все починається з початку і третя анімація bounce отримає тривалість знову в 2.5s. Кількість повторів (та й будь-які інші значення властивостей, які ви задасте) будуть присвоєні такими самим чином.</p> + +<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 2.5s, 5s; +animation-iteration-count: 2, 1;</pre> + +<h3 id="Використання_подій_анімації">Використання подій анімації</h3> + +<p>Ви можете отримати додатковий контроль над анімаціями, як і корисну інформацію про них шляхом використання подій анімації. Ці події, представлені об'єктом {{ domxref("AnimationEvent") }}, можуть бути використані, аби визначити, коли починаються, закінчуються і починають новий повтор різні анімації. Кожна подія містить час, о котрій вона сталась та ім'я анімації, яка її запустила.</p> + +<p>Зараз ми змінимо приклад з ковзаючим текстом, аби вивести певну інформацію про кожну анімаційну подію, тобто її час, то ж ми можемо розібратися, як вони працюють.</p> + +<h4 id="Додавання_CSS">Додавання CSS</h4> + +<p>Починаємо зі створення CSS для анімації. Дана анімація триватиме 3 секунди, назвемо її “slidein”, задамо повтор 3 рази, і напрям анімації <em><strong>alternate</strong></em> кожного разу. В {{ cssxref("@keyframes") }}, ширина і лівий маргін змінюються, щоб текст ковзав по екрану.</p> + +<pre class="brush: css">.slidein { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: 3; + animation-direction: alternate; +} + +@keyframes slidein { + from { + margin-left:100%; + width:300% + } + + to { + margin-left:0%; + width:100%; + } +}</pre> + +<h4 id="Встановлення_animation_event_listeners_-_прослуховування_подій_анімації">Встановлення animation event listeners - прослуховування подій анімації</h4> + +<p>Ми використаємо код JavaScript для прослуховування всіх трьох можливих подій анімації. Даний код задає наші <strong>event listeners</strong>; ми викликаємо його, коли документ вперше завантажений, для того, щоб отримати впорядковані дані.</p> + +<pre class="brush: js">var e = document.getElementById("watchme"); +e.addEventListener("animationstart", listener, false); +e.addEventListener("animationend", listener, false); +e.addEventListener("animationiteration", listener, false); + +e.className = "slidein"; +</pre> + +<p>Це цілком звичайний код, аби дізнатися більше, ви можете звіритися з документацією {{ domxref("eventTarget.addEventListener()") }}. Останнє, що робить код - він задає клас анімованого елемента як “slidein”; це нам потрібно для запуску анімації.</p> + +<p>Чому? Тому що подія <strong><code>animationstart</code></strong> запускається одразу ж, як стартує анімація; в даному випадку це стається до того, як починає діяти наш код. То ж ми починаємо анімацію самі, задаючи клас елементу для стиля, котрий буде анімований по факту.</p> + +<h4 id="Отримання_подій">Отримання подій</h4> + +<p>Події надсилаються до функції <em><code>listener()</code></em>, як це показано нижче.</p> + +<pre class="brush: js">function listener(e) { + var l = document.createElement("li"); + switch(e.type) { + case "animationstart": + l.innerHTML = "Started: elapsed time is " + e.elapsedTime; + break; + case "animationend": + l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; + break; + case "animationiteration": + l.innerHTML = "New loop started at time " + e.elapsedTime; + break; + } + document.getElementById("output").appendChild(l); +} +</pre> + +<p>Даний код також дуже простий. Він просто дивиться в {{ domxref("event.type") }}, аби визначити, який власне тип події анімації трапився, тоді додає відповідну примітку в {{ HTMLElement("ul") }} (невпорядкований список), який ми використовуємо для виводу звіту про ці події.</p> + +<p>Звіт після завершення роботи буде виглядати якось от так:</p> + +<ul> + <li>Started: elapsed time is 0</li> + <li>New loop started at time 3.01200008392334</li> + <li>New loop started at time 6.00600004196167</li> + <li>Ended: elapsed time is 9.234000205993652</li> +</ul> + +<p>Зауважте, що часи подій досить точні щодо тих, які ми очікували відповідно до таймінгу, який ми задали, коли створювали анімацію. Візьміть до уваги також і те, що після завершального проходу анімації подія <strong><code>animationiteration</code></strong> не була надіслана; натомість надіслало подію <strong><code>animationend</code></strong>.</p> + +<h4 id="HTML">HTML</h4> + +<p>Чисто для повної завершеності огляду ось код, який відображає контент сторіки, включно зі списком звіту про події анімації, який створився завдяки вищеописаному скрипту:</p> + +<pre class="brush: html"><h1 id="watchme">Watch me move</h1> +<p> + This example shows how to use CSS animations to make <code>H1</code> + elements move across the page. +</p> +<p> + In addition, we output some text each time an animation event fires, + so you can see them in action. +</p> +<ul id="output"> +</ul> +</body> +</pre> + +<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> + <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Визначення підтримки CSS анімації</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Використання CSS transitions</a></li> +</ul> diff --git a/files/uk/web/css/css_box_model/згортання_відступів/index.html b/files/uk/web/css/css_box_model/згортання_відступів/index.html new file mode 100644 index 0000000000..b47325c5bf --- /dev/null +++ b/files/uk/web/css/css_box_model/згортання_відступів/index.html @@ -0,0 +1,90 @@ +--- +title: Згортання відступів +slug: Web/CSS/CSS_Box_Model/Згортання_відступів +tags: + - CSS + - Коробчаста модель CSS + - Посібник +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +<div dir="ltr">{{CSSRef}}</div> + +<p dir="ltr">The <a href="/en-US/docs/Web/CSS/margin-top">top</a> and <a href="/en-US/docs/Web/CSS/margin-bottom">bottom</a> margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as <strong>margin collapsing</strong>. Note that the margins of <a href="/en-US/docs/Web/CSS/float">floating</a> and <a href="/en-US/docs/Web/CSS/position">absolutely positioned</a> elements never collapse.</p> + +<p dir="ltr">Margin collapsing occurs in three basic cases:</p> + +<dl> + <dt dir="ltr">Безпосередні (прилеглі) сусіди</dt> + <dd dir="ltr">The margins of adjacent siblings are collapsed (except when the latter sibling needs to be <a href="/en-US/docs/Web/CSS/clear">cleared</a> past floats).</dd> + <dt dir="ltr">Батько та перший/останній дочірній елемент</dt> + <dd dir="ltr">If there is no border, padding, inline part, {{cssxref("Block_formatting_context")}} created, or <em><a href="/en-US/docs/Web/CSS/clear">clearance</a></em> to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of its first child block; or no border, padding, inline content, {{cssxref("height")}}, {{cssxref("min-height")}}, or {{cssxref("max-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of its last child, then those margins collapse. The collapsed margin ends up outside the parent.</dd> +</dl> + +<dl> + <dt dir="ltr">Порожні блоки</dt> + <dd dir="ltr">If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.</dd> +</dl> + +<p dir="ltr">More complex margin collapsing (of more than two margins) occurs when these cases are combined.</p> + +<p dir="ltr">These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.</p> + +<p dir="ltr">When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.</p> + +<p dir="ltr">When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>The bottom margin of this paragraph is collapsed...</p> +<p>...with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p> + +<div>This parent element contains two paragraphs! + <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p> + <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> +</div> + +<p>Blah blah blah.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + margin: 2rem 0; + background: lavender; +} + +p { + margin: .4rem 0 1.2rem 0; + background: yellow; +}</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Examples','100%',250)}}</p> + +<h2 dir="ltr" id="Специфікації">Специфікації</h2> + +<table class="standard-table" dir="ltr"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Первинне визначення</td> + </tr> + </tbody> +</table> + +<h2 dir="ltr" id="Див._також">Див. також</h2> + +<ul> + <li dir="ltr"><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li> + <li dir="ltr">{{css_key_concepts}}</li> +</ul> diff --git a/files/uk/web/css/css_flexible_box_layout/index.html b/files/uk/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..3520d3040d --- /dev/null +++ b/files/uk/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,132 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Flexible Box Layout</strong> це модуль CSS що реалізує можливість розмітки макета за допомогою оптимізованої коробочної моделі, що використовується для створення дизайну інтерфейса користувача, та проводити вирівнювання елементів в одному із вимірів. В цій моделі (flex layout), потомки flex контейнера можуть бути розміщені відносно будь якої осі, і можуть "гнучко" змінювати свій розмір, можуть рости, щоб зайняти весь відведений простір або зменшуватись щоб не переповнити своїми поточними розмірами контейнер, що їх містить. Наявне і горизонтальне і вертикальне вирівнювання потомків, і до того-ж проводити будь-які маніпуляції дуже легко.</p> + +<p> </p> + +<p class="summary"> </p> + +<h2 id="Простий_Приклад">Простий Приклад</h2> + +<p>В наступному прикладі у контейнерa встановлено властивість <code>display: flex</code>, що означає - три його вкладені елементи є flex елементами. Значення <code>justify-content</code> має значення <code>space-between</code> для того щоб порожній простір між елементами рівномірно розподілився по головній осі. Однаковий простір буде виділений між кожним елементом, але при цьому крайні елементи(перший та останній) не будуть мати справа та зліва відповідно відступів від контейнера. Ви можете бачити що елементи будуть розподілені по поточній направляючій вісі, бо на це впливають виставлені по замовчуванню значення властивості <code>align-items</code> рівний <code>stretch</code>. Елементи розтягуються по висоті flex контейнера, і кожен стане такої висоти як самий вищий елемент.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> + +<h2 id="Reference">Reference</h2> + +<p class="summary"> </p> + +<h2 id="Reference_2">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt> + <dd>Step-by-step tutorial about how to build layouts using this feature.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt> + <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}}<br> + 11.0</td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html new file mode 100644 index 0000000000..cdb8ea92c1 --- /dev/null +++ b/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html @@ -0,0 +1,390 @@ +--- +title: Використання CSS flexible-боксів +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">CSS3 <strong>flex-бокс</strong>, або <strong>flexbox</strong>, це <a href="/en-US/docs/Web/CSS/Layout_mode">режим розмітки</a> створений для упорядкування елементів на сторінці таким чином, щоб вони поводилися передбачувано у випадках, коли розмітка сторінки адаптована під різні розміри екрану і різні девайси.</span> В багатьох випадках flexible box є вдосконаленням блокової моделі розмітки, яка не використовує обтікання (floats) і не виконує схлопування відступів flex контейнера і його контенту (margins collapse).</p> + +<p>Для багатьох дизайнерів модель використання flex-боксів буде більш простою для застосування. Дочірні елементи всередині flex-боксу можуть розміщуватись у будь-якому напрямку і можуть мати змінні виміри щоб адаптовуватись до різних розмірів дисплею. Позиціонування елементів у такому разі є простішим і комплексна розмітка досягається значно легше і з чистішим кодом, оскільки порядок відображення елементів не пов'язаний із їх порядком в коді. Ця незалежність навмисне стосується лише візуального рендерингу, залишаючи порядок інтерпритації і навігацію залежними від порядку у сорсі.</p> + +<div class="note"><strong>Увага:</strong> Де-які броузери все ще можуть частково або повністю не підтримувати flex боксів. Ознайомтесь із <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">таблицею сумісності</a> для flex боксів</div> + +<h2 id="Концепція_flex-боксів">Концепція flex-боксів</h2> + +<p>Головною концепцією flex-боксів є можливість зміни висоти та/або ширини його елементів шоб найкраше заповнювати простір будь-якого дисплею. Flex-контейнер збільшує елементи, щоб заповнити доступний простір чи зменшує щоб запобігти перекриванню.</p> + +<p>Алгоритм розмітки flex-боксами є напрямно-агностичним на противагу блоковій розмітці, яка вертикально-орієнтована, чи горизонтально-орієнтованій інлайн-розмітці. Не зважаючи на те що розмітка блоками добре підходить для сторінки, їй не вистачає об'єктивного механізму для підтримки компонентів, що повинні змінювати орієнтацію, розміри а також розтягуватись чи стискатись при змінах юзер-агента, змінах з вертикальної на горизонтальну орієнтацію і таке інше. Розмітка flex-боксами найбільш бажана для компонентів додатку і шаблонів, що мало масштабуються, тоді як grid-розмітка створена для великих шаблонів, що масштабуються. Обидві технології є частиною розробки CSS Working Group яка має сприяти сумісності web-аплікацій з різними юзер-агентами, режимами а також більшій гнучкості.</p> + +<h2 id="Словник_Flexible_box_термінів">Словник Flexible box термінів </h2> + +<p>Оскільки опис flexible-боксів не включає таких словосполучень, як горизонтальна/інлайн і вертикальна/блокова осі, пояснення моделі передбачає нову термінологію. Використовуйте наступну діаграму під час перегляду словника термінів. Вона зображає flex-контейнер, що має flex-напрямок ряду, що означає, що кожен flex item розміщений горизонтально, один за одним по головній осі (main axis) відповідно до встановленного режиму написання, напрямку тексту елементу. Зліва-направо у данному випадку.</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> + +<dl> + <dt>Flex-контейнер</dt> + <dd>Батьківський елемент, у якому містяться flex-айтеми. Flex-контейнер визначається <code>flex</code> або <code>inline-flex</code> значеннями {{Cssxref("display")}} властивості.</dd> + <dt>Flex-айтем</dt> + <dd> + <p>Кожен дочірній елемент flex-контейнеру стає flex-айтемом. Текст, що напряму міститься в flex-контейнері обгортається анонімним flex-айтемом.</p> + </dd> + <dt>Осі</dt> + <dd> + <p>Кожен flexible-бокс шаблон будується по двох осях. Головна вісь (<strong>main axis)</strong> - вісь, вздовж якої flex-айтеми слідують один за одним. Перехресна вісь (<strong>cross axis)</strong> вісь, що перпендикулярна до <strong>main axis</strong>.</p> + + <ul> + <li>Властивість <code><a href="/en-US/docs/Web/CSS/flex-direction">flex-direction</a></code> встановлює main axis.</li> + <li>Властивість <a href="/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a> визначає як flex-айтеми розташовані вздовж main axis на поточній лінії.</li> + <li>Властивість <a href="/en-US/docs/Web/CSS/align-items"><code>align-items</code></a> визначає замовчування для розташування flex-айтемів вздовж cross axis на поточній лінії.</li> + <li>Властивість <a href="/en-US/docs/Web/CSS/align-self"><code>align-self</code></a> встановлює, як кожен окремий flex-айтем вирівняний по cross axis і переписує замовчування, встановлене за допомогою <code>align-items.</code></li> + </ul> + </dd> + <dt>Напрямки</dt> + <dd> + <p>Головний початок/головний кінець(<strong>main start</strong>/<strong>main end) </strong>і перехресний початок/перехресний кінець(<strong>cross start</strong>/<strong>cross end)</strong> це сторони flex-контейнера, що визначають початок і закінчення потоку flex-айтемів. Вони слідують за головною і перехресною осями flex-контейнера у векторі, встановленому режимом написання (зліва-направо, зправа-наліво і т.д.).</p> + + <ul> + <li>Властивість <a href="/en-US/docs/Web/CSS/order"><code>order</code></a> присвоює елементи порядковим групам і визначає, який елемент є першим.</li> + <li>Властивість <a href="/en-US/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> це скорочена форма для <a href="/en-US/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> та <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> властивостей.</li> + </ul> + </dd> + <dt>Лінії</dt> + <dd> + <p>Flex-айтеми можуть бути розміщені на одній чи кількох лініях відповідно до <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> властивості, яка контролює напрямок перехресних ліній і напрямок у якому складаються нові лінії.</p> + </dd> + <dt>Виміри</dt> + <dd>Еквівалентами для height і width для flex-айтемів є <strong>main size</strong> та <strong>cross size,</strong> які відповідно стосуються main axis і cross axis flex-контейнера.</dd> + <dd> + <ul> + <li>Початковим значенням для <code><a href="/en-US/docs/Web/CSS/min-height">min-height</a></code> і <code><a href="/en-US/docs/Web/CSS/min-width">min-width</a></code> є 0.</li> + <li>Властивість <a href="/en-US/docs/Web/CSS/flex"><code>flex</code></a> виступає скороченням для <a href="/en-US/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <a href="/en-US/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>, а також <code><a href="/en-US/docs/Web/CSS/flex-basis">flex-basis</a> </code>властивостей для встановлення гнучкості flex-айтема.</li> + </ul> + </dd> +</dl> + +<h2 id="Робимо_елемент_flexible-боксом">Робимо елемент flexible-боксом</h2> + +<p>Щоб зробити елемент flexible-боксом, вкажіт занчення <a href="/en-US/docs/Web/CSS/display">display</a> властивості наступним чином:</p> + +<pre class="brush: css">display : flex</pre> + +<p>або</p> + +<pre class="brush: css">display : inline-flex</pre> + +<p>Роблячи таким чином, ми визначаєм елемент як flexible-бокс, а його нащадків- як flexible-айтеми. Значення <code>flex</code> робить контейнер блоковим елементом. А <code>inline-flex</code> значення перетворює його на інлайн-елемент.</p> + +<div class="note"><strong>Увага:</strong> Для вказання префіксу вендора, додайте рядок до значення атрибуту, а не до самого атрибуту. Наприклад, <code>display : -webkit-flex</code>.</div> + +<h2 id="Характеристики_flex-айтема">Характеристики flex-айтема</h2> + +<p>Текст, що напряму поміщений до flex-контейнера автоматично обгортається в анонімний flex-айтем. Тим не менше анонімний flex-айтем, що містить лише пробільні симфоли не рендериться, так ніби йому було встановлене правило <code>display: none</code>.</p> + +<p>Абсолютно-позиціоновані дочірні елементи flex-контейнера позиціонуються так, що іхня статична позиція визначається відносно головного стартового кута контент-боксу їхнього flex-контейнера.</p> + +<p>У сусідніх flex-айтемів марджіни не накладаються один на інший. Використовуючи auto марджіни можна поглинути зайві відстані у вертикальному чи горизонтальному напрямках тим самим досягнувши вирівнювання чи розмежування сусідніх flex-айтемів. Для детальної інформації прочитайте <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">вирівнювання з допомогою 'auto' марджінів</a> у W3C специфікації "модель Flexible-бокс розмітки" (англ.).</p> + +<p><s>Для забезпечення адекватного замовчування мінімальних розмірів flex-айтема, використовуйте <code>min-width:auto</code> і/або <code>min-height:auto</code>. Для flex-айтемів, значення атрибуту <code>auto</code> вираховує мінімальну ширину/висоту айтема щоб не були меншими за ширину/висоту їхнього контенту, гарантуючи, що айтем відрендерений достатньо великим, для того, щоб вмістити контент. Дивіться {{cssxref("min-width")}} і {{cssxref("min-height")}} для більш детальної інформації.</s></p> + +<p>Атрибути вирівнювання flex-боксів виконують справжнє центрування, на відміну від інших методів центрування у CSS. Це означає, що flex-айтеми залишаться відцентрованими навіть коли вони виходять за межі flex-контейнера. Хоча така ситуація де-коли можи бути проблемою, оскільки якщо вони виходять за межі верхнього чи лівого (для LTR мов , таких, як англійська чи українська; проблема актуальна для правого краю для RTL мов, таких, як арабська) країв сторінки, вам не вдасться проскролити до цієї частини, не зважаючи на те, що там є контент! В майбутньому релізі властивості вирівнювання мають бути розширені для підтримаки безпечного режиму також. Зараз, якщо це проблема, Ви можете використовувати відступи (margin), щоб досягнути центрування.</p> + +<p>For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the <code>align-</code> properties, just put auto margins on the flex items you wish to center. Instead of the <code>justify-</code> properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace <code>justify-content</code> with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the <code>justify-content</code> property.</p> + +<p>Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.</p> + +<h2 id="Flexible_box_properties">Flexible box properties</h2> + +<h3 id="Properties_not_affecting_flexible_boxes">Properties not affecting flexible boxes</h3> + +<p>Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:</p> + +<ul> + <li><code>column-*</code> properties of the <a href="/en-US/docs/Web/CSS/Using_CSS_multi-column_layouts">multiple column module</a> have no effect on a flex item.</li> + <li>{{cssxref("float")}} and {{cssxref("clear")}} have no effect on a flex item. Using <code>float</code> causes the <code>display</code> property of the element to compute to <code>block</code>.</li> + <li>{{cssxref("vertical-align")}} has no effect on the alignment of flex items.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="Basic_flex_example">Basic flex example</h3> + +<p>This basic example shows how to apply "flexibility" to an element and how sibling elements behave in a flexible state.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> + <head> + <style> + + .flex + { + /* basic styling */ + width: 350px; + height: 200px; + border: 1px solid #555; + font: 14px Arial; + + /* flexbox setup */ + display: -webkit-flex; + -webkit-flex-direction: row; + + display: flex; + flex-direction: row; + } + + .flex > div + { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + + width: 30px; /* To make the transition work nicely. (Transitions to/from + "width:auto" are buggy in Gecko and Webkit, at least. + See http://bugzil.la/731886 for more info.) */ + + -webkit-transition: width 0.7s ease-out; + transition: width 0.7s ease-out; + } + + /* colors */ + .flex > div:nth-child(1){ background : #009246; } + .flex > div:nth-child(2){ background : #F1F2F1; } + .flex > div:nth-child(3){ background : #CE2B37; } + + .flex > div:hover + { + width: 200px; + } + + </style> + + </head> + <body> + <p>Flexbox nuovo</p> + <div class="flex"> + <div>uno</div> + <div>due</div> + <div>tre</div> + </div> + </body> +</html></pre> + +<h3 id="Holy_Grail_Layout_example">Holy Grail Layout example</h3> + +<p>This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.</p> + +<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> + +<p>Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> + <head> + <style> + + body { + font: 24px Helvetica; + background: #999999; + } + + #main { + min-height: 800px; + margin: 0px; + padding: 0px; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row; + flex-flow: row; + } + + #main > article { + margin: 4px; + padding: 5px; + border: 1px solid #cccc33; + border-radius: 7pt; + background: #dddd88; + -webkit-flex: 3 1 60%; + flex: 3 1 60%; + -webkit-order: 2; + order: 2; + } + + #main > nav { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 1; + order: 1; + } + + #main > aside { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 3; + order: 3; + } + + header, footer { + display: block; + margin: 4px; + padding: 5px; + min-height: 100px; + border: 1px solid #eebb55; + border-radius: 7pt; + background: #ffeebb; + } + + /* Too narrow to support three columns */ + @media all and (max-width: 640px) { + + #main, #page { + -webkit-flex-flow: column; + flex-direction: column; + } + + #main > article, #main > nav, #main > aside { + /* Return them to document order */ + -webkit-order: 0; + order: 0; + } + + #main > nav, #main > aside, header, footer { + min-height: 50px; + max-height: 50px; + } + } + + </style> + </head> + <body> + <header>header</header> + <div id='main'> + <article>article</article> + <nav>nav</nav> + <aside>aside</aside> + </div> + <footer>footer</footer> + </body> +</html></pre> + +<h2 id="Playground">Playground</h2> + +<p>There are a few flexbox playgrounds available online for experimenting:</p> + +<ul> + <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> + <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> + <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li> +</ul> + +<h2 id="Things_to_keep_in_mind">Things to keep in mind</h2> + +<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p> + +<p>Flexible boxes are laid out in conformance of the <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">writing mode</a>, which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p> + +<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en-US/docs/Web/CSS/direction"><code>direction</code></a>.</p> + +<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (single-line flexbox)</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("22.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11<sup>[3]</sup></td> + <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td> + <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Multi-line flexbox</td> + <td>{{CompatGeckoDesktop("28.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11<sup>[3]</sup></td> + <td>12.10<sup>[5]</sup><br> + 15 {{property_prefix("-webkit")}}</td> + <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support (single-line flexbox)</td> + <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoMobile("22.0")}}</td> + <td> + <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br> + 1.1</p> + </td> + <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> + 4.4</td> + <td>11</td> + <td>12.10<sup>[5]</sup><br> + 15{{property_prefix("-webkit")}}</td> + <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Multi-line flexbox</td> + <td>{{CompatGeckoMobile("28.0")}}</td> + <td>1.3</td> + <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> + 4.4</td> + <td>11</td> + <td>12.10<sup>[5]</sup><br> + 15{{property_prefix("-webkit")}}</td> + <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Safari up to version 6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.</p> + +<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p> + +<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p> + +<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p> + +<p>[5] While in the initial implementation in Opera 12.10 <code>flexbox</code> was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p> + +<p>[6] Up to Firefox 29, specifying <code>visibility: collapse</code> on a flex item causes it to be treated as if it were <code>display: none</code> instead of the intended behavior, treating it as if it were <code>visibility: hidden</code>. The suggested workaround is to use <code>visibility:hidden</code> for flex items that should behave as if they were designated <code>visibility:collapse</code>. For more information, see {{bug(783470)}}</p> diff --git a/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..84c95201bb --- /dev/null +++ b/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,699 @@ +--- +title: Основна концепція макета grid +slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +tags: + - CSS Grid + - Посібник +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> вводить двовимірну сітку до CSS. Сітки можуть бути використані для виділення основних областей сторінки або невеликих елементів інтерфейсу користувача. У цій статті надана схема CSS Grid Layout та нова термінологія, що є частиною специфікації CSS Grid Layout Level 1. Функції, наведені в цьому огляді, будуть більш детально пояснені далі в цьому посібнику.</p> + +<h2 id="Що_таке_grid">Що таке grid?</h2> + +<p>Grid є перехресним набором горизонтальних і вертикальних ліній, що перетинаються - один набір визначає стовпці, інший рядки. Елементи можуть бути розміщені на сітці, дотримуючись цих стовпців та рядків. Макет сітки CSS має такі особливості:</p> + +<h3 id="Фіксовані_та_гнучкі_розміри_смуг">Фіксовані та гнучкі розміри смуг</h3> + +<p>Ви можете створити сітку з фіксованими розмірами смуг – наприклад, використовуючи пікселі. Це встановлює сітку на певні пікселі, що відповідають бажаному макету. Ви також можете створити сітку з використанням гнучких розмірів у відсотках або з новою одиницею <code>fr</code>, яку розроблену саме для цієї мети.</p> + +<h3 id="Розміщення_елементів">Розміщення елементів</h3> + +<p>Ви можете розміщувати елементи у точному місці сітки, використовуючи номери рядків, імена або орієнтуючись на область сітки. Сітка також містить алгоритм для контролю розміщення елементів, які не мають явного положення на сітці.</p> + +<h3 id="Створення_додаткових_смуг_для_вмісту">Створення додаткових смуг для вмісту</h3> + +<p>Ви можете визначати сітку явно в макеті сітки, але специфікація також стосується вмісту, доданого за межами оголошеної сітки, додаючи додаткові рядки та стовпчики за потребою. Спрацьовує принцип додавання " стільки стовпчиків, скільки вміститься в контейнер".</p> + +<h3 id="Управління_вирівнюванням">Управління вирівнюванням</h3> + +<p>Сітка містить функції вирівнювання для того, щоб ми могли контролювати, як вирівнюються розміщені в області сітки елементи та як вирівнюється вся Grid-сітка.</p> + +<h3 id="Управління_вмістом_що_перекривається">Управління вмістом, що перекривається</h3> + +<p>У секцію сітки можна додати більш ніж один елемент. Також області можуть частково перекривати одна одну. Цим накладенням можна керувати за допомогою {{cssxref("z-index")}} властивості.</p> + +<p>Grid - це потужна специфікація, яка у поєднанні з іншими можливостями CSS такими, як <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, дозволяє вам створювати макети, які раніше неможливо було створити за допомогою CSS. Все починається шляхом створення сітки у <strong>grid-контейнері</strong>.</p> + +<h2 id="Grid-контейнер">Grid-контейнер</h2> + +<p>Ми створюємо <em>grid-контейнер </em>оголошуючи <code>display: grid</code> або <code>display: inline-grid</code> на елементі. Як тільки ми це зробимо, всі <em>прямі діти </em>елементу стають <em>grid-елементами</em>.</p> + +<p>У цьому прикладі, у мене div-елемент з класом <em>wrapper</em>, що містить в собі п'ять дочірніх елементів.</p> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>Я роблю з класу <code>.wrapper</code> grid-контейнер.</p> + +<pre class="brush: css">.wrapper { + display: grid; +} +</pre> + +<div class="hidden"> +<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +}</code></pre> +</div> + +<p>{{ EmbedLiveSample('The_Grid_container', '200', '330') }}</p> + +<p>Всі прямі нащадки тепер є grid-елементами. В браузері ви не помітите ніякої різниці між виглядом елементів до і після створення grid-контейнеру. З цієї точки зору вам буде корисно працювати в редакторі Firefox Developer Edition, який має <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a>, доступний як частина інструментів розробника. Якщо ви розглянете цей приклад в Firefox і перевірите grid, ви побачите маленький значок біля значення <code>grid</code>. Клікніть його і сітка накладеться на цей елемент у вікні браузера.</p> + +<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p> + +<p>Як вийде - працюйте з CSS Grid Layout, це інструмент надасть вам краще розуміння того що відбувається з вашою grid-сіткою візуально. </p> + +<p>Якщо ми хочемо щоб це було більше grid-орієнтовано, треба додавати більше смуг-стовбців.</p> + +<h2 id="Grid_Смуги">Grid Смуги</h2> + +<p>Ми визначаємо рядки і стовпчики на нашій grid-сітці властивостями {{cssxref("grid-template-columns")}} та {{cssxref("grid-template-rows")}}. Вони визначають grid смуги. Grid-смуга – це простір будь якими двома лініями на grid-сітці. На зображенні нижче кольорова смуга – перша смуга-рядок на нашій grid-сітці.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p> + +<p>До попереднього прикладу можна додати властивість <code>grid-template-columns</code>, визначаючи розмір смуг-стовпчиків.</p> + +<p>Таким чином створено grid-сітку з трьома смугами-стовпчиками шириною по 200 рх. Дочірні елементи вкладатимуться в цю grid-сітку в кожну клітинку. </p> + +<div id="grid_first"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 200px 200px 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +}</code></pre> +</div> + +<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> +</div> + +<h3 id="Одиниця_fr">Одиниця fr </h3> + +<p>Смуги визначаються одиницями довжини. Grid-сітка має додаткову одиницю довжини яка допомагає створювати гнучкі grid-смуги. Одиниця <code>fr</code> являє собою частку вільного простору в grid-контейнері. Наступна сітка створює три рівних по ширині смуги які стають більше і менше відповідно наявному простору. </p> + +<div id="fr_unit_ls"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<div class="hidden"> +<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +}</code></pre> +</div> + +<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> +</div> + +<p>В наступному прикладі ми створюємо визначення з <code>2fr</code> смугою і дві <code>1fr</code> смуги. Доступний простір розділений на чотири частини, дві з яких надаються першій смузі і по одній частині кожній з наступних двох.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} +</pre> + +<p>В останньому прикладі ми комбінуємо абсолютні одиниці ширини смуг з фракційними. Перша смуга 500 px, фіксована ширина відбирається з доступного простору. Решта простору ділиться на три і призначається двом гнучким смугам пропорційно. </p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 500px 1fr 2fr; +} +</pre> + +<h3 id="Визначення_смуг_зі_значенням_repeat()"><code>Визначення смуг зі значенням repeat()</code></h3> + +<p>Великі grid-сітки з багатьма стугами можуть використовувати значення <code>repeat()</code> для скорочення при визначенні стовпчиків: </p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<p>Також може бути записано як:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>Значення repeat може використовуватись лише для частини стовпчиків. В наступному прикладі ініційовано смугу 20 рх, секцію з 6 смуг шириною <code>1fr,</code> і смугу 20 рх. </p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 20px repeat(6, 1fr) 20px; +} +</pre> + +<p>Значення repeat визначає смуги, тобто його можливо використовувати для створення цілих шаблонів стовпчиків. В наступному прикладі grid-сітка складається з 10 смуг. Смуга <code>1fr</code> , смуга <code>2fr</code> і так п'ять разів.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(5, 1fr 2fr); +} +</pre> + +<h3 id="Неявна_і_явна_Grid-сітка">Неявна і явна Grid-сітка</h3> + +<p>Cтворюючи Grid-сітку нашого прикладу, ми визначили стовпчики-смуги властивістю {{cssxref("grid-template-columns")}}, але дозволимо grid-сітці створювати рядки так, як краще для контенту. Такі рядки створюються в неявній grid-сітці. Явна grid-сітка складається з рядків і стовпчиків, які визначаються властивостями {{cssxref("grid-template-columns")}} та {{cssxref("grid-template-rows")}}.</p> + +<p>Якщо ми розташовуємо щось поза цією grid-сіткою, або кількість вмісту потребує більше grid смуг, тоді grid-сітка створює рядки і стовпчики в неявній grid-сітці. Такі смуги матимуть авторозмір за замовчуванням якраз щоб вмістити свій контент.</p> + +<p>Ви також можете визначити встановлений розмір для смуг, створених в неявній grid-сітці властивостями {{cssxref("grid-auto-rows")}} та {{cssxref("grid-auto-columns")}}.</p> + +<p>В прикладі нижче ми використовуємо <code>grid-auto-rows</code> щоб забезпечити неявне створення смуги висотою 200 рх.</p> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +}</code></pre> +</div> + +<p>{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}</p> + +<h3 id="Розміри_смуги_і_minmax()">Розміри смуги і <code>minmax()</code></h3> + +<p>Встановлюючи явну grid-сітку або визначаючи розміри для автоматично створених рядків або стовпчиків може виникнути необхідність надання смугам мінімального розміру. Але треба переконатись що розширюючись, вони відповідатимуть будь якому доданому контенту. Наприклад ми хочемо щоб рядки ніколи не були менше 100 рх, але якщо контент розширюється до 300 рх, ми б хотіли щоб рядок розширився до такої висоти. </p> + +<p>Grid для таких випадків має функцію {{cssxref("minmax", "minmax()")}}. В наступному прикладі я використовую <code>minmax()</code>в значенні {{cssxref("grid-auto-rows")}}. Це означає, що автоматично створені рядки матимуть мінімальну висоту 100 рх, а максимальну <code>auto</code>. Використання <code>auto</code> означає, що розмір буде підлаштовуватись під розмір контенту таким чином, щоб вмістити найвищий елемент в цьому рядку.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<div class="hidden"> +<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +}</code></pre> +</div> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><div class="wrapper"> + <div>One</div> + <div>Two + <p>I have some more content in.</p> + <p>This makes me taller than 100 pixels.</p> + </div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div></code></pre> + +<p>{{ EmbedLiveSample('Track_sizing_and_minmax()', '240', '470') }}</p> + +<h2 id="Grid_Лінії">Grid Лінії</h2> + +<p>Варто зауважити що коли ми визначаємо Grid, ми визначаємо grid-смуги (але не grid-лінії). В такому випадку Grid дає нам нумеровані лінії для позиціонування елементів. В прикладі нижче Grid має 3 стовпчика, 2 рядки і 4 вертикальних лінії.</p> + +<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p> + +<p>Лінії пронумеровано згідно способу нумерації документа: зліва направо і зверху вниз (якщо на мові що викоричтовується пишуть справа наліво, то і нумерація ліній справа наліво). Лінії також можуть бути поіменовані.</p> + +<h3 id="Позиціонування_елементів_по_лініях">Позиціонування елементів по лініях</h3> + +<p>Наступний приклад демонструє просте позиціонування елементів по лініях. При розміщенні елементів ми надаємо перевагу більше лініям ніж смугам.</p> + +<p>В наступному прикладі ми розміщуємо перші два елементи на Grid-cітці, яка складається з трьох смуг-стовпчиків, застосовуючи властивості {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} та {{cssxref("grid-row-end")}}. Рухаючись зліва направо, перший елемент починається з вертикальної лініі 1 і простягається до вертикальної лініі 4, що праворуч нашої Grid-сітки. Він починається на горизонтальній лінії 1 і закінчується на горизонтальній лінії 3, тобто займає два рядка смуг.</p> + +<p>Другий елемент починається з вертикальної лініі 1, і простягається на одну смугу. Це за замовчуванням, тому можна не вказувати кінцеву лінію. Також по рядках він простягається з горизонтальній лінії 3 до горизонтальній лінії 5. Інші елементи розміщуються в порожніх просторах на Grid-сітці.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} +.box2 { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 5; +} +</pre> + +<div class="hidden"> +<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +}</code></pre> +</div> + +<p>{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}</p> + +<p>Не забуваймо, що можна використовувати <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> в Firefox Developer Tools щоб побачити як елементи позиціонуються на лініях Grid-сітки.</p> + +<h2 id="Grid-клітини">Grid-клітини</h2> + +<p><em>Grid-клітина</em> – найменша одиниця Grid-сітки, по аналогії з чарунком таблиці. Як ми бачили в попередніх прикладах, якщо Grid-сітка визначена як батьківська, дочірні елементи лежатимуть по одному в кожній її клітині. На зображенні кольором позначено першу клітину Grid-сітки.</p> + +<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p> + +<h2 id="Grid-ділянки">Grid-ділянки</h2> + +<p>Елементи можуть розташовуватись на одній або декількох клітинках як в рядок так і в стовпчик, і це створює Grid-ділянки. Grid-ділянки завжди прямокутні, неможлива, наприклад, L-подібна Grid-ділянка. На зображенні Grid-ділянка займає два рядки і два стовпчики.</p> + +<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p> + +<h2 id="Розриви">Розриви</h2> + +<p><em>Розриви</em> між Grid-клітинами створюються властивістями {{cssxref("grid-column-gap")}} та {{cssxref("grid-row-gap")}}, або скорочено {{cssxref("grid-gap")}}. В наступному прикладі створюється проміжок у 10рх між стовпчиками та проміжок <code>1em</code> між рядками. </p> + +<pre class="brush: css line-numbers language-css"><code class="language-css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 10px; + row-gap: 1em; +}</code></pre> + +<div class="note"> +<p><strong>Примітка:</strong> Коли гріди тільки почали використовуватись браузерами {{cssxref("column-gap")}}, {{cssxref("row-gap")}} та {{cssxref("gap")}} мали префікси <code>grid-</code> як от {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} та {{cssxref("grid-gap")}} відповідно.</p> + +<p>Браузери наразі оновлюються, щоб видалити цей префікс, проте попередньо встановлені версії також будуть підтримуватися як псевдоніми, що робить їх безпечними для використання. В даний час деякі веб-переглядачі не підтримують безпрефіксний варіант, тому в прикладах цього посібника використовуюється версія з grid- префіксом.</p> +</div> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div></code></pre> + +<div class="hidden"> +<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} + +.wrapper { + grid-column-gap: 10px; + grid-row-gap: 1em; + + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +}</code></pre> +</div> + +<p>{{ EmbedLiveSample('Gutters') }}</p> + +<p>Будь-який простір, відведений на розриви, буде враховуватись до відведення простору для гнучких <code>fr</code> довжин смуг. Розриви використовуваються в розмітці, як звичайні grid-смуги, за виключенням того, що ви не зможете в них нічого помістити. З точки зору лінійного позиціонування розрив діє як товста лінія.</p> + +<h2 id="Вкладені_Grid-сітки">Вкладені Grid-сітки</h2> + +<p>Grid-елементи можуть ставати Grid-контейнерами. В попередньому прикладі ми створили Grid-сітку з трьох стовпчиків з двома позиціонованими елементами. Перший з них має піделементи. Оскільки ці елементи не є прямими нащадками, вони не беруть участі в Grid-розкладці і відображаються в нормальному потоці. </p> + +<div id="nesting"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p> + +<p>Якщо застосувати <code>display: grid</code> до <code>box1</code>, то ця Grid-смуга також стане Grid-сіткою. А елементи, що в ній містяться, надалі розташовуватимуться на цій новій Grid-сітці.</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: grid; + grid-template-columns: repeat(3, 1fr); +}</code></pre> + +<div class="hidden"> +<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.box1 { + grid-column: 1 / 4; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +}</code></pre> +</div> +</div> + +<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p> + +<p>В цьому випадку, дочірня сітка немає відношення до батьківської. Як ви можете бачити на прикладі, вона не наслідує батьківськи {{cssxref("grid-gap")}}, а також лінії дочірньої сітки не вирівнюються по лініях батьківської сітки.</p> + +<h3 id="Під-сітка">Під-сітка</h3> + +<p>У робочій чорнетці специфікації Grid Level 2 є функція під назвою <em>subgrid</em>, яка має дозволити нам створювати вкладені сітки, які б використовували визначення смуги батьківської сітки.</p> + +<div class="note"> +<p><strong>Примітка:</strong> під-сітки ще не реалізовані в жодному браузері, і їхня специфікація ще може змінюватися.</p> +</div> + +<p>У поточній специфікації ми відредагуємо вищезгаданий приклад вкладеної Grid-сітки, змінивши визначення смуги з <code>grid-template-columns: repeat(3, 1fr)</code> , на <code>grid-template-columns: subgrid</code>. Вкладена сітка надалі використовуватиме батьківські Grid-смуги до елементів макета.</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: grid; + grid-template-columns: subgrid; +}</code></pre> + +<h2 id="Нашарування_елементів_за_допомогою_z-index">Нашарування елементів за допомогою <code>z-index</code></h2> + +<p>Grid-елементи можуть займати одну і ту ж саму клітину. Якщо повернутись до нашого прикладу з елементами, що розташовані за номером рядка, ми можемо змінити його так, щоб два елементи перекривали один одного.</p> + +<div id="l_ex"> +<pre class="brush: html line-numbers language-html"><code class="language-html"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; +}</code></pre> + +<div class="hidden"> +<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +}</code> +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> + +<p>Елемент <code>box2</code> тепер перекриває <code>box1</code>, він відображається зверху, тому що пізніше трапляеться в коді документу.</p> + +<h3 id="Керування_послідовністю">Керування послідовністю</h3> + +<p>Ми можемо контролювати порядок, в якому елементи накладаються один на одного, використовуючи властивість <code>z-index</code>. Якщо надати <code>box2</code> нижчий <code>z-index</code>, ніж в <code>box1</code>, то він і буде показаний нижче у стеці.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + z-index: 2; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; + z-index: 1; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +}</code></pre> +</div> + +<p>{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}</p> + +<h2 id="Наступні_кроки">Наступні кроки</h2> + +<p>У цій статті ми швидко переглянули специфікацію Grid Layout. Пограйте з прикладами коду, а потім переходьте до <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">наступної частини цього посібника, де ми насправді почнемо заглиблюватись в деталі CSS Grid Layout</a>.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/uk/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/uk/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/uk/web/css/css_grid_layout/index.html b/files/uk/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..e403f8364f --- /dev/null +++ b/files/uk/web/css/css_grid_layout/index.html @@ -0,0 +1,245 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - Grid Layout + - Grids + - Layout + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p><strong>CSS Grid layout</strong> відзначається тим, що розділяє сторінку на ділянки чи задає співвідношення між елементами, побудованими з HTML примітивів, з точки зору розміру, положення та слоїв.</p> + +<p>Подібно до таблиць, CSS Grid дозволяє автору вирівнювати елементи у стовпчиках та рядках. Однак, CSS Grid, в порівнянні з таблицями, надає більше можливостей і полегшує створення макетів. Наприклад, дочірні елементи Grid-контейнера можуть перекривати один одного і нашаровуватись, подібно до позиційованих CSS елементів.</p> + +<h2 id="Basic_Example" name="Basic_Example">Базовий приклад</h2> + +<p><span id="result_box" lang="uk"><span>У наведеному нижче прикладі показана сітка з трьома стовпчиками, в якій нові рядки мають мінімальну висоту 100 пікселів, а максимальна висота вираховується автоматично.</span> <span>Елементи розміщені в сітці використовуючи лінійне розташування .</span></span></p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="one">One</div> + <div class="two">Two</div> + <div class="three">Three</div> + <div class="four">Four</div> + <div class="five">Five</div> + <div class="six">Six</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +.one { + grid-column: 1 / 3; + grid-row: 1; +} +.two { + grid-column: 2 / 4; + grid-row: 1 / 3; +} +.three { + grid-column: 1; + grid-row: 2 / 5; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="Посилання">Посилання</h2> + +<h3 id="CSS_властивості">CSS властивості</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> +</div> + +<h3 id="CSS_функції">CSS функції</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="Глосарій">Глосарій</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="Посібники">Посібники</h2> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> +</ul> +</div> + +<h2 id="Зовнішні_ресурси">Зовнішні ресурси</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> + <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> + <li><a href="http://cssgridgarden.com">Grid Garden</a> - Гра для вивчення CSS grid</li> +</ul> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..7f715c0986 --- /dev/null +++ b/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,628 @@ +--- +title: Relationship of grid layout to other layout methods +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +<p>CSS Grid Layout has been designed to work alongside other parts of CSS, as part of a complete system for doing the layout. In this guide, I will explain how a grid fits together with other techniques you may already be using.</p> + +<h2 id="Grid_and_flexbox">Grid and flexbox</h2> + +<p>The basic difference between CSS Grid Layout and <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox Layout</a> is that flexbox was designed for layout in one dimension - either a row <em>or</em> a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid.</p> + +<h3 id="Одновимірні_макети_проти_двовимірних">Одновимірні макети проти двовимірних</h3> + +<p>A simple example can demonstrate the difference between one- and two-dimensional layouts.</p> + +<p>In this first example, I am using flexbox to lay out a set of boxes. I have five child items in my container, and I have given the flex properties values so that they can grow and shrink from a flex-basis of 200 pixels.</p> + +<p>I have also set the {{cssxref("flex-wrap")}} property to <code>wrap</code>, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row.</p> + +<div id="onedtwod"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: flex; + flex-wrap: wrap; +} +.wrapper > div { + flex: 1 1 200px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p> + +<p>In the image, you can see that two items have wrapped onto a new line. These items are sharing the available space and not lining up underneath the items above. This is because when you wrap flex items, each new row (or column when working by column) becomes a new flex container. Space distribution happens across the row.</p> + +<p>A common question then is how to make those items line up. This is where you want a two-dimensional layout method: You want to control the alignment by row and column, and this is where grid comes in.</p> + +<h3 id="The_same_layout_with_CSS_grids">The same layout with CSS grids</h3> + +<p>In this next example, I create the same layout using Grid. This time we have three <code>1fr</code> column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two.</p> + +<div class="Two_Dimensional_With_Grid"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p> +</div> + +<p>A simple question to ask yourself when deciding between grid or flexbox is:</p> + +<ul> + <li>do I only need to control the layout by row <u><em>or</em></u> column – use a flexbox</li> + <li>do I need to control the layout by row <u><em>and</em></u> column – use a grid</li> +</ul> + +<h3 id="Content_out_or_layout_in">Content out or layout in?</h3> + +<p>In addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout. Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space <em>on that line</em>.</p> + +<p>Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.</p> + +<p>If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.</p> + +<h3 id="Box_alignment">Box alignment</h3> + +<p>The feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. It made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These were things we have wanted to do for a very long time, and have come up with all kinds of hacks to at least create the visual effect of.</p> + +<p>The alignment properties from the flexbox specification have been added to a new specification called <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. This means that they can be used in other specifications, including Grid Layout. In the future, they may well apply to other layout methods as well.</p> + +<p>In a later guide in this series, I’ll be taking a proper look at Box Alignment and how it works in Grid Layout. For now, here is a comparison between simple examples of flexbox and grid.</p> + +<p>In the first example, which uses flexbox, I have a container with three items inside. The wrapper {{cssxref("min-height")}} is set, so it defines the height of the flex container. I have set {{cssxref("align-items")}} on the flex container to <code>flex-end</code> so the items will line up at the end of the flex container. I have also set the {{cssxref("align-self")}} property on <code>box1</code> so it will override the default and stretch to the height of the container and on <code>box2</code> so it aligns to the start of the flex container.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: flex; + align-items: flex-end; + min-height: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: flex-start; +} +</pre> + +<p>{{ EmbedLiveSample('Box_alignment', '300', '230') }}</p> + +<h3 id="Alignment_in_CSS_Grids">Alignment in CSS Grids</h3> + +<p>This second example uses a grid to create the same layout. This time we are using the box alignment properties as they apply to a grid layout. So we align to <code>start</code> and <code>end</code> rather than <code>flex-start</code> and <code>flex-end</code>. In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: end; + grid-auto-rows: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: start; +} +</pre> + +<p>{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}</p> + +<h3 id="The_fr_unit_and_flex-basis">The <code>fr</code> unit and <code>flex-basis</code></h3> + +<p>We have already seen how the <code>fr</code> unit works to assign a proportion of available space in the grid container to our grid tracks. The <code>fr</code> unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the <code>flex</code> properties in flexbox while still enabling the creation of a layout in two dimensions.</p> + +<p>If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.</p> + +<p>In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.</p> + +<h4 id="Auto-filling_grid_tracks">Auto-filling grid tracks</h4> + +<p>We can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the <code>auto-fill</code> and <code>auto-fit</code> properties.</p> + +<p>In this next example, I have used the <code>auto-fill</code> keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, 200px); +} +</pre> + +<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p> + +<h3 id="A_flexible_number_of_tracks">A flexible number of tracks</h3> + +<p>This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining <code>auto-fill</code> and the {{cssxref("minmax", "minmax()")}} function. In this next example, I create auto filled tracks with <code>minmax</code>. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be <code>1fr</code>. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the <code>1fr</code> maximum as an instruction to share out the remaining space between the items.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} +</pre> + +<p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p> + +<p>We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time.</p> + +<h2 id="Grid_and_absolutely_positioned_elements">Grid and absolutely positioned elements</h2> + +<p>Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.</p> + +<h3 id="A_grid_container_as_containing_block">A grid container as containing block</h3> + +<p>To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item <code>position: absolute</code> it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.</p> + +<p>In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has <code>position: relative</code> and so becomes the positioning context of this item.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3"> + This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into. + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; + position: relative; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: absolute; + top: 40px; + left: 40px; +} +</pre> + +<p>{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}</p> + +<p>You can see that the item is taking the area from grid row line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usually for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.</p> + +<p>If we remove <code>position:</code> <code>absolute</code> from the rules for <code>.box3</code> you can see how it would display without the positioning.</p> + +<h3 id="A_grid_container_as_parent">A grid container as parent</h3> + +<p>If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove <code>position:</code> <code>relative</code> from the wrapper above, positioning context is from the viewport, as shown in this image.</p> + +<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> + +<p>Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.</p> + +<h3 id="With_a_grid_area_as_the_parent">With a grid area as the parent</h3> + +<p>If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside <code>.box3</code> of the grid.</p> + +<p>I have given <code>.box3</code> position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three + <div class="abspos"> + This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area. + </div> + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: relative; +} +.abspos { + position: absolute; + top: 40px; + left: 40px; + background-color: rgba(255,255,255,.5); + border: 1px solid rgba(0,0,0,0.5); + color: #000; + padding: 10px; +} +</pre> + +<p>{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}</p> + +<h2 id="Grid_and_display_contents">Grid and <code>display: contents</code></h2> + +<p>A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and <code>display: contents</code>. The <code>contents</code> value of the display property is a new value that is described in the <a href="https://drafts.csswg.org/css-display/#box-generation">Display specification</a> as follows:</p> + +<blockquote> +<p>“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”</p> +</blockquote> + +<p>If you set an item to <code>display:</code> <code>contents</code> the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.</p> + +<div id="Display_Contents_Before"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; +} + +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p> +</div> + +<p>If I now add <code>display:</code> <code>contents</code> to the rules for <code>box1</code>, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.</p> + +<div id="Display_Contents_After"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + display: contents; +} +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p> +</div> + +<p>This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use <code>display:</code> <code>contents</code> in a similar way with flexbox to enable nested items to become flex items.</p> + +<p>As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout to get the different effects you need.</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox Guides</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Columns">Multiple-column Layout Guides</a></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values, and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/uk/web/css/css_selectors/index.html b/files/uk/web/css/css_selectors/index.html new file mode 100644 index 0000000000..20f89ab44f --- /dev/null +++ b/files/uk/web/css/css_selectors/index.html @@ -0,0 +1,116 @@ +--- +title: CSS селектори +slug: Web/CSS/CSS_Selectors +translation_of: Web/CSS/CSS_Selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p class="summary"><span class="seoSummary"><strong>CSS селектори </strong> означують елемнти до яких застосовується набір правил CSS. </span></p> + +<h2 id="Прості_селектори">Прості селектори</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Селектор за типом (Type selector)</a></dt> + <dd>Вибирає всі елементи, що відповідають вказаному імені вузла.<br> + <strong>Syntax:</strong> <code><var>eltname</var></code><br> + <strong>Example:</strong> <code>input</code> буде відповідати будь-якому елементу {{HTMLElement("input")}} .</dd> + <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Селектор за класом (Class selector)</a></dt> + <dd>Вибирає всі елементи, що відповідають вказаному атрибуту <code>class</code>.<br> + <strong>Syntax:</strong> <code>.<var>classname</var></code><br> + <strong>Example:</strong> <code>.index</code> буде відповідати будь-якому елементу, що має клас "index".</dd> + <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Селектор за ID (ID selector)</a></dt> + <dd>Вибирає елемент, відповідно до його значення атрибуту <code>id</code>. В документі повинен бути тільки один елемент з вказаним ID.<br> + <strong>Syntax:</strong> <code>#<var>idname</var></code><br> + <strong>Example:</strong> <code>#toc</code> буде відповідати елементу, що має ID зі значенням "toc".</dd> + <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Універсальний селектор (Universal selector)</a></dt> + <dd>Вибирає усі елементи. <span class="tlid-translation translation"><span title="">За бажанням, він може бути обмежений певним простором імен або всім простором імен.</span></span><br> + <strong>Syntax:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br> + <strong>Example:</strong> <code>*</code> буде відповідати усім елементам документу.</dd> + <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Селектор за атрибутом (Attribute selector)</a></dt> + <dd>Вибирає елементи, відповідно до його значення вказаного атрибуту.<br> + <strong>Syntax:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br> + <strong>Example:</strong> <code>[autoplay]</code> буде відповідати всім елементам що мають виставлений атрибут <code>autoplay</code> (в будь яке значення).</dd> +</dl> + +<h2 id="Комбінатори">Комбінатори</h2> + +<dl> + <dt><a href="/uk/docs/Web/CSS/Adjacent_sibling_combinator">Комбінатор прилеглого елемента</a></dt> + <dd>Комбінатор <code>+</code> вибирає прилеглі елементи, що мають спільного нащадка (рівноправні). Це означає, що наступний елемент слідує безпосередньо за попереднім, і в обидвох спільний предок (обидва класи знаходятся в одному старшому класі).<br> + <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br> + <strong>Приклад: </strong> під дію <code>h2 + p</code> підпадуть усі випадки, у яких елемент {{HTMLElement("p")}} знаходиться безпосередньо після елемента {{HTMLElement("h2")}}.</dd> + <dt><a href="/uk/docs/Web/CSS/General_sibling_combinator">Загальний комбінатор прилеглих елементів</a></dt> + <dd>Комбінатор <code>~</code> обирає сусідні елементи. Це значить, що другий елемент слідує за першим (хоча і не обов'язково безпосередньо зразу після нього), і обидва елементи знаходяться в межах лдного предка.<br> + <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br> + <strong>Приклад:</strong> <code>p ~ span</code> відповідатиме усім випадкам, коли елемент {{HTMLElement("span")}} слідує за елементом {{HTMLElement("p")}}.</dd> + <dt><a href="/uk/docs/Web/CSS/Child_combinator">Комбінатор прямого нащадка</a></dt> + <dd>Комбінатор <code>></code> обирає усі вузли (теги одного класу), які є прямими нащадками елемента, вказзаного першим.<br> + <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> > <var>B</var></code><br> + <strong>Приклад:</strong> <code>ul > li</code> відповідатиме усім випадкам, коли елемент {{HTMLElement("li")}} буде вкладеним прямо в елемент {{HTMLElement("ul")}} (елемент {{HTMLElement("ul")}} складається з {{HTMLElement("li")}}, що значить, що {{HTMLElement("li")}} є його прямим нащадком.</dd> + <dt><a href="/uk/docs/Web/CSS/Descendant_combinator">Комбінатор за нащадками (Descendant combinator)</a></dt> + <dd>Комбінатор <code> </code> (space) обирає всі вузли, що є нащадками першого елемента.<br> + <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br> + <strong>Приклад:</strong> <code>div span</code> обиратиме усі елементи {{HTMLElement("span")}}, що знаходяться всередині елемента {{HTMLElement("div")}}, хоча і необов'язково напряму (елемент {{HTMLElement("span")}} може бути всередині {{HTMLElement("table")}}, яка знаходиться в {{HTMLElement("div")}}).</dd> + <dt><a href="/uk/docs/Web/CSS/Column_combinator">Стовпчиковий комбінатор</a> {{Experimental_Inline}}</dt> + <dd>Комбінатор <code>||</code> вибирає усі вузли, що належать стовпчику.<br> + <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br> + <strong>Приклад:</strong> <code>col || td</code> застосовуватиметься до усіх елементів {{HTMLElement("td")}}, що потрапляють в зону застосування {{HTMLElement("col")}}.</dd> +</dl> + +<h2 id="Псевдо-класи">Псевдо-класи</h2> + +<dl> + <dt><a href="/uk/docs/Web/CSS/Pseudo-classes">Псевдо-класи</a> роблятть можливим вибір елементів, базуючись на інформаціїї, що не знаходиться в дереві елементів.</dt> + <dd><strong>Приклад:</strong> <code>a:visited</code> застосовуватиметься для усіх {{HTMLElement("a")}}, що були відвідані користувачем.</dd> +</dl> + +<h2 id="Псевдо-елементи">Псевдо-елементи</h2> + +<dl> + <dt><a href="/uk/docs/Web/CSS/Pseudo-elements">Псевдо-елементи</a> представляють собою об'єкти, що не включені до HTML.</dt> + <dd><strong>Приклад:</strong> <code>p::first-line</code> застосовуватиметься лише до першої стрічки елементів {{HTMLElement("p")}}.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br> + Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Added the <code>></code> child and <code>+</code> adjacent sibling combinators.<br> + Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>See the <a href="/en-US/docs/Web/CSS/Pseudo-classes#Specifications">pseudo-class</a> and <a href="/en-US/docs/Web/CSS/Pseudo-elements#Specifications">pseudo-element</a> specification tables for details on those.</p> + +<h2 id="Див_також">Див також</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Specificity">CSS Specificity</a></li> +</ul> diff --git a/files/uk/web/css/filter/index.html b/files/uk/web/css/filter/index.html new file mode 100644 index 0000000000..9339974d94 --- /dev/null +++ b/files/uk/web/css/filter/index.html @@ -0,0 +1,1184 @@ +--- +title: filter +slug: Web/CSS/filter +translation_of: Web/CSS/filter +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Опис">Опис</h2> + +<p><span class="seoSummary"><code><font face="Open Sans, Arial, sans-serif">Властивість </font><strong>filter</strong></code> дає можливість застосувати до елементів такі графічні ефекти, як розмиття (blurring), збільшення чіткості (sharpening), зміна кольорів (color shifting). Зазвичай фільтри викорустовуються для налаштування рендерингу зображень, фонів (backgrounds) та границь (borders).</span></p> + +<p>У CSS стандарт включені декілька функцій, які досягають визначених ефектів. Ви можете також посилатися на SVG-фільтр за допомогою посилання(URL) на <a href="/en-US/docs/Web/SVG/Element/filter">SVG filter element</a>.</p> + +<div class="note"><strong>Примітка: </strong>Більш старі версії браузера Windows Internet Explorer (4.0 - 9.0) підтримували нестандартний <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a>, який з того часу є застарілим.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">filter: url("filters.svg#filter-id"); +filter: blur(5px); +filter: brightness(0.4); +filter: contrast(200%); +filter: drop-shadow(16px 16px 20px blue); +filter: grayscale(50%); +filter: hue-rotate(90deg); +filter: invert(75%); +filter: opacity(25%); +filter: saturate(30%); +filter: sepia(60%); + +/* Apply multiple filters */ +filter: contrast(175%) brightness(3%); + +/* Global values */ +filter: inherit; +filter: initial; +filter: unset; +</pre> + +<p>З функцією використовуйте наступне:</p> + +<pre class="syntaxbox">filter: <filter-function> [<filter-function>]* | none +</pre> + +<p>Для посилання на SVG {{SVGElement("filter")}} елемент використовуйте наступне:</p> + +<pre class="syntaxbox">filter: url(file.svg#filter-element-id) +</pre> + +<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклади">Приклади</h2> + +<p>Приклади використання визначених функцій подаються нижче. Дивіться кожну функцію для конкретного прикладу.</p> + +<pre class="brush: css">.mydiv { filter: grayscale(50%) } + +/* зробить сірим на 50% та розмиє на 10px */ +img { + filter: grayscale(0.5) blur(10px); +}</pre> + +<p>Приклади використання URL функції з SVG ресурсом наведені нижче.</p> + +<pre class="brush: css">.target { filter: url(#c1); } + +.mydiv { filter: url(commonfilters.xml#large-blur) } +</pre> + +<h2 id="Функції">Функції</h2> + +<p>Для того, щоб використовувати CSS властивість <code>filter</code>, необхідно вказати значення (value) для однієї з наступних функцій. Якщо значення не є валідним, функція повертає "none". За винятком зазначених випадків, функції, які приймають значення, виражені у відсотках (наприклад, 34%), також приймають і ті значення, що виражені десятковим дробом (наприклад, 0.34).</p> + +<h3 id="url()"><code>url()</code></h3> + +<p>Функція url() приймає місцезнаходження XML-файлу, який визначає SVG-фільтр і має містити якір(anchor) до конкретного фільтр-елемента.</p> + +<pre class="brush: css">filter: url(resources.svg#c1) +</pre> + +<h3 id="blur()"><code>blur()</code></h3> + +<p>Розмиття. Застосовує гаусове (Gaussian) розмиття до вхідного зображення. Значення радіусу (‘radius’) встановлює значення стандартного відхилення до гауссової (Gaussian) функції, або на скільки пікселі екрану мають зливатися один з одним. Тому більше значення забеспечить більше розмиття. Якщо жоден параметр не вказаний, використовується значення "0". Параметр визначений, як CSS довжина, але не приймає значень у відсотках.</p> + +<pre class="brush: css">filter: blur(5px) +</pre> + +<div id="blur_example" style="display: none;"> +<pre class="brush: html"> <table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> + <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" > + <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> + </filter> + <image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table></pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -webkit-filter:blur(5px); + -ms-filter:blur(5px); + filter:blur(5px); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0; + margin: 0 0 1.286em; + height: 100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<pre class="brush: html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> + </filter> +</svg></pre> + +<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p> + +<h3 id="brightness()"><code>brightness()</code></h3> + +<p>Яскравість. Застосовує лінійний множник(мультиплікатор) до вхідного зображення, щоб зробити його більш або менш яскравим. Значення "<code>0%" </code>створить абсолютно чорне зображення. Значення "100%" залишить зображення без змін. Інші значення є лінійними мультиплікаторами, що застосовуються до ефекту. Значення, більші за "100%", дозволяються і дають більш яскраві результати. Якщо параметр ‘amount’ не вказаний, використовується значення "1".</p> + +<pre class="brush: css">filter: brightness(0.5)</pre> + +<pre class="brush: html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="[amount]"/> + <feFuncG type="linear" slope="[amount]"/> + <feFuncB type="linear" slope="[amount]"/> + </feComponentTransfer> + </filter> +</svg></pre> + +<div id="brightness_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> + <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="2"/> + <feFuncG type="linear" slope="2"/> + <feFuncB type="linear" slope="2"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:brightness(2); + -webkit-filter:brightness(2); + -o-filter:brightness(2); + -ms-filter:brightness(2); + filter:brightness(2); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + height:100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p> + +<h3 id="contrast()"><code>contrast()</code></h3> + +<p>Контрастність. Налаштовує контраст зображення. Значення "<code>0%"</code> створить абсолютно сіре зображення. Значення "100%" залишить зображення без змін. Значення, більші за "100%", дозволяються і дають більш контрастні результати. Якщо параметр ‘amount’ не вказаний, використовується значення "1". </p> + +<pre class="brush: css">filter: contrast(200%) +</pre> + +<pre class="brush: html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + </feComponentTransfer> + </filter> +</svg> +</pre> + +<div id="contrast_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="2" intercept="-0.5"/> + <feFuncG type="linear" slope="2" intercept="-0.5"/> + <feFuncB type="linear" slope="2" intercept="-0.5"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:contrast(200%); + -webkit-filter:contrast(200%); + -o-filter:contrast(200%); + -ms-filter:contrast(200%); + filter:contrast(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p> + +<h3 id="drop-shadow()"><code>drop-shadow()</code></h3> + +<p>Відкидання тіні. Застосовує відкидання тіні до вхідного зображення. Це фактично розмита, зміщена версія альфа-маски вхідного зображення, намальована певним кольором та створена під зображенням. Функція приймає параметр типу <shadow> (визначена у CSS3 Backgrounds), за винятком того, що ключове слово ‘inset’ не дозволене. Дана функція дуже схода на більш укорінену властивість {{cssxref("box-shadow")}}; різниця у тому, що у випадку з фільтрами деякі браузери забезпечують апаратне прискорення для більш високої продуктивності. Нижче наведені параметри параметра <shadow>.</p> + +<dl> + <dt><code><offset-x></code> <code><offset-y></code> <small>(required)</small></dt> + <dd>Ці два обов'язкові {{cssxref("<length>")}} значення вказують зміщення тіні. <offset-x> визначає горизонтальну відстань. Від’ємні значення розміщують тінь лівіше елемента. <offset-y> визначає вертикальну відстань. Від’ємні значення розміщують тінь вище елемента. Дивіться {{cssxref("<length>")}} можливі одиниці. Якщо обидва значення "0", тінь розміщується за елементом (і може створювати ефект ромиття, якщо вказані <blur-radius> та/або <spread-radius>).</dd> + <dt><code><blur-radius></code> <small>(optional)</small></dt> + <dd>Це необов'язкове третє {{cssxref("<length>")}} значення. Чим більше значення, тим більше розмиття, тим більшою і світлішою стає тінь. Від’ємні значення не дозволені. Якщо значення не визначене, воно буде "0" (межі тіні будуть чіткими).</dd> + <dt><code><spread-radius></code> <small>(optional)</small></dt> + <dd>Це необов'язкове четверте {{cssxref("<length>")}} значення. Додатні значення розширять тінь і зроблять її більшою, а від'ємні - зменшать. Якщо значення не визначено, воно буде "0" (тінь буде мати какий розмір, як зображення). <br> + Примітка: Webkit та, можливо, інші браузери, не підтримують цей четвертий параметр; він не виконається, якщо його додати.</dd> + <dt><code><color></code> <small>(optional)</small></dt> + <dd>Дивіться {{cssxref("<color>")}} значення, щоб дізнатися можливі ключові слова та умовні позначення. Якщо значення не вказано, колір залежить від браузера. У Gecko (Firefox), Presto (Opera) та Trident (Internet Explorer), значення {{cssxref("color")}} властивості використовується. З іншого боку, тінь WebKit є прозорою, тому вона є марою, даремною, якщо значення <color> не вказане.</dd> +</dl> + +<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre> + +<pre class="brush: html"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> + <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> + <feFlood flood-color="[color]"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> +</svg> +</pre> + +<div id="shadow_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + <feOffset dx="16" dy="16"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /> +</svg><div></td> + <td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td> + </tr> + <tr> + <td><img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> + <td><img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> + <td> + <div class="svg-container"> + <svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"> + <filter id="drop-shadow2"> + <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> + <feOffset dx="8" dy="10"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /></span> + </svg> + <div> + </td> + <td><img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: drop-shadow(16px 16px 10px black); + -webkit-filter: drop-shadow(16px 16px 10px black); + -o-filter: drop-shadow(16px 16px 10px black); + -ms-filter: drop-shadow(16px 16px 10px black); + filter: drop-shadow(16px 16px 10px black); +} +#img12 { + width:100%; + height:auto; + -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +#irregular-shape { + width: 64%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3, #img13 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p> + +<h3 id="grayscale()"><code>grayscale()</code></h3> + +<p>Конвертує вхідне зображення у відтінках сірого. Значення ‘amount’ визначає пропорцію конвертації. Значення "100%" повністю конвертує зображення у відтінки сірого. Значення "0%" залишає зобращення без змін. Значення між "0%" та "100%" є лінійними множниками(мультиплікаторами) ефекта. Якщо парамент ‘amount’ не вказаний, використовується значення "0".</p> + +<pre class="brush: css">filter: grayscale(100%)</pre> + +<div id="grayscale_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"> + <filter id="grayscale"> + <feColorMatrix type="matrix" + values="0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> +</svg><div></td> + <td><img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:grayscale(100%); + -webkit-filter:grayscale(100%); + -o-filter:grayscale(100%); + -ms-filter:grayscale(100%); + filter:grayscale(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p> + +<h3 id="hue-rotate()"><code>hue-rotate()</code></h3> + +<p>Зміна відтінків. Застосовує зміну відтінків до вхідного зображення. Значення ‘angle’ визначає кількість градусів на колірному крузі (color circle), які будуть застосовані до вхідного зображення. Значення (0deg) залишає зображення без змін. Якщо параметр ‘angle’ відсутній, використовується значення "0deg". Хоча і не існує максимального значення, ефект значень, більших за "360deg", буде обертатися навколо.</p> + +<pre class="brush: css">filter: hue-rotate(90deg)</pre> + +<div id="huerotate_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" + values="90"/> + </filter> + <image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /> +</svg><div></td> + <td><img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:hue-rotate(90deg); + -webkit-filter:hue-rotate(90deg); + -o-filter:hue-rotate(90deg); + -ms-filter:hue-rotate(90deg); + filter:hue-rotate(90deg); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<pre class="brush: html"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgHueRotate" > + <feColorMatrix type="hueRotate" values="[angle]" /> + <filter /> +</svg></pre> + +<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p> + +<h3 id="invert()"><code>invert()</code></h3> + +<p>Інвертування. Інвертує зразки (samples) у вхідному зображенні. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Значення "<code>100%"</code> інвертує зображення повністю. Значення "<code>0%"</code> залишає зображення без змін. Значення між "<code>0%"</code> та "<code>100%"</code> є лінійними множниками (мультиплікаторами) ефекта. Якщо параметр ‘<code class="property">amount</code>’ відсутній, використовується значення "<code>0"</code>.</p> + +<pre class="brush: css">filter: invert(100%)</pre> + +<div id="invert_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"> + <filter id="invert"> + <feComponentTransfer> + <feFuncR type="table" tableValues="1 0"/> + <feFuncG type="table" tableValues="1 0"/> + <feFuncB type="table" tableValues="1 0"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /> +</svg><div></td> + <td><img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: invert(100%); + -webkit-filter: invert(100%); + -o-filter: invert(100%); + -ms-filter: invert(100%); + filter: invert(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p> + +<h3 id="opacity()"><code>opacity()</code></h3> + +<p>Непрозорість. Застосовує прозорість до вхідного зображення. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Зі значенням "<code>0%"</code> зображення стає повністю прозорим. Значення "<code>100%"</code> залишає зображення без змін. Значення між "0%" та "100%" є лінійними множниками (мультиплікаторами) ефекта. Це еквівалентно множенню зразків (samples) зображення на ‘<code class="property">amount</code>’. Якщо параметр ‘amount’ відсутній, використовується значення "1". Ця функція схожа на більш укорінену властивість {{Cssxref("opacity")}}; ріниця полягає у тому, що у випадку з фільтрами деякі браузери забезпечують апаратне прискорення для більш високої продуктивності.</p> + +<pre class="brush: css">filter: opacity(50%)</pre> + +<div id="opacity_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"> + <filter id="opacity"> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.5"> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /> +</svg><div></td> + <td><img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: opacity(50%); + -webkit-filter: opacity(50%); + -o-filter: opacity(50%); + -ms-filter: opacity(50%); + filter: opacity(50%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p> + +<h3 id="saturate()"><code>saturate()</code></h3> + +<p>Насичення. Робить зображення більш насиченими. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Зі значенням "<code>0%</code>" зображення стає повністю ненасиченим. Значення "<code>100%</code>" залишає зображення без змін. Інші значення є лінійними множниками (мультиплікаторами) ефекта. Значення, більші за "<code>100%"</code> дозволяються і забеспечують більш насиченими результатами. Якщо параметр ‘<code class="property">amount</code>’ відсутній, використовується значення "1".</p> + +<pre class="brush: css">filter: saturate(200%)</pre> + +<div id="saturate_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"> + <filter id="saturate"> + <feColorMatrix type="saturate" + values="2"/> + </filter> + <image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /> +</svg><div></td> + <td><img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: saturate(200%); + -webkit-filter: saturate(200%); + -o-filter: saturate(200%); + -ms-filter: saturate(200%); + filter: saturate(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> + +<h3 id="sepia()"><code>sepia()</code></h3> + +<p>Сепія. Конвертує зображення до сепії. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Значення "<code>100%</code>" конвертує зображення повністю. Значення "<code>0%"</code> залишає зображення без змін. Значення між "<code>0%</code>" та "<code>100%</code>" є лінійними множниками (мультиплікаторами) ефекта. Якщо параметр ‘amount’ відсутній, використовується значення "<code>0</code>".</p> + +<pre class="brush: css">filter: sepia(100%)</pre> + +<div id="sepia_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"> + <filter id="sepia"> + <feColorMatrix type="matrix" + values="0.393 0.769 0.189 0 0 + 0.349 0.686 0.168 0 0 + 0.272 0.534 0.131 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /> +</svg><div></td> + <td><img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: sepia(100%); + -webkit-filter: sepia(100%); + -o-filter: sepia(100%); + -ms-filter: sepia(100%); + filter: sepia(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p> + +<h2 id="Combining_functions">Combining functions</h2> + +<p>Можна комбінувати будь-яку кількість функцій для маніпулювання рендерингом. Наступні приклади посилюють контрастність та яскравість зображення.</p> + +<pre class="brush: css">filter: contrast(175%) brightness(103%)</pre> + +<div id="combination_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: contrast(175%) brightness(103%); + -webkit-filter: contrast(175%) brightness(103%); + -o-filter: contrast(175%) brightness(103%); + -ms-filter: contrast(175%) brightness(103%); + filter: contrast(175%) brightness(103%); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}</td> + <td>{{ Spec2('Filters 1.0') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(35)}}<sup>[2]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}</td> + <td>{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>On SVG Elements</td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatGeckoDesktop(35)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop(35)}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td> + <p>6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</p> + </td> + </tr> + <tr> + <td>On SVG Elements</td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatGeckoDesktop(35)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] У Chrome 18 to 19, функція <code>saturate()</code> приймає тільки цілі десяткові числа та відсоткові значання. Цей баг виправлений у Chrome 20 та наступних.</p> + +<p>[2] До Firefox 34, Gecko виконував тільки <code>{{anch("url()")}}</code> форму властивості <code>filter</code>; так як формування ланцюжка (chaining) тоді не було реалізовано, було дозволено тільки одне <code>url()</code> (або коли <code>layout.css.filters.enabled</code> pref було встановлене як <code>false</code>).</p> + +<p>Функціональні значення <code>filter</code> контролюються <code>layout.css.filters.enabled</code> pref і був доступним, але заборонений за замовчуванням у Firefox 34.</p> + +<p>[3] Internet Explorer з 4.0 по 9.0 виконував нестандартну властивіст <code>filter</code>. Синтаксис сильно відрізняється і не був тут задокументований.</p> + +<p>[4] У даний момент Blink не виконує дану властивість(feature). Дивіться <a href="https://crbug.com/109224">bug 109224</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li> + <li>The {{Cssxref("mask")}} property</li> + <li><a class="internal" href="/en-US/docs/Web/SVG">SVG</a></li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li> + <li><a class="external" href="http://techstream.org/Web-Design/CSS3-Image-Filters">CSS 3 filters</a> Tech Stream article</li> + <li><a class="external" href="http://davidwalsh.name/css-filters">CSS filters</a> By David Walsh</li> +</ul> diff --git a/files/uk/web/css/flex-grow/index.html b/files/uk/web/css/flex-grow/index.html new file mode 100644 index 0000000000..05bf7ed70b --- /dev/null +++ b/files/uk/web/css/flex-grow/index.html @@ -0,0 +1,194 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +translation_of: Web/CSS/flex-grow +--- +<div>{{CSSRef}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Властивість <strong><code>flex-grow</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> визначає яку частину вільного простору може зайняти дочірній flex елемент. Ця властивість встановлюється в одиницях відносних до інших контейнерів.</p> + +<p>{{cssinfo}}</p> + +<p>Можете більш детальніше довідатся як користуватись властивостями <strong>flex </strong>з наступної статті <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush:css">/* <number> values */ +flex-grow: 3; +flex-grow: 0.6; + +/* Global values */ +flex-grow: inherit; +flex-grow: initial; +flex-grow: unset; +</pre> + +<h3 id="Значення">Значення</h3> + +<dl> + <dt><code><number></code></dt> + <dd>Дивись {{cssxref("<number>")}}. Значення менші за <code>0</code> є недійсними.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклад">Приклад</h2> + +<h3 id="HTML">HTML</h3> + +<div id="Live_Sample"> +<pre class="brush: html"><h4>This is a Flex-Grow</h4> +<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> + <div class="box1" style="background-color:brown;">D</div> + <div class="box1" style="background-color:lightgreen;">E</div> + <div class="box" style="background-color:brown;">F</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#content { + -ms-box-orient: horizontal; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -moz-flex; + display: -webkit-flex; + display: flex; + + -webkit-justify-content: space-around; + justify-content: space-around; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-align-items: stretch; + align-items: stretch; +} + +.box { + flex-grow: 1; + border: 3px solid rgba(0,0,0,.2); +} + +.box1 { + flex-grow: 2; + border: 3px solid rgba(0,0,0,.2); +} +</pre> +</div> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Example', '750px', '400px', '', 'Web/CSS/flex-grow')}}</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_браузерів">Підтримка браузерів</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup></td> + <td>21.0{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>11</td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>< 0 animate</td> + <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td> + <td>49.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>12.10</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>< 0 animate</td> + <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox підтримує лише однострочні flexbox конструкції до версії Firefox 27. Щоб активувати підтримку flexbox властивостей, для Firefox 18 та 19, користувачу потрібно змінити параметр <code>layout.css.flexbox.enabled на true </code>у файлі налаштувань about:config.</p> + +<p>В додаток до непрефіксної підтримки, Gecko 48.0 {{geckoRelease("48.0")}} додана підтримка для <code>-webkit префіксних варіацій властивостей для підтримки веб-сумісності, для цього потрібно змінити властивість layout.css.prefixes.webkit на true, яка за замовченням встановлена - false. Але з релізу </code>Gecko 49.0 {{geckoRelease("49.0")}} ця властивість набуває значення true за замовченням.</p> + +<p>[2] До того як вийшла версія Firefox 32, Gecko не був в змозі анімувати знаяення які починалися чи закінчувалися на <code>0</code><code>(<a href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths">Spec</a>, <a href="https://jsbin.com/zacifexuke/edit?html,css,output">Demo</a>)</code>.</p> + +<h2 id="Дивись_також">Дивись також</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li> +</ul> diff --git a/files/uk/web/css/flex/index.html b/files/uk/web/css/flex/index.html new file mode 100644 index 0000000000..763924bf80 --- /dev/null +++ b/files/uk/web/css/flex/index.html @@ -0,0 +1,209 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - CSS Flexible Boxes + - CSS Властивість + - flexbox +translation_of: Web/CSS/flex +--- +<div>{{CSSRef}}</div> + +<h2 id="Загальний_огляд">Загальний огляд</h2> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> параметр <strong>flex </strong>є <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">скороченим записом</a> властивості, котра визначає здатність flex елемента змінювати свої розміри аби заповнити наявний простір. Flex елементи можна розтягнути аби використати увесь наявний простір пропорційно до вказаного параметра flex-grow, або flex-shrink аби запобігти виходу за межі батьківського контейнера.</p> + +<p>{{cssinfo}}</p> + +<p>Перегляньте <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Використання гнучких CSS контейнерів</a> для більш детальної інформації та опису властивостей.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="brush:css">/* 0 0 auto */ +flex: none; + +/* Одне значення, ціле число: flex-grow (flex-basis змінюється на 0) */ +flex: 2; + +/* Одне значення, width/height: flex-basis */ +flex: 10em; +flex: 30px; +flex: auto; +flex: content; + +/* Два значення: flex-grow | flex-basis */ +flex: 1 30px; + +/* Два значення: flex-grow | flex-shrink (flex-basis змінюється на 0) */ +flex: 2 2; + +/* Три значення: flex-grow | flex-shrink | flex-basis */ +flex: 2 2 10%; + +/* Глобальні значення */ +flex: inherit; +flex: initial; +flex: unset; +</pre> + +<h3 id="Values" name="Values">Значення</h3> + +<dl> + <dt><code><'flex-grow'></code></dt> + <dd>Визначає <code><a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis">ширину</a> </code>flex елемента відносно ширин всіх сусідніх елементів. Перегляньте {{cssxref("<number>")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.</dd> + <dt><code><'flex-shrink'></code></dt> + <dd>Визначає <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> flex елемента. Перегляньте {{cssxref("<number>")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.</dd> + <dt><code><'flex-basis'></code></dt> + <dd>Визначає <code><a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis">базис</a> </code>flex елемента. Може приймати будь-яке значення, з тих, що можуть приймати параметри <code>width і</code> <code>height</code>. Значення <code>0</code> має мати одиницю виміру, аби уникнути трактування його, як значення гнучкості. Приймає значення <code>0%,</code> коли воно не вказується явно.</dd> + <dt><code>none</code></dt> + <dd>Ключове слово, котре по значенню рівне <code>0 0 auto</code>.</dd> + <dt> + <h3 id="Формальний_синтаксис">Формальний синтаксис</h3> + </dt> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклад">Приклад</h2> + +<pre class="brush: css">#flex-container { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; +} + +#flex-container > .flex-item { + -webkit-flex: auto; + flex: auto; +} + +#flex-container > .raw-item { + width: 5rem; +} +</pre> + +<pre class="brush: html"><div id="flex-container"> + <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> + <div class="raw-item" id="raw">Raw box</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: js">var flex = document.getElementById("flex"); +var raw = document.getElementById("raw"); +flex.addEventListener("click", function() { + raw.style.display = raw.style.display == "none" ? "block" : "none"; +}); +</pre> + +<pre class="brush: css">#flex-container { + width: 100%; + font-family: Consolas, Arial, sans-serif; +} + +#flex-container > div { + border: 1px solid #f00; + padding: 1rem; +} + +#flex-container > .raw-item { + border: 1px solid #000; +} +</pre> +</div> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Example','100%','60')}}</p> + +<h2 id="Specifications" name="Specifications">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Специфікація</th> + <th>Стан</th> + <th>Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Загальне визначення</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Підтримка</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("20.0")}}<br> + {{CompatGeckoDesktop("28.0")}}<sup>[2]</sup></td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br> + 11.0<sup>[3]</sup></td> + <td>12.10</td> + <td> + <p>6.1{{property_prefix("-webkit")}}<br> + 9.0</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Підтримка</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatUnknown}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td>7.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] В Gecko 18.0 {{geckoRelease("18.0")}} та 19.0 {{geckoRelease("19.0")}} підтримка flexbox прихована за налаштуванням <code>about:config</code> пунктом <code>layout.css.flexbox.enabled</code>, котрий по замовчуванню - <code>false</code>. </p> + +<p>[2] Багатостроковий flexbox підтримується починаючи з Gecko 28.0 {{geckoRelease("28.0")}}.</p> + +<p>В додаток до підтримки непрефіксованого flexbox, у Gecko 48.0 {{geckoRelease("48.0")}} додано підтримку <code>-webkit</code> префіксованої версії властивості з огляду на веб-сумісність з налаштуванням <code>layout.css.prefixes.webkit</code>, котре по замовчуванню дорівнює <code>false.</code> Починаючи з версії Gecko 49.0 {{geckoRelease("49.0")}} це налаштування дорівнює <code>true</code>.</p> + +<p>[3] Internet Explorer 10-11 (але не 12+) ігнорує вживання <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> у частині <code>flex </code>синтаксису, що відповідає за властивість <code>flex-basis</code>. Це можна обійти використанням не сокроченого, а повного запису цієї властивості. Перегляньте <a href="https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc">Flexbug #8</a> задля більш детального опису. Визначення <code>flex</code> зі значенням без одиниці виміру у частині, що відповідає за <code>flex-basis</code> вважається синтаксично не вірною у цих версіях, а тому її буде проігноровано. Виправити це можна - завжди додаючи одиницю виміру у частині властивості, що відповідає за <code>flex-basis</code>, скороченого запису <code>flex</code>. Перегляньте <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> задля більш детільного опису.</p> + +<h2 id="See_also" name="See_also">Також варто переглянути</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Використання гнучких CSS блоків</a></li> +</ul> diff --git a/files/uk/web/css/font-smooth/index.html b/files/uk/web/css/font-smooth/index.html new file mode 100644 index 0000000000..97344e55bf --- /dev/null +++ b/files/uk/web/css/font-smooth/index.html @@ -0,0 +1,85 @@ +--- +title: font-smooth +slug: Web/CSS/font-smooth +translation_of: Web/CSS/font-smooth +--- +<div>{{ CSSRef }} {{ Non-standard_header }}</div> + +<p><strong><code>font-smooth</code></strong> <a href="/en/CSS" title="CSS">CSS</a> властивість контролює застосування антиалайзингу коли відбувається рендеринг шрифта.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{ Xref_cssinitial() }}</strong></td> + <td><code>auto</code></td> + </tr> + <tr> + <td><strong>Застосовується до</strong></td> + <td>всіх елементів і згенерованого контенту</td> + </tr> + <tr> + <td><strong>{{ Xref_cssinherited() }}</strong></td> + <td>yes</td> + </tr> + <tr> + <td><strong>Відсотки</strong></td> + <td>відносно розмірів шрифта батьківського елемента</td> + </tr> + <tr> + <td><strong>Media</strong></td> + <td>{{ Xref_cssvisual() }}</td> + </tr> + <tr> + <td><strong>{{ Xref_csscomputed() }}</strong></td> + <td>як зазначено в специфікації</td> + </tr> + </tbody> +</table> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush:css">/* Keyword values */ +font-smooth: auto; +font-smooth: never; +font-smooth: always; + +/* <length> value */ +font-smooth: 2em; +</pre> + +<div class="note"> +<p><strong>WebKit</strong> <span class="tlid-translation translation" lang="uk"><span title="">реалізує подібну властивість, але з різними значеннями</span></span>: <strong><code>-webkit-font-smoothing</code></strong>. <span class="tlid-translation translation" lang="uk"><span title="">Це працює тільки на</span></span> Mac OS X/macOS.</p> + +<ul> + <li><code>auto</code> - <span class="tlid-translation translation" lang="uk"><span title="">веб-переглядач працює в даному режимі за замовчуванням (Використовує субпіксель для згладжування, коли він доступний)</span></span></li> + <li><code>none</code> - <span class="tlid-translation translation" lang="uk"><span title="">відсутність згладжування шрифту;</span> <span title="">відображення тексту з нерівними гострими краями.</span></span></li> + <li><code>antialiased</code> - згладжує текст на піксельному рівні, на відміну від субпіксельного. Перехід від субпіксельного рендерингу до антиалайзингу для світлого тексту на темному тлі (бекграунді) робить жирність тексту (<code><strong>font-weight</strong></code>) меншою.</li> + <li><code>subpixel-antialiased</code> - на більшості не Retina дисплеях, результатом буде найчіткіший текст.</li> +</ul> +</div> + +<div class="note"> +<p><strong>Firefox</strong> <span class="tlid-translation translation" lang="uk"><span title="">реалізує подібну властивість, але з різними значеннями</span></span>: <strong><code>-moz-osx-font-smoothing</code></strong>. Це працює тільки на Mac OS X/macOS.</p> + +<ul> + <li><code>auto</code> - <span class="tlid-translation translation" lang="uk"><span title="">дозволяє браузеру вибирати оптимізацію для вирівнювання шрифту, як правило</span></span> <code>grayscale</code>.</li> + <li><code>grayscale</code> - рендер тексту з використанням відтінків сірого, на відміну від субпіксельного. Перехід від субпіксельного рендерингу до антиалайзингу для світлого тексту на темному тлі (бекграунді) робить жирність тексту (<code><strong>font-weight</strong></code>) меншою.</li> +</ul> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<p>В ранніх версіях згладжування (2002) шрифтів <a href="http://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts було присутнє</a>, але на даний момент <code>font-smooth</code> його було видалено і ця специфікація не відповідає стандартам.</p> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div class="hidden"><span class="tlid-translation translation" lang="uk"><span title="">Таблиця сумісності на цій сторінці формується із структурованих даних.</span> <span title="">Якщо ви хочете зробити свій внесок у дані, будь ласка, ознайомтесь</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і відправте нам pull запит.</div> + +<p>{{Compat("css.properties.font-smooth")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li><a href="http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/">Please Stop "Fixing" Font Smoothing – UsabilityPost</a></li> + <li><a href="https://www.zachleat.com/web/font-smooth/">Laissez-faire font smoothing and anti-aliasing</a></li> +</ul> diff --git a/files/uk/web/css/font-weight/index.html b/files/uk/web/css/font-weight/index.html new file mode 100644 index 0000000000..df6e507224 --- /dev/null +++ b/files/uk/web/css/font-weight/index.html @@ -0,0 +1,271 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +translation_of: Web/CSS/font-weight +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>font-weight</code></strong> <a href="/uk/docs/CSS" title="CSS">CSS</a> property specifies the weight (or boldness) of the font. The font weights available to you will depend on the {{cssxref("font-family")}} you are using. Some fonts are only available in <code>normal</code> and <code>bold</code>.</p> + +<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +font-weight: normal; +font-weight: bold; + +/* Keyword values relative to the parent */ +font-weight: lighter; +font-weight: bolder; + +/* Numeric keyword values */ +font-weight: 100; +font-weight: 200; +font-weight: 300; +font-weight: 400; +font-weight: 500; +font-weight: 600; +font-weight: 700; +font-weight: 800; +font-weight: 900; + +/* Global values */ +font-weight: inherit; +font-weight: initial; +font-weight: unset; +</pre> + +<p>The <code>font-weight</code> property is specified using a single keyword value from the list below.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Normal font weight. Same as <code>400</code>.</dd> + <dt><code>bold</code></dt> + <dd>Bold font weight. Same as <code>700</code>.</dd> + <dt><code>lighter</code></dt> + <dd>One font weight lighter than the parent element (among the available weights of the font).</dd> + <dt><code>bolder</code></dt> + <dd>One font weight heavier than the parent element (among the available weights of the font).</dd> + <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt> + <dd>Numeric font weights for fonts that provide more than just <code>normal</code> and <code>bold</code>.</dd> +</dl> + +<h3 id="Fallback_weights">Fallback weights</h3> + +<p>If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:</p> + +<ul> + <li>If a weight greater than <code>500</code> is given, the closest available heavier weight is used (or, if there is none, the closest available lighter weight).</li> + <li>If a weight less than <code>400</code> is given, the closest available lighter weight is used (or, if there is none, the closest available heavier weight).</li> + <li>If a weight of exactly <code>400</code> is given, then <code>500</code> is used. If <code>500</code> is not available, then the heuristic for font weights less than 400 is used.</li> + <li>If a weight of exactly <code>500</code> is given, then <code>400</code> is used. If <code>400</code> is not available, then the heuristic for font weights less than 400 is used.</li> +</ul> + +<p>This means that for fonts that provide only <code style="font-style: normal;">normal</code> and <code style="font-style: normal;">bold</code>, <code style="font-style: normal;">100</code>-<code>500</code> are <code>normal</code>, and <code style="font-style: normal;">600</code>-<code style="font-style: normal;">900</code> are <code>bold</code>.</p> + +<h3 id="Meaning_of_relative_weights">Meaning of relative weights</h3> + +<p>When <code>lighter</code> or <code>bolder</code> is specified, the following chart shows how the absolute font weight of the element is determined:</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Inherited value</th> + <th><code>bolder</code></th> + <th><code>lighter</code></th> + </tr> + </thead> + <tbody> + <tr> + <th>100</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>200</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>300</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>400</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>500</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>600</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>700</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>800</th> + <td>900</td> + <td>700</td> + </tr> + <tr> + <th>900</th> + <td>900</td> + <td>700</td> + </tr> + </tbody> +</table> + +<h3 id="Common_weight_name_mapping">Common weight name mapping</h3> + +<p>The numerical values (<code>100</code> to <code>900</code>) roughly correspond to the following common weight names:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Value</th> + <th scope="col">Common weight name</th> + </tr> + </thead> + <tbody> + <tr> + <td>100</td> + <td>Thin (Hairline)</td> + </tr> + <tr> + <td>200</td> + <td>Extra Light (Ultra Light)</td> + </tr> + <tr> + <td>300</td> + <td>Light</td> + </tr> + <tr> + <td>400</td> + <td>Normal (Regular)</td> + </tr> + <tr> + <td>500</td> + <td>Medium</td> + </tr> + <tr> + <td>600</td> + <td>Semi Bold (Demi Bold)</td> + </tr> + <tr> + <td>700</td> + <td>Bold</td> + </tr> + <tr> + <td>800</td> + <td>Extra Bold (Ultra Bold)</td> + </tr> + <tr> + <td>900</td> + <td>Black (Heavy)</td> + </tr> + </tbody> +</table> + +<h3 id="Interpolation">Interpolation</h3> + +<p>A <code>font-weight</code> value is interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.</p> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Alice was beginning to get very tired of sitting by her sister on the + bank, and of having nothing to do: once or twice she had peeped into the + book her sister was reading, but it had no pictures or conversations in + it, 'and what is the use of a book,' thought Alice 'without pictures or + conversations?' +</p> + +<div>I'm heavy<br/> + <span>I'm lighter</span> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">/* Set paragraph text to be bold. */ +p { + font-weight: bold; +} + +/* Set div text to two steps heavier than + normal but less than a standard bold. */ +div { + font-weight: 600; +} + +/* Set span text to be one step lighter + than its parent. */ +span { + font-weight: lighter; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples","400","300")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>font-weight</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.font-weight")}}</p> diff --git a/files/uk/web/css/grid-template-areas/index.html b/files/uk/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..4f082d3cff --- /dev/null +++ b/files/uk/web/css/grid-template-areas/index.html @@ -0,0 +1,181 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +translation_of: Web/CSS/grid-template-areas +--- +<p><strong><code>grid-template-areas</code></strong> CSS властивість, що визначає іменовані {{glossary("grid areas")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div> + + + +<p>Ці області не відносяться до певного грід-елемента, але можуть посилатися з властивостей грід-розташування{{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, та їх скорочень {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, і {{cssxref("grid-area")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Keyword value */ +grid-template-areas: none; + +/* <string> values */ +grid-template-areas: "a b"; +grid-template-areas: "a b b" + "a c d"; + +/* Global values */ +grid-template-areas: inherit; +grid-template-areas: initial; +grid-template-areas: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Грід-контейнер не визначає жодні іменовані грід-області.</dd> + <dt><code>{{cssxref("<string>")}}+</code></dt> + <dd>Ряд створюється для кожного окремого рядка, а колонка для кожної клітинки рядка. Декілька іменованих клітинок у рядках та поміж ними створюють одну іменовану грід-область, що об'єднує відповідні клітинки. Оголошення непридатне, якщо ці клітинки утворюють прямокутник.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><section id="page"> + <header>Header</header> + <nav>Navigation</nav> + <main>Main area</main> + <footer>Footer</footer> +</section></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css; highlight[5-7]">#page { + display: grid; + width: 100%; + height: 250px; + grid-template-areas: "head head" + "nav main" + "nav foot"; + grid-template-rows: 50px 1fr 30px; + grid-template-columns: 150px 1fr; +} + +#page > header { + grid-area: head; + background-color: #8ca0ff; +} + +#page > nav { + grid-area: nav; + background-color: #ffa08c; +} + +#page > main { + grid-area: main; + background-color: #ffff64; +} + +#page > footer { + grid-area: foot; + background-color: #8cffa0; +} +</pre> + +<h3 id="Result">Result</h3> + +<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.grid-template-areas")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li> + <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/uk/web/css/index.html b/files/uk/web/css/index.html new file mode 100644 index 0000000000..50e7a47f9c --- /dev/null +++ b/files/uk/web/css/index.html @@ -0,0 +1,92 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - CSS3 + - Layout + - Reference + - Веб + - Дизайн + - Стиль + - ЦСС + - каскадна + - оформлення + - сайтів + - сторінок + - таблиця +translation_of: Web/CSS +--- +<p><span class="seoSummary"><strong>Каскадні таблиці стилів</strong> (<strong>CSS</strong>) - це мова стилів, яка використовується для опису представлення документу, написаного на <a href="/uk/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> чи <a href="/uk/docs/XML">XML</a> (включаючи XML діалекти такі, як <a href="/uk/docs/SVG">SVG</a> або <a href="/uk/docs/XHTML">XHTML</a>). CSS описує як елементи повинні відображатися на екрані, на папері, при озвученні, або на інших пристроях.</p> + +<p>CSS є одною з основних мов <em>відкритої мережі</em> і має стандартизовану <a class="external" href="http://w3.org/Style/CSS/#specs">W3C специфікацію</a>. Розроблена по рівнях, CSS1 в даний час застаріла, CSS2.1 є рекомендованою, і CSS3, яка тепер розділена на більш дрібні модулі та розвивається шляхом стандартизації.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>CSS Посилання</span> + + <p><a href="/uk/docs/Web/CSS/Reference">Ексклюзивні посилання</a> для загартованих Web розробників, які описують кожний параметр і поняття CSS.</p> + </li> + <li><span>CSS Посібник</span> + <p>Наша <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS сфера навчання</a> складається з безлічі посібників, щоб підняти ваш рівень з початкового, до такого, на якому ви будете себе комфортно почувати в CSS, охоплюючи всі основні принципи.</p> + </li> + <li><span>Знайомство з CSS</span> + <p>Якщо ви початківець у веб програмуванні, переконайтеся, що ви прочитали нашу статтю <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS Основи</a>, щоб дізнатися що таке є CSS і як їх використовувати.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="Посібники">Посібники</h2> + +<p>Наша <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS сфера навчання</a> має декілька модулів, які дозволяють вивчити CSS з нуля — знання мови не вимагається.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ в CSS</a></dt> + <dd>Цей модуль дозволяє вам почати вивчення з базових понять як CSS працює, включаючи селектори і параметри, написання правил CSS, застосування CSS до HTML, як вказати довжину, колір та інші одиниці виміру в CSS, каскади і успадкування, основи блочної моделі та відлагоджування CSS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text">Стилізація тексту</a></dt> + <dd>В даному модулі ми розглянемо основи стилізації тексту, включаючи налаштування шрифтів, товщини, курсиву, відстані між рядками і буквами, а також застосування тіней та інших можливостей стилізації тексту. Ми розглянемо в даному модулі використання власних шрифтів на вашій веб-сторінці, і стилізацію списків і посилань.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes">Стилізація блоків</a></dt> + <dd>Далі ми розглянемо стилізацію блоків, один з базових кроків у напрямку розбивання веб-сторінки на блоки. У данаму модулі ми підсумуємо блокову модель і тоді розглянемо методи контролю блоків, застосовуючи внутрішні відступи (padding), рамки (borders) і зовнішні відступи, застосування власних заливок фону, картинок та інших можливостей, і такої можливості, як падіння тіней і фільтрів на блоках.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout">Макети CSS</a></dt> + <dd>До цього моменту ми вже розглянули базові поняття CSS, як стилізувати текст, я як стилізувати і маніпулювати блоками, щоб ваш контент поміщався в середину даних блоків. Тепер час розглянути розташування ваших блоків у правильному місці, по відношенню до точки огляду, і відносно один одного. Ми розкрили необхідні передумови, тому тепер ми можемо заглибитися в шаблони CSS детальніше, подивитися на налаштування для різних дисплеїв, традиційні методи шаблонів, включаючи плавання елементів по сторінці (float) і позиціонування (positioning), і нові сучасні інструменти для шаблонів такі, як флексбокс (flexbox).</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Посилання">Посилання</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS Посилання</a>: Вичерпний довідник для досвідчених веб-розробників, який описує кожний параметр і кожне поняття CSS.</li> + <li>CSS ключові поняття: + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Syntax">Синтаксис і форми даної мови</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Specificity">Особливість</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/inheritance">успадкування</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/CSS/box_model">Блочна модель</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing">margin collapse</a></li> + <li>Контексти <a href="https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context" title="block formatting context">форматування блоку</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/CSS/initial_value">Початкові</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value">обчислені</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/actual_value">фактичні</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/used_value">ті, які використовуються</a> значення</li> + <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties">CSS скорочені параметри</a></li> + </ul> + </li> +</ul> + +<h2 id="Інструменти_для_CSS_розробки">Інструменти для CSS розробки</h2> + +<ul> + <li><a href="http://jigsaw.w3.org/css-validator/">W3C CSS Сервіс Валідації</a> перевіряє чи CSS є валідним. Даний сервіс на <a href="http://www.onlinewebcheck.com/">OnlineWebCheck.com</a> робить те ж саме. Це безцінні інструменти розробки.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox інструменти розробки</a> дозволяють переглядати і редагувати наживо CSS на сторінці за допомогою <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Iнспектора</a> і інструментів <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor">Редагування Стилів</a>.</li> + <li><a href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug розширення</a> для Firefox, це популярне розширення, яке дозволяє наживо редагувати CSS на переглянутих сайтах. Дуже практично тестувати деякі зміни, хоча це розширення робить набагато більше.</li> + <li><a href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer розширення</a> для Firefox також дозволяє переглядати і наживо редагувати CSS на переглянутих сайтах. Простіше ніж Firebug, хоча й має менше можливостей.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Tools">Miscellaneous CSS інструменти.</a></li> +</ul> +</div> +</div> +</section> + +<h2 id="Дивитися_також">Дивитися також</h2> + +<ul> + <li>Mozilla's <a href="/uk/Learn/CSS">Розділ вивчення CSS</a></li> + <li>Веб мови CSS часто застосовуються до: <a href="/uk/docs/HTML">HTML</a>, <a href="/uk/docs/SVG">SVG</a>, <a href="/uk/docs/XHTML">XHTML</a> і <a href="/uk/docs/XML">XML</a>.</li> + <li>Технології Mozilla, які широко використовують CSS: <a href="/uk/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/uk/Firefox">Firefox</a>, і <a href="/uk/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/uk/docs/Extensions">розширення</a> і <a href="/uk/Add-ons/Themes">теми</a>.</li> +</ul> diff --git a/files/uk/web/css/linear-gradient()/index.html b/files/uk/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..cf11a60ebc --- /dev/null +++ b/files/uk/web/css/linear-gradient()/index.html @@ -0,0 +1,208 @@ +--- +title: linear-gradient() +slug: Web/CSS/linear-gradient() +translation_of: Web/CSS/linear-gradient() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>linear-gradient()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> функція створює зображення, що складається з прогресивного переходу між двома або більше кольорами по прямій лінії. Резултатом буде об`єкт типу {{CSSxRef("<gradient>")}} , що є спеціальним видом {{CSSxRef("<image>")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Як і будь-який градієнт, лінійний градієнт не має внутрішніх розмірів;</span> <span title="">тобто він не має природного або бажаного розміру, а також кращого співвідношення.</span> <span title="">Його розмір буде відповідати розміру елемента, до якого він застосовується.</span></span></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Щоб створити лінійний градієнт, який повторюється так, щоб заповнити його контейнер, скористайтеся функцією </span></span> {{CSSxRef("repeating-linear-gradient")}}.</p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Оскільки</span></span> <code><gradient></code> <span class="tlid-translation translation" lang="uk"><span title="">належить до типу даних</span></span> <code><image></code>, <span class="tlid-translation translation" lang="uk"><span title="">вони можуть використовуватися лише там, де можна використовувати</span></span> <code><image></code>. <span class="tlid-translation translation" lang="uk"><span title="">З цієї причини </span></span><code>linear-gradient()</code> не працюватиме там де застосовуються такі властивості як {{CSSxRef("background-color")}} і інших властивостях, що використовують тип даних {{CSSxRef("<color>")}}.</p> + +<h2 id="Композиція_лінійного_градієнту">Композиція лінійного градієнту</h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Лінійний градієнт визначається віссю - градієнтною лінією та двома або більше точками зупинки кольорів.</span> <span title="">Кожна точка на осі - виразний колір;</span> <span title="">щоб створити плавний градієнт, функція</span></span> <code>linear-gradient()</code> <span class="tlid-translation translation" lang="uk"><span title="">малює серію кольорових ліній, перпендикулярних лінії градієнта, кожна з яких відповідає кольору точки, де вона перетинає лінію градієнта.</span></span></p> + +<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Лінія градієнта визначається центром коробки, що містить зображення градієнта, і кутом.</span> <span title="">Кольори градієнта визначаються двома або більше точками: початковою точкою, кінцевою точкою та між ними необов’язковими кольоровими точками зупинки.</span></span></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Початковою точкою є місце на лінії градієнта, де починається перший колір.</span> <span title="">Кінцевою точкою є точка, в якій закінчується останній колір.</span> <span title="">Кожна з цих двох точок визначається перетином лінії градієнта з перпендикулярною лінією, що проходить від кута коробки, який знаходиться в одному квадраті.</span> <span title="">Кінцеву точку можна просто зрозуміти як симетричну точку відліку.</span> <span title="">Ці дещо складні визначення призводять до цікавого ефекту, який іноді називають магічними кутами: кути, найближчі до початкової та кінцевої точок, мають той же колір, що і їхні відповідні початкові або кінцеві точки.</span></span></p> + +<h3 id="Налаштування_градієнтів"><span class="tlid-translation translation" lang="uk"><span title="">Налаштування градієнтів</span></span></h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Додавши більше точок зупинки кольорів у лінії градієнта, ви можете створити модифікований перехід між декількома кольорами.</span> <span title="">Позицію зупинки кольору можна чітко визначити, використовуючи</span></span> {{CSSxRef("<length>")}} <span class="tlid-translation translation" lang="uk"><span title="">або </span></span> {{CSSxRef("<percentage>")}}. <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви не вказали розташування кольору, він розміщується на півдорозі між тим, що йому передує, і тим, що слідує за ним.</span> <span title="">Наступні два градієнти рівнозначні.</span></span></p> + +<pre class="brush: css">linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre> + +<p>By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this midpoint to any position between two color stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. The following example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.</p> + +<pre class="brush: css">linear-gradient(red 10%, 30%, blue 90%);</pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо дві або більше кольорових зупинки знаходяться в одному місці, переходом буде суцільна лінія між першим і останнім кольорами, задекларованими в цьому місці.</span></span> </p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Кольорові зупинки повинні бути вказані у порядку зростання.</span> <span title="">Подальші зупинки кольорів з меншим значенням замінять значення попередньої зупинки кольору, створюючи жорсткий перехід.</span> <span title="">Наступні зміни від червоного до жовтого на позначці 30%, а потім переходи від жовтого до синього понад 35% градієнта</span></span></p> + +<pre class="brush: css">linear-gradient(red 40%, yellow 30%, blue 65%); +</pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Допускається багатопозиційна зупинка кольору.</span> <span title="">Колір можна оголосити двома суміжними зупинками кольорів, задекларувавши обидві позиції в CSS.</span> <span title="">Наступні три градієнти еквівалентні:</span></span></p> + +<pre class="brush: css">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); +linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); +linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">За замовчуванням, якщо немає кольору із зупинкою 0%, перший заявлений колір буде в цій точці.</span> <span title="">Аналогічно, останній колір буде продовжуватись до позначки 100%, або буде на позначці 100%, якщо на останній зупинці не було оголошено жодної довжини.</span></span></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="language-css" id="css">/* A gradient tilted 45 degrees, + starting blue and finishing red */ +linear-gradient(45deg, blue, red); + +/* A gradient going from the bottom right to the top left corner, + starting blue and finishing red */ +linear-gradient(to left top, blue, red); + +/* Color stop: A gradient going from the bottom to top, + starting blue, turning green at 40% of its length, + and finishing red */ +linear-gradient(0deg, blue, green 40%, red); + +/* Color hint: A gradient going from the left to right, + starting red, getting to the midpoint color + 10% of the way across the length of the gradient, + taking the rest of the 90% of the length to change to blue */ +linear-gradient(.25turn, red, 10%, blue); + +/* Multi-position color stop: A gradient tilted 45 degrees, + with a red bottom-left half and a blue top-right half, + with a hard line where the gradient changes from red to blue */ +linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><side-or-corner></code></dt> + <dd>Позиція стартової точки градієнта. Якщо її вказано починається зі слова <code>to</code> і до двох ключових слів: <span class="tlid-translation translation" lang="uk"><span title="">одне вказує горизонтальну сторону</span></span> (<code>left</code> or <code>right</code>), а інше вертикальну сторону (<code>top</code> or <code>bottom</code>). <span class="tlid-translation translation" lang="uk"><span title="">Порядок бічних ключових слів не має значення.</span> <span title="">Якщо не вказано, він за замовчуванням буде </span></span> <code>to bottom</code> .</dd> + <dd>Значення <code>to top</code>, <code>to bottom</code>, <code>to left</code>, і <code>to right</code> еквівалентні <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, і <code>90deg</code>, відповідно. Інші значення конвертуються в значення кутів.</dd> + <dt>{{CSSxRef("<angle>")}}</dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Кут нахилу лінії градієнта</span></span> . <span class="tlid-translation translation" lang="uk"><span title="">Значення</span></span> <code>0deg</code> еквівалентне <code>to top</code>; <span class="tlid-translation translation" lang="uk"><span title="">зростаючі значення обертаються за годинниковою стрілкою</span></span> .</dd> + <dt><code><linear-color-stop></code></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Кольорові зупинки</span></span> {{CSSxRef("<color>")}} значення, <span class="tlid-translation translation" lang="uk"><span title="">з подальшим одним або двома опціональними положеннями точок зупинки</span></span>, ( <span class="tlid-translation translation" lang="uk"><span title="">кожен з яких є або</span></span> {{CSSxRef("<percentage>")}} або {{CSSxRef("<length>")}} <span class="tlid-translation translation" lang="uk"><span title="">по осі градієнта</span></span> ).</dd> + <dt><code><color-hint></code></dt> + <dd>The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd> + <dd> + <div class="note"> + <p><strong>Примітка:</strong> Rendering of <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a> follows the same rules as color stops in <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>.</p> + </div> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">linear-gradient( + [ <a href="/en-US/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) + \---------------------------------/ \----------------------------/ + Definition of the gradient line List of color stops + +where <side-or-corner> = [ left | right ] || [ top | bottom ] + and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> + and <linear-color-stop> = <color> [ <color-stop-length> ]? + and <color-stop-length> = [ <percentage> | <length> ]{1,2} + and <color-hint> = [ <percentage> | <length> ]</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Градієнт_під_кутом_45_градусів"><span class="tlid-translation translation" lang="uk"><span title="">Градієнт під кутом 45 градусів</span></span></h3> + +<div class="hidden"> +<pre class="brush: css">body { + width: 100vw; + height: 100vh; +}</pre> +</div> + +<pre class="brush: css">body { + background: linear-gradient(45deg, red, blue); +}</pre> + +<p>{{EmbedLiveSample("Градієнт_під_кутом_45_градусів", 120, 120)}}</p> + +<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">Gradient that starts at 60% of the gradient line</h3> + +<div class="hidden"> +<pre class="brush: css">body { + width: 100vw; + height: 100vh; +}</pre> +</div> + +<pre class="brush: css">body { + background: linear-gradient(135deg, orange, orange 60%, cyan); +}</pre> + +<p>{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}</p> + +<h3 id="Градієнт_з_багатопозиційними_точками_зупинки"><span class="tlid-translation translation" lang="uk"><span title="">Градієнт з багатопозиційними точками зупинки</span></span></h3> + +<p>У цьому прикладі використовуються багатопозиційні кольорові зупинки, причому сусідні кольори мають однакове значення стоп кольору, створюючи смугастий ефект.</p> + +<div class="hidden"> +<pre class="brush: css">body { + width: 100vw; + height: 100vh; +}</pre> +</div> + +<pre class="brush: css">body { + background: linear-gradient(to right, + red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); +}</pre> + +<p>{{EmbedLiveSample("Градієнт_з_багатопозиційними_точками_зупинки", 120, 120)}}</p> + +<div class="note"> +<p><strong>Примітка:</strong> Please see <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a> for more examples.</p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>Adds interpolation hints.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div class="hidden"><span class="tlid-translation translation" lang="uk"><span title="">Таблиця сумісності на цій сторінці формується із структурованих даних</span></span> . If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></li> + <li>Other gradient functions: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li> + <li>{{CSSxRef("<image>")}}</li> + <li>{{cssxref("element()")}}</li> + <li>{{cssxref("_image","image()")}}</li> + <li>{{cssxref("image-set","image-set()")}}</li> + <li>{{cssxref("cross-fade")}}</li> +</ul> diff --git a/files/uk/web/css/mozilla_extensions/index.html b/files/uk/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..c41a46f2d7 --- /dev/null +++ b/files/uk/web/css/mozilla_extensions/index.html @@ -0,0 +1,680 @@ +--- +title: CSS-розширення для Mozilla +slug: Web/CSS/Mozilla_Extensions +tags: + - CSS-розширення для Mozilla + - 'CSS: розширення Mozilla' + - нестандартні властивості + - нестандартні властивості CSS для Mozilla +translation_of: Web/CSS/Mozilla_Extensions +--- +<div>{{CSSRef}}</div> + +<div></div> + +<p class="summary"><span class="seoSummary">У таких додатках Mozilla, як Firefox, підтримується ряд спеціальних <strong>розширень Mozilla</strong> до </span><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a></strong>,<span class="seoSummary"> включаючи властивості, значення, псевдо-елементи і псевдо-класи, at-правила і медіа-запити. Ці розширення мають префікс</span><code style="white-space: nowrap;">-moz-</code>.</p> + +<h2 id="Властивості_і_псевдокласи_тільки_для_Mozilla_уникайте_використання_на_веб-сайтах">Властивості і псевдокласи тільки для Mozilla (уникайте використання на веб-сайтах)</h2> + +<div class="blockIndicator note"> +<p><strong>Нотаток:</strong> Ці властивості і псевдокласи працюватимуть тільки в додатках Mozilla, таких як Firefox, і не працюють на стандартних технологічних схемах. Деякі з них можуть застосовуватися тільки до елементів XUL.</p> +</div> + +<div class="index"> +<h3 id="B">B</h3> + +<ul> + <li>{{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}</li> + <li>{{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-moz-box-align")}}</li> + <li>{{CSSxRef("-moz-box-direction")}}</li> + <li>{{CSSxRef("-moz-box-flex")}}</li> + <li>{{CSSxRef("-moz-box-ordinal-group")}}</li> + <li>{{CSSxRef("-moz-box-orient")}}</li> + <li>{{CSSxRef("-moz-box-pack")}}</li> +</ul> + +<h3 id="C–I">C–I</h3> + +<ul> + <li>{{CSSxRef("-moz-context-properties")}}</li> + <li>{{CSSxRef("-moz-float-edge")}}</li> + <li>{{CSSxRef("-moz-force-broken-image-icon")}}</li> + <li>{{CSSxRef("-moz-image-region")}}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{CSSxRef("-moz-orient")}}</li> + <li>{{CSSxRef("-moz-osx-font-smoothing")}}</li> + <li>{{CSSxRef("-moz-outline-radius")}}</li> + <li>{{CSSxRef("-moz-outline-radius-bottomleft")}}</li> + <li>{{CSSxRef("-moz-outline-radius-bottomright")}}</li> + <li>{{CSSxRef("-moz-outline-radius-topleft")}}</li> + <li>{{CSSxRef("-moz-outline-radius-topright")}}</li> + <li>{{CSSxRef("overflow-clip-box")}}</li> + <li>{{CSSxRef("overflow-clip-box-block")}}</li> + <li>{{CSSxRef("overflow-clip-box-inline")}}</li> +</ul> + +<h3 id="S–Z">S–Z</h3> + +<ul> + <li>{{CSSxRef("-moz-stack-sizing")}}</li> + <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}</li> + <li>{{CSSxRef("-moz-user-focus")}}</li> + <li>{{CSSxRef("-moz-user-input")}}</li> + <li>{{CSSxRef("-moz-user-modify")}}</li> + <li>{{CSSxRef("-moz-window-dragging")}}</li> + <li>{{CSSxRef("-moz-window-shadow")}}</li> +</ul> +</div> + +<h2 id="Колись_патентовані_властивості_які_на_даний_час_є_стандартними"><span class="highlight-span">Колись патентовані властивості, які на даний час є стандартними</span></h2> + +<div class="blockIndicator note"> +<p><strong>Нотаток:</strong> Даби максимізувати сумісність вашого CSS, ви повинні використовувати непрефіксние стандартні властивості, а не префіксні, перераховані нижче. Як тільки задану властивість стандартизовано і реалізовано без префікса, префиксная версія, як правило, через деякий час видаляється.</p> +</div> + +<div class="index"> +<ul> + <li> + <h3 id="A">A</h3> + </li> + <li>{{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}</li> + <li> + <h3 id="B_2">B</h3> + </li> + <li>{{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}</li> + <li>{{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}</li> + <li>{{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Замінено на стандартну версію {{CSSxRef("box-decoration-break")}}]</li> + <li>{{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}</li> + <li>{{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end")}}]</li> + <li>{{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end-color")}}]</li> + <li>{{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end-style")}}]</li> + <li>{{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end-width")}}]</li> + <li>{{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}</li> + <li>{{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start")}}]</li> + <li>{{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start-color")}}]</li> + <li>{{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start-style")}}]</li> + <li>{{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start-width")}}]</li> + <li>{{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li> + <h3 id="C">C</h3> + </li> + <li>{{CSSxRef("clip-path")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li> + <li>{{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}</li> + <li> + <h3 id="F–M">F–M</h3> + </li> + <li>{{CSSxRef("filter")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li> + <li>{{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("margin-inline-end")}}]</li> + <li>{{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("margin-inline-start")}}]</li> + <li>{{CSSxRef("mask")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li> + <li> + <h3 id="O_2">O</h3> + </li> + <li>{{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}</li> + <li>{{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}</li> + <li>{{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}</li> + <li>{{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}</li> + <li>{{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}</li> + <li>{{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}</li> + <li> + <h3 id="P">P</h3> + </li> + <li>{{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("padding-inline-start")}}]</li> + <li>{{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("padding-inline-end")}}]</li> + <li>{{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li> + <li> + <h3 id="T–U">T–U</h3> + </li> + <li>{{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}</li> + <li>{{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}</li> + <li>{{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}</li> + <li>{{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}</li> + <li>{{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> + <li>{{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h2 id="Значення_властивостей">Значення властивостей</h2> + +<h3 id="Глобальні_значення">Глобальні значення</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("initial","-moz-initial")}}</li> +</ul> +</div> + +<h3 id="-moz-appearance" name="-moz-appearance">{{CSSxRef("-moz-appearance")}}</h3> + +<div class="index"> +<ul> + <li><code>button</code></li> + <li><code>button-arrow-down</code></li> + <li><code>button-arrow-next</code></li> + <li><code>button-arrow-previous</code></li> + <li><code>button-arrow-up</code></li> + <li><code>button-bevel</code></li> + <li><code>checkbox</code></li> + <li><code>checkbox-container</code></li> + <li><code>checkbox-label</code></li> + <li><code>checkmenuitem</code></li> + <li><code>dialog</code></li> + <li><code>groupbox</code></li> + <li><code>listbox</code></li> + <li><code>menuarrow</code></li> + <li><code>menucheckbox</code></li> + <li><code>menuimage</code></li> + <li><code>menuitem</code></li> + <li><code>menuitemtext</code></li> + <li><code>menulist</code></li> + <li><code>menulist-button</code></li> + <li><code>menulist-text</code></li> + <li><code>menulist-textfield</code></li> + <li><code>menupopup</code></li> + <li><code>menuradio</code></li> + <li><code>menuseparator</code></li> + <li><code>-moz-mac-unified-toolbar</code>{{Fx_MinVersion_Inline(3.5)}}</li> + <li><code>-moz-win-borderless-glass</code></li> + <li><code>-moz-win-browsertabbar-toolbox</code>{{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-communications-toolbox</code>{{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-glass</code></li> + <li><code>-moz-win-media-toolbox</code>{{Fx_minversion_inline(3)}}</li> + <li><code>-moz-window-button-box</code></li> + <li><code>-moz-window-button-box-maximized</code></li> + <li><code>-moz-window-button-close</code></li> + <li><code>-moz-window-button-maximize</code></li> + <li><code>-moz-window-button-minimize</code></li> + <li><code>-moz-window-button-restore</code></li> + <li><code>-moz-window-titlebar</code></li> + <li><code>-moz-window-titlebar-maximized</code></li> + <li><code>progressbar</code></li> + <li><code>progresschunk</code></li> + <li><code>radio</code></li> + <li><code>radio-container</code></li> + <li><code>radio-label</code></li> + <li><code>radiomenuitem</code></li> + <li><code>resizer</code></li> + <li><code>resizerpanel</code></li> + <li><code>scale-horizontal</code></li> + <li><code>scalethumb-horizontal</code></li> + <li><code>scalethumb-vertical</code></li> + <li><code>scale-vertical</code></li> + <li><code>scrollbarbutton-down</code></li> + <li><code>scrollbarbutton-left</code></li> + <li><code>scrollbarbutton-right</code></li> + <li><code>scrollbarbutton-up</code></li> + <li><code>scrollbar-small</code></li> + <li><code>scrollbarthumb-horizontal</code></li> + <li><code>scrollbarthumb-vertical</code></li> + <li><code>scrollbartrack-horizontal</code></li> + <li><code>scrollbartrack-vertical</code></li> + <li><code>separator</code></li> + <li><code>spinner</code></li> + <li><code>spinner-downbutton</code></li> + <li><code>spinner-textfield</code></li> + <li><code>spinner-upbutton</code></li> + <li><code>statusbar</code></li> + <li><code>statusbarpanel</code></li> + <li><code>tab</code></li> + <li><code>tabpanels</code></li> + <li><code>tab-scroll-arrow-back</code></li> + <li><code>tab-scroll-arrow-forward</code></li> + <li><code>textfield</code></li> + <li><code>textfield-multiline</code></li> + <li><code>toolbar</code></li> + <li><code>toolbarbutton-dropdown</code></li> + <li><code>toolbox</code></li> + <li><code>tooltip</code></li> + <li><code>treeheadercell</code></li> + <li><code>treeheadersortarrow</code></li> + <li><code>treeitem</code></li> + <li><code>treetwisty</code></li> + <li><code>treetwistyopen</code></li> + <li><code>treeview</code></li> + <li><code>window</code></li> +</ul> +</div> + +<h3 id="background-image" name="background-image">{{CSSxRef("background-image")}}</h3> + +<div class="index"> +<ul> + <li> + <h4 id="Gradients" name="Gradients">Градієнти{{Gecko_minversion_inline("1.9.2")}}</h4> + + <ul> + <li>{{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}</li> + <li>{{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}</li> + </ul> + </li> + <li> + <h4 id="Elements" name="Elements">Елементи{{gecko_minversion_inline("2.0")}}</h4> + + <ul> + <li>{{CSSxRef("element","-moz-element")}}</li> + </ul> + </li> + <li> + <h4 id="Sub-images" name="Sub-images">Sub-зображення{{gecko_minversion_inline("2.0")}}</h4> + + <ul> + <li>{{CSSxRef("-moz-image-rect")}}</li> + </ul> + </li> +</ul> +</div> + +<h3 id="border-color" name="border-color">{{CSSxRef("border-color")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-use-text-color</code>{{Obsolete_Inline(52)}} (видалено в {{bug(1306214)}}); використовуйте {{CSSxRef("color_value#currentColor_keyword","currentcolor")}} замість цього.</li> +</ul> +</div> + +<h3 id="border-style_and_outline-style" name="border-style_and_outline-style">{{CSSxRef("border-style")}} and {{CSSxRef("outline-style")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-bg-inset</code>{{Obsolete_Inline(1.9)}}</li> + <li><code>-moz-bg-outset</code>{{Obsolete_Inline(1.9)}}</li> + <li><code>-moz-bg-solid</code>{{Obsolete_Inline(1.9)}}</li> +</ul> +</div> + +<h3 id="color_keywords" name="color_keywords">{{CSSxRef("<color>")}} keywords</h3> + +<div class="index"> +<ul> + <li><code>-moz-activehyperlinktext</code></li> + <li><code>-moz-hyperlinktext</code></li> + <li><code>-moz-visitedhyperlinktext</code></li> + <li><code>-moz-buttondefault</code></li> + <li><code>-moz-buttonhoverface</code></li> + <li><code>-moz-buttonhovertext</code></li> + <li><code>-moz-default-background-color</code>{{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-default-color</code>{{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-cellhighlight</code></li> + <li><code>-moz-cellhighlighttext</code></li> + <li><code>-moz-field</code></li> + <li><code>-moz-fieldtext</code></li> + <li><code>-moz-dialog</code></li> + <li><code>-moz-dialogtext</code></li> + <li><code>-moz-dragtargetzone</code></li> + <li><code>-moz-mac-accentdarkestshadow</code></li> + <li><code>-moz-mac-accentdarkshadow</code></li> + <li><code>-moz-mac-accentface</code></li> + <li><code>-moz-mac-accentlightesthighlight</code></li> + <li><code>-moz-mac-accentlightshadow</code></li> + <li><code>-moz-mac-accentregularhighlight</code></li> + <li><code>-moz-mac-accentregularshadow</code></li> + <li><code>-moz-mac-chrome-active</code>{{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-chrome-inactive</code>{{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-focusring</code></li> + <li><code>-moz-mac-menuselect</code></li> + <li><code>-moz-mac-menushadow</code></li> + <li><code>-moz-mac-menutextselect</code></li> + <li><code>-moz-menuhover</code></li> + <li><code>-moz-menuhovertext</code></li> + <li><code>-moz-win-communicationstext</code>{{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-mediatext</code>{{gecko_minversion_inline(1.9)}}</li> + <li><code>-moz-nativehyperlinktext</code>{{Gecko_minversion_inline("1.9.1")}}</li> +</ul> +</div> + +<h3 id="display" name="display">{{CSSxRef("display")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-box</code> {{Deprecated_Inline}}</li> + <li><code>-moz-inline-block</code> {{Obsolete_Inline}}</li> + <li><code>-moz-inline-box</code> {{Deprecated_Inline}}</li> + <li><code>-moz-inline-grid</code>{{Obsolete_Inline(62)}}</li> + <li><code>-moz-inline-stack</code>{{Obsolete_Inline(62)}}</li> + <li><code>-moz-inline-table</code> {{Obsolete_Inline}}</li> + <li><code>-moz-grid</code>{{Obsolete_Inline(62)}}</li> + <li><code>-moz-grid-group</code>{{Obsolete_Inline(62)}}</li> + <li><code>-moz-grid-line</code>{{Obsolete_Inline(62)}}</li> + <li><code>-moz-groupbox</code>{{Obsolete_Inline}}</li> + <li><code>-moz-deck</code>{{Obsolete_Inline(62)}}</li> + <li><code>-moz-popup</code>{{Obsolete_Inline(62)}}</li> + <li><code>-moz-stack</code>{{Obsolete_Inline(62)}}</li> + <li><code>-moz-marker</code>{{Obsolete_Inline(62)}}</li> +</ul> +</div> + +<h3 id="empty-cells" name="empty-cells">{{CSSxRef("empty-cells")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-show-background</code> <span style="white-space: nowrap;">(за замовчуванням в режимі сумісності)</span></li> +</ul> +</div> + +<h3 id="font" name="font">{{CSSxRef("font")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-button</code></li> + <li><code>-moz-info</code></li> + <li><code>-moz-desktop</code></li> + <li><code>-moz-dialog</code> (як color)</li> + <li><code>-moz-document</code></li> + <li><code>-moz-workspace</code></li> + <li><code>-moz-window</code></li> + <li><code>-moz-list</code></li> + <li><code>-moz-pull-down-menu</code></li> + <li><code>-moz-field</code> <span style="white-space: nowrap;">(як color)</span></li> +</ul> +</div> + +<h3 id="font-family" name="font-family">{{CSSxRef("font-family")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-fixed</code></li> +</ul> +</div> + +<h3 id="image-rendering" name="image-rendering">{{CSSxRef("image-rendering")}}</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("image-rendering","-moz-crisp-edges")}}{{Gecko_minversion_inline("1.9.2")}}</li> +</ul> +</div> + +<h3 id="length" name="length">{{CSSxRef("<length>")}}</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("-moz-calc")}}{{gecko_minversion_inline("2.0")}}</li> +</ul> +</div> + +<h3 id="list-style-type" name="list-style-type">{{CSSxRef("list-style-type")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-arabic-indic</code></li> + <li><code>-moz-bengali</code></li> + <li><code>-moz-cjk-earthly-branch</code></li> + <li><code>-moz-cjk-heavenly-stem</code></li> + <li><code>-moz-devanagari</code></li> + <li><code>-moz-ethiopic-halehame</code></li> + <li><code>-moz-ethiopic-halehame-am</code></li> + <li><code>-moz-ethiopic-halehame-ti-er</code></li> + <li><code>-moz-ethiopic-halehame-ti-et</code></li> + <li><code>-moz-ethiopic-numeric</code></li> + <li><code>-moz-gujarati</code></li> + <li><code>-moz-gurmukhi</code></li> + <li><code>-moz-hangul</code></li> + <li><code>-moz-hangul-consonant</code></li> + <li><code>-moz-japanese-formal</code></li> + <li><code>-moz-japanese-informal</code></li> + <li><code>-moz-kannada</code></li> + <li><code>-moz-khmer</code></li> + <li><code>-moz-lao</code></li> + <li><code>-moz-malayalam</code></li> + <li><code>-moz-myanmar</code></li> + <li><code>-moz-oriya</code></li> + <li><code>-moz-persian</code></li> + <li><code>-moz-simp-chinese-formal</code></li> + <li><code>-moz-simp-chinese-informal</code></li> + <li><code>-moz-tamil</code></li> + <li><code>-moz-telugu</code></li> + <li><code>-moz-thai</code></li> + <li><code>-moz-trad-chinese-formal</code></li> + <li><code>-moz-trad-chinese-informal</code></li> + <li><code>-moz-urdu</code></li> +</ul> +</div> + +<h3 id="overflow" name="overflow">{{CSSxRef("overflow")}}</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("-moz-scrollbars-none")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-moz-scrollbars-horizontal")}} {{Deprecated_Inline}}</li> + <li>{{CSSxRef("-moz-scrollbars-vertical")}} {{Deprecated_Inline}}</li> + <li>{{CSSxRef("-moz-hidden-unscrollable")}}</li> +</ul> +</div> + +<h3 id="text-align" name="text-align">{{CSSxRef("text-align")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-center</code></li> + <li><code>-moz-left</code></li> + <li><code>-moz-right</code></li> +</ul> +</div> + +<h3 id="text-decoration" name="text-decoration">{{CSSxRef("text-decoration")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-anchor-decoration</code></li> +</ul> +</div> + +<h3 id="-moz-user-select" name="-moz-user-select">{{CSSxRef("-moz-user-select")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-all</code></li> + <li><code>-moz-none</code></li> +</ul> +</div> + +<h3 id="width_min-width_and_max-width" name="width_min-width_and_max-width">{{CSSxRef("width")}}, {{CSSxRef("min-width")}}, and {{CSSxRef("max-width")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li> +</ul> +</div> + +<h2 id="Псевдоелементи_та_псевдокласи">Псевдоелементи та псевдокласи</h2> + +<div class="index"> +<ul> + <li> + <h3 id="A_–_D">A – D</h3> + </li> + <li>{{CSSxRef("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{CSSxRef("::-moz-anonymous-positioned-block")}}</li> + <li>{{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef(":-moz-any-link")}} [Matches <code>:link</code> and <code>:visited</code>]</li> + <li>{{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef("::-moz-canvas")}}</li> + <li>{{CSSxRef("::-moz-color-swatch")}}</li> + <li>{{CSSxRef("::-moz-cell-content")}}</li> + <li>{{CSSxRef(":-moz-drag-over")}}</li> + <li> + <h3 id="F_–_I">F – I</h3> + </li> + <li>{{CSSxRef(":-moz-first-node")}}</li> + <li>{{CSSxRef("::-moz-focus-inner")}}</li> + <li>{{CSSxRef("::-moz-focus-outer")}}</li> + <li>{{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}</li> + <li>{{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}</li> + <li>{{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}</li> + <li>{{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}</li> + <li>{{CSSxRef("::-moz-inline-table")}}</li> + <li> + <h3 id="L">L</h3> + </li> + <li>{{CSSxRef(":-moz-last-node")}}</li> + <li>{{CSSxRef(":-moz-list-bullet")}}</li> + <li>{{CSSxRef(":-moz-list-number")}}</li> + <li>{{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li> + <h3 id="N_–_R">N – R</h3> + </li> + <li>{{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}</li> + <li>{{CSSxRef(":-moz-only-whitespace")}}</li> + <li>{{CSSxRef("::-moz-page")}}</li> + <li>{{CSSxRef("::-moz-page-sequence")}}</li> + <li>{{CSSxRef("::-moz-pagebreak")}}</li> + <li>{{CSSxRef("::-moz-pagecontent")}}</li> + <li>{{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}</li> + <li>{{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}</li> + <li>{{CSSxRef("::-moz-progress-bar")}}</li> + <li>{{CSSxRef("::-moz-range-progress")}}</li> + <li>{{CSSxRef("::-moz-range-thumb")}}</li> + <li>{{CSSxRef("::-moz-range-track")}}</li> + <li>{{CSSxRef(":-moz-read-only")}}</li> + <li>{{CSSxRef(":-moz-read-write")}}</li> + <li> + <h3 id="S">S</h3> + </li> + <li>{{CSSxRef("::-moz-scrolled-canvas")}}</li> + <li>{{CSSxRef("::-moz-scrolled-content")}}</li> + <li>{{CSSxRef("::-moz-scrolled-page-sequence")}}</li> + <li>{{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}</li> + <li>{{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef("::-moz-svg-foreign-content")}}</li> + <li> + <h3 id="T">T</h3> + </li> + <li>{{CSSxRef("::-moz-table")}}</li> + <li>{{CSSxRef("::-moz-table-cell")}}</li> + <li>{{CSSxRef("::-moz-table-column")}}</li> + <li>{{CSSxRef("::-moz-table-column-group")}}</li> + <li>{{CSSxRef("::-moz-table-outer")}}</li> + <li>{{CSSxRef("::-moz-table-row")}}</li> + <li>{{CSSxRef("::-moz-table-row-group")}}</li> + <li>{{CSSxRef(":-moz-tree-cell")}}</li> + <li>{{CSSxRef(":-moz-tree-cell-text")}}</li> + <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-tree-checkbox")}}</li> + <li>{{CSSxRef(":-moz-tree-column")}}</li> + <li>{{CSSxRef(":-moz-tree-drop-feedback")}}</li> + <li>{{CSSxRef(":-moz-tree-image")}}</li> + <li>{{CSSxRef(":-moz-tree-indentation")}}</li> + <li>{{CSSxRef(":-moz-tree-line")}}</li> + <li>{{CSSxRef(":-moz-tree-progressmeter")}}</li> + <li>{{CSSxRef(":-moz-tree-row")}}</li> + <li>{{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-tree-separator")}}</li> + <li>{{CSSxRef(":-moz-tree-twisty")}}</li> + <li> + <h3 id="U_–_X">U – X</h3> + </li> + <li>{{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef("::-moz-viewport")}}</li> + <li>{{CSSxRef("::-moz-viewport-scroll")}}</li> + <li>{{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef("::-moz-xul-anonymous-block")}}</li> +</ul> +</div> + +<h2 id="At-правила">At-правила</h2> + +<div class="index"> +<ul> + <li>{{CSSxRef("@-moz-document")}}</li> +</ul> +</div> + +<h2 id="Компоненти_медіа_запитів">Компоненти медіа запитів</h2> + +<div class="index"> +<ul> + <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}</li> + <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}</li> + <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}</li> +</ul> +</div> + +<h2 id="Інше">Інше</h2> + +<div class="index"> +<ul> + <li>{{CSSxRef("-moz-alt-content")}} (дивіться {{Bug(11011)}})</li> +</ul> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Gecko/Chrome/CSS"><span style="white-space: nowrap;">Довідник CSS тільки для Chrome</span></a></li> + <li><a href="/en-US/docs/Web/CSS/Microsoft_Extensions">CSS-розширення для Microsoft</a></li> + <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">CSS-розширення для WebKit</a></li> +</ul> diff --git a/files/uk/web/css/order/index.html b/files/uk/web/css/order/index.html new file mode 100644 index 0000000000..147009e8f1 --- /dev/null +++ b/files/uk/web/css/order/index.html @@ -0,0 +1,170 @@ +--- +title: order +slug: Web/CSS/order +tags: + - CSS + - CSS Flexible Boxes + - Порядок +translation_of: Web/CSS/order +--- +<div>{{CSSRef}}</div> + +<h2 id="Загальний_огляд">Загальний огляд</h2> + +<p><a href="/en-US/docs/Web/CSS">CSS</a> параметр <strong><code>order</code></strong> визначає порядок розташування flex елементів відносно їхнього батьківського flex контейнера. Елементи розташовуються у порядку зростання значення order. Елементи з однаковим значенням параметра <code>order</code> розташовуються в такому порядку, в якому вони розташовані в основному коді.</p> + +<div class="note"> +<p><strong>Примітка</strong>: параметр <code>order</code> лише впливає на <strong>візуальний порядок</strong> елементів і не впливає на їх логічний порядок або порядок табуляції. <code><strong>order</strong></code> не повинен використовуватися на невізуальних носіях, таких як голосові читалки.</p> +</div> + +<p>{{cssinfo}}</p> + +<p>Дивіться <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Використання CSS flexible boxes</a> для більш детальної інформації, а також опису інших параметрів.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush:css">/* Числові значення включаючи від'ємні числа */ +order: 5; +order: -5; + +/* Глобальні значення */ +order: inherit; +order: initial; +order: unset; +</pre> + +<h3 id="Значення">Значення</h3> + +<dl> + <dt><code><integer></code></dt> + <dd>Відображає порядковий номер групи, до якої flex елемент був присвоєний.</dd> +</dl> + +<h3 id="Офіційний_синтаксис">Офіційний синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклади">Приклади</h2> + +<p>Тут є базовий уривок HTML:</p> + +<pre class="brush:html;"><!DOCTYPE html> +<header>...</header> +<div id='main'> + <article>Article</article> + <nav>Nav</nav> + <aside>Aside</aside> +</div> +<footer>...</footer></pre> + +<p>Наступний CSS код повинен створити класичний шаблон з двома бічними панелями, які оточують блок з контентом. Flexible Box Layout Module автоматично створює блоки з однаковими вертикальними розмірами і буде займати стільки горизонтального простору, скільки буде доступно.</p> + +<pre class="brush:css;">#main { display: flex; text-align:center; } +#main > article { flex:1; order: 2; } +#main > nav { width: 200px; order: 1; } +#main > aside { width: 200px; order: 3; }</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}</p> + +<h2 id="sect1"> </h2> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Початкове визначення</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особливість</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}<br> + 29</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td> + <td> + <p>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br> + 11</p> + </td> + <td>12.10</td> + <td>7 {{property_prefix("-webkit")}}<br> + 9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особливість</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>7 {{property_prefix("-webkit")}}<br> + 9</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Щоб активувати підтримку Flexbox для Firefox 18 або 19, користувач повинен змінити about:config preference <code>layout.css.flexbox.enabled</code> на <code>true</code>. Багаторядкові flexible boxes підтримуються з Firefox 28.</p> + +<p>Firefox на даний час неправильно змінює порядок табуляції елементів. Дивитися {{bug("812687")}}.</p> + +<p>[2] На додаток до підтримки без префікса, Gecko 48.0 {{geckoRelease("48.0")}} добавила підтримку для <code>-webkit</code> префіксної версії даного параметра, for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<p>[3] В Internet Explorer 10, flexible контейнер декларуєтсья з використанням префікса '-ms' <code>display:-ms-flexbox,</code> а не <code>display:flex</code>. Даний параметр реалізований під нестандартним іменем <code>-ms-flex-order</code>.</p> + +<h2 id="Дивитися_також">Дивитися також</h2> + +<ul> + <li><a href="/docs/Web/Guide/CSS/Flexible_boxes">Використання CSS flexible boxes</a></li> +</ul> diff --git a/files/uk/web/css/position/index.html b/files/uk/web/css/position/index.html new file mode 100644 index 0000000000..7a31f56b89 --- /dev/null +++ b/files/uk/web/css/position/index.html @@ -0,0 +1,461 @@ +--- +title: position +slug: Web/CSS/position +tags: + - CSS + - CSS-властивість + - Розміщення +translation_of: Web/CSS/position +--- +<div>{{CSSRef}}</div> + +<p><a href="/uk/docs/CSS">CSS</a>-властивість <strong><code>position</code></strong> вказує, як елемент розміщено в документі. А властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, та {{Cssxref("left")}} визначають остаточне положення елемента.</p> + +<pre class="brush: css no-line-numbers">/* Keyword values */ +position: static; +position: relative; +position: absolute; +position: fixed; +position: sticky; + +/* Global values */ +position: inherit; +position: initial; +position: unset; +</pre> + +<div id="position"> +<div class="hidden"> +<pre class="brush: html"><div id="container"> + <div class="box"><strong>static</strong></div> + <div class="box relative"><strong>relative</strong><br/><br/>top: 30px;<br/>right: 20px;</div> + <div class="box sticky"><strong>sticky</strong><br/><br/>top: 20px;</div> + <div class="box fixed"><strong>fixed</strong><br/><br/>left: 280px;</div> + + <div class="text"> + <p>Try scrolling this example to see the effect of + <strong><code>fixed</code></strong> or + <strong><code>sticky</code></strong> positioning.</p> + <p>With <strong><code>fixed</code></strong> positioning, the + element does not move as the viewport scrolls.</p> + <p>With <strong><code>sticky</code></strong> positioning, the + element moves until it reaches a threshold: + in this case 20 pixels from the top of the container.</p> + <p>The other two boxes show the effect of + <strong><code>static</code></strong> and + <strong><code>relative</code></strong> positioning.</p> + </div> +</div> +</pre> +</div> + +<div class="hidden"> +<pre class="brush: css">#container { + border: 5px solid #F4F7F8; + width: 100%; + height: 300px; + display: flex; + overflow: scroll; + box-sizing: border-box; +} + +.box { + height: 80px; + margin: 5px; + padding: 5px; + margin-top: 100px; + background-color: yellow; + border: 2px solid red; + color: red; + font-family: monospace; +} + +.text { + max-width: 120px; + padding: 0 0.5em 0 120px; + font-family: sans-serif; +} + + +.relative { + position: relative; + top: 30px; + right: 20px; +} + +.sticky { + position: sticky; + top: 20px; +} + +.fixed { + position: fixed; + left: 280px; +} +</pre> +</div> +{{EmbedLiveSample("position", 1200, 300, "", "", "example-outcome-frame")}}</div> + +<p>{{cssinfo}}</p> + +<h3 id="Види_розміщення">Види розміщення</h3> + +<ul> + <li><strong>Розміщеним елементом</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>relative</code>, <code>absolute</code>, <code>fixed</code>, або <code>sticky</code>. Інакше кажучи, все окрім <code>static</code>.</li> + <li>Елементом з <strong>відносним розміщенням </strong>називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code style="font-size: 14px;">relative</code>. Властивості {{Cssxref("top")}} і {{Cssxref("bottom")}} вказують доземний (вертикальний) зсув від початкового положення; натомість властивості {{Cssxref("left")}} і {{Cssxref("right")}} визначають поземний (горизонтальний) зсув.</li> + <li>Елементом з <strong>абсолютним розміщенням</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>absolute</code> або <code>fixed</code>. Властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}} та {{Cssxref("left")}} вказують зсуви від країв блока, що містить елемент (себто той блок є батьківським і відносно нього здійснюється розміщення елемента). Якщо елемент має {{cssxref("margin", "відступи")}}, то вони додаються до зсувів.</li> + <li>Елементом з <strong>«липким» розміщенням</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>sticky</code>. До певної межі (поки блок, всередині якого той елемент розташовано, не перетинає зазначеного порогового значення) це працює так само, як відносне розміщення, а тоді — як нерухоме (fixed).</li> +</ul> + +<p><span style="line-height: 1.5;">Most of the time, absolutely positioned elements that have</span><span style="line-height: 1.5;"> {{Cssxref("height")}} and {{Cssxref("width")}} set to <code>auto</code> are sized so as to fit their contents. However, non-replaced absolutely positioned elements can be made to fill the available vertical space by specifying </span><span style="line-height: 1.5;">both {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxref("height")}} unspecified (that is, </span><code style="font-size: 14px;">auto</code><span style="line-height: 1.5;">). They can likewise be made to fill the available horizontal space by specifying </span><span style="line-height: 1.5;">both {{Cssxref("left")}} and {{Cssxref("right")}} and leaving {{Cssxref("width")}} as <code>auto</code>.</span></p> + +<p>Except for the case just described of absolutely positioned elements filling the available space:</p> + +<ul> + <li>If both <code>top</code> and <code>bottom</code> are specified (technically, not <code>auto</code>), <code>top</code> wins.</li> + <li>If both <code>left</code> and <code>right</code> are specified, <code>left</code> wins when {{Cssxref("direction")}} is <code>ltr</code> (English, horizontal Japanese, etc.) and <code>right</code> wins when {{Cssxref("direction")}} is <code>rtl</code> (Persian, Arabic, Hebrew, etc.).</li> +</ul> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Значення властивості <code>position</code> може бути одним із ключових слів, що їх перелік наведено нижче.</p> + +<h3 id="Значення">Значення</h3> + +<dl> + <dt><code>static</code></dt> + <dd>The element is positioned according to the normal flow of the document. The {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} properties have <em>no effect</em>. This is the default value.</dd> + <dt><code>relative</code></dt> + <dd>The element is positioned according to the normal flow of the document, and then offset <em>relative to itself</em> based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were <code>static</code>. This value creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. The effect of <code>relative</code> on <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, and <code>table-caption</code> elements is undefined.</dd> + <dt><code>absolute</code></dt> + <dd>The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. This value creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.</dd> + <dt><span style="font-family: courier new,andale mono,monospace; font-weight: inherit; line-height: normal;">fixed</span></dt> + <dd>The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled. Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. This value always creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. When an ancestor has the <code>transform</code> property set to something other than <code>none</code>, that ancestor is used as the container instead of the viewport (see <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>). In printed documents, the element is placed in the same position on <em>every page</em>.</dd> +</dl> + +<dl> + <dt><code style="font-size: 14px;">sticky</code> {{experimental_inline}}</dt> + <dd>The element is positioned according to the normal flow of the document, and then offset relative to <em>its flow root and containing block</em> based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements. This value always creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. The effect of <code style="font-size: 14px;">sticky</code> on table-related elements is the same as <code style="font-size: 14px;">relative</code>. Note that sticky, by specification, will not work inside element with overflow: hidden or auto. (ref: <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>)</dd> +</dl> + +<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Relative_positioning" name="Relative_positioning">Відносне розміщення</h3> + +<p>Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="box" id="one">One</div> +<div class="box" id="two">Two</div> +<div class="box" id="three">Three</div> +<div class="box" id="four">Four</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.box { + display: inline-block; + width: 100px; + height: 100px; + background: red; + color: white; +} + +#two { + position: relative; + top: 20px; + left: 20px; + background: blue; +} +</pre> + +<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p> + +<h3 id="Absolute_positioning" name="Absolute_positioning">Абсолютне розміщення</h3> + +<p>Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its <em>nearest positioned ancestor</em> (i.e., the nearest ancestor that is not <code>static</code>). If a positioned ancestor doesn't exist, the initial container is used. In the example below, box "Two" has no positioned ancestor, so it is positioned relative to the the <code><body></code> of the document.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="box" id="one">One</div> +<div class="box" id="two">Two</div> +<div class="box" id="three">Three</div> +<div class="box" id="four">Four</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.box { + display: inline-block; + width: 100px; + height: 100px; + background: red; + color: white; +} + +#two { + position: absolute; + top: 20px; + left: 20px; + background: blue; +}</pre> + +<p>{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}</p> + +<h3 id="Fixed_positioning" name="Fixed_positioning">Нерухоме розміщення</h3> + +<p>Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the <em>viewport</em>. This can be used to create a floating element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><div class="outer"> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + </p> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + </p> + <div class="box" id="one">One</div> +</div> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.box { + width: 100px; + height: 100px; + background: red; + color: white; +} + +#one { + position: fixed; + top: 80px; + left: 10px; + background: blue; +} + +.outer { + width: 500px; + height: 300px; + overflow: scroll; + padding-left: 150px; +} +</pre> + +<p>{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}</p> + +<h3 id="Sticky_positioning" name="Sticky_positioning">«Липке» розміщення</h3> + +<p>Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed. For instance...</p> + +<pre class="brush: css">#one { position: sticky; top: 10px; }</pre> + +<p>...would position the element with id <em>one</em> relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.</p> + +<div>A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.</div> + +<div> </div> + +<div>You must specify a threshold with at least one of <span style="line-height: 1.5;"><code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.</span></div> + +<div> </div> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><dl> + <div> + <dt>A</dt> + <dd>Andrew W.K.</dd> + <dd>Apparat</dd> + <dd>Arcade Fire</dd> + <dd>At The Drive-In</dd> + <dd>Aziz Ansari</dd> + </div> + <div> + <dt>C</dt> + <dd>Chromeo</dd> + <dd>Common</dd> + <dd>Converge</dd> + <dd>Crystal Castles</dd> + <dd>Cursive</dd> + </div> + <div> + <dt>E</dt> + <dd>Explosions In The Sky</dd> + </div> + <div> + <dt>T</dt> + <dd>Ted Leo &amp; The Pharmacists</dd> + <dd>T-Pain</dd> + <dd>Thrice</dd> + <dd>TV On The Radio</dd> + <dd>Two Gallants</dd> + </div> +</dl> +</pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css">* { + box-sizing: border-box; +} + +dl > div { + background: #FFF; + padding: 24px 0 0 0; +} + +dt { + background: #B8C1C8; + border-bottom: 1px solid #989EA4; + border-top: 1px solid #717D85; + color: #FFF; + font: bold 18px/21px Helvetica, Arial, sans-serif; + margin: 0; + padding: 2px 0 0 12px; + position: -webkit-sticky; + position: sticky; + top: -1px; +} + +dd { + font: bold 20px/45px Helvetica, Arial, sans-serif; + margin: 0; + padding: 0 0 0 12px; + white-space: nowrap; +} + +dd + dd { + border-top: 1px solid #CCC; +} +</pre> + +<p>{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}</p> + +<ul> +</ul> + +<h2 id="Specifications" name="Specifications">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td> + <td>{{Spec2('CSS3 Positioning')}}</td> + <td>Adds <code>sticky</code> property value.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Підтримка веб-переглядачами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0) [1]</td> + <td>4.0 [3]</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>fixed </code>value</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0) [4]</td> + <td>7.0</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>sticky</code> value</td> + <td>{{CompatChrome(56)}}</td> + <td>{{CompatUnknown}} [5]</td> + <td>32 (32.0) [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>6.1 {{ property_prefix("-webkit-") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0) [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.0 {{ property_prefix("-webkit-") }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Since Firefox 30, Gecko allows {{HTMLElement("tr")}}, {{HTMLElement("thead")}}, and {{HTMLElement("tfoot")}} elements with a <code>position: relative;</code> style to act as absolute positioning containers. This means that a <code>position: absolute;</code> styled element inside the table can be positioned relative to these elements. In other browsers and in older versions of Firefox, setting <code>position: relative;</code> on a table row or row group has no effect. Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing a warning to the JavaScript console if you use this feature: Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.</p> + +<p>[2] In Firefox 26 to Firefox 31 (inclusive), sticky positioning only works when the <code>about:config</code> preference <code>layout.css.sticky.enabled</code> is set to <code>true</code>. From Firefox 27 to 31, <code>true</code> is the default value for Nightly and Aurora versions of the browser. The preference has been removed in Firefox 48.</p> + +<p>[3] In Internet Explorer, fixed positioning doesn't work if the document is in <a href="http://msdn.microsoft.com/en-us/library/ie/ms531140(v=vs.85).aspx" title="position Property - MSDN">quirks mode</a>.</p> + +<p>[4] Prior to Firefox 44, <code>position: fixed</code> didn't create a stacking context in most cases. The specification, and Gecko implementation, have been modified to mimic Chrome and Safari's long-time behavior.</p> + +<p>[5] Sticky positioning is <a href="https://dev.modern.ie/platform/status/positionsticky/">in preview</a> for Edge.</p> diff --git a/files/uk/web/css/resize/index.html b/files/uk/web/css/resize/index.html new file mode 100644 index 0000000000..de5246e7ba --- /dev/null +++ b/files/uk/web/css/resize/index.html @@ -0,0 +1,212 @@ +--- +title: resize +slug: Web/CSS/resize +tags: + - CSS + - CSS Властивість + - Зміна розміру + - Розмір +translation_of: Web/CSS/resize +--- +<div>{{CSSRef}}</div> + +<h2 id="Зведення">Зведення</h2> + +<p>The <strong><code>resize</code></strong> CSS property lets you control the resizability of an element.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: css">/* Keyword values */ +resize: none; +resize: both; +resize: horizontal; +resize: vertical; +resize: block; +resize: inline; + +/* Global values */ +resize: inherit; +resize: initial; +resize: unset; +</pre> + +<h3 id="Значення">Значення</h3> + +<dl> + <dt><code>none</code></dt> + <dd>The element offers no user-controllable method for resizing the element.</dd> + <dt><code>both</code></dt> + <dd>The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.</dd> + <dt><code>horizontal</code></dt> + <dd>The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.</dd> + <dt><code>vertical</code></dt> + <dd>The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.</dd> + <dt><code>block</code> {{experimental_inline}}</dt> + <dd>Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.</dd> + <dt><code>inline</code> {{experimental_inline}}</dt> + <dd>Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.</dd> +</dl> + +<div class="note"><strong>Note:</strong> <code>resize</code> does not apply to blocks for which the {{cssxref("overflow")}} property is set to <code>visible</code>.</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Disabling_resizability_of_textareas">Disabling resizability of textareas</h3> + +<h4 id="CSS">CSS</h4> + +<p>By default, {{HTMLElement("textarea")}} elements are resizable in {{gecko("2.0")}} (Firefox 4). You may override this behavior with the CSS shown below:</p> + +<pre class="brush: css">textarea.example { + resize: none; /* disables resizability */ +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><textarea class="example">Type some text here.</textarea></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}</p> + +<h3 id="Using_resize_with_arbitrary_elements">Using resize with arbitrary elements</h3> + +<p>You can use the resize property to make any element resizable. In the example below, a resizable {{HTMLElement("div")}} box contains a resizable paragraph ({{HTMLElement("p")}} element):</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.resizable { + resize: both; + overflow: scroll; + border: 1px solid black; +} + +div { + height: 300px; + width: 300px; +} + +p { + height: 200px; + width: 200px; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="resizable"> + <p class="resizable"> + This paragraph is resizable, because the CSS resize property is set to 'both' on this + element. + </p> +</div> +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#resize', 'resize')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Adds the values <code>block</code> and <code>inline</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support (on {{HTMLElement("textarea")}})</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("2.0")}}{{property_prefix("-moz")}}</td> + <td>{{CompatNo}}</td> + <td>12.1</td> + <td>3.0 (522)</td> + </tr> + <tr> + <td>On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is <code>visible</code>)</td> + <td>4.0</td> + <td>{{CompatGeckoDesktop("5.0")}}[1]</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support (on {{HTMLElement("textarea")}})</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is <code>visible</code>)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>resize</code> doesn't have any effect on {{HTMLElement("iframe")}} (cf. {{bug(680823)}})</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/uk/web/css/z-index/index.html b/files/uk/web/css/z-index/index.html new file mode 100644 index 0000000000..364b1044a2 --- /dev/null +++ b/files/uk/web/css/z-index/index.html @@ -0,0 +1,134 @@ +--- +title: z-index +slug: Web/CSS/z-index +translation_of: Web/CSS/z-index +--- +<div>{{CSSRef}}</div> + +<p>CSS властивість <strong><code>z-index</code></strong> встановлює порядок осі Z <a href="/en-US/docs/Web/CSS/position">спозицйонованого</a> елементу, його нащадків або елементів з властивістю flex. Елементи з більшим z-index перекривають такі, в яких ця величина менша.</p> + +<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div> + +<p class="hidden">Вихідний код цього інтерактивного прикладу знаходиться в репозиторії GitHub. Якщо бажаєш зробити внесок до проекту інтерактивних прикладів, склонуй <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та вишли нам pull request.</p> + +<p>В спозицйонованому елементі (такому, в якому властивість <code>position</code> є будь-якою окрім <code>static</code>) властивість <code>z-index</code> вказує:</p> + +<ol> + <li>Рівень накладання елемента в поточному <a href="/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">контексті накладання</a>.</li> + <li>Чи створює цей елемент локальний контекст накладання.</li> +</ol> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush:css no-line-numbers">/* Властивість, зазначена ключовим словом */ +z-index: auto; + +/* Цифрові значення <integer> */ +z-index: 0; +z-index: 3; +z-index: 289; +z-index: -1; /* Цифри менше нуля зменьшують приорітет */ + +/* Глобальні значення */ +z-index: inherit; +z-index: initial; +z-index: unset; +</pre> + +<p>Властивість <code>z-index</code> вказується або ключовим словом <code><a href="#auto">auto</a></code> або цифрою <code><a href="#<integer>"><integer></a></code>.</p> + +<h3 id="Вартості">Вартості</h3> + +<dl> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>Контейнер не визначає нового локального контексту накладання. Рівень накладання створеного контейнеру в поточному контексті накладання є такий самий як і батьківський.</dd> + <dt><a id="<integer>" name="<integer>"><code><integer></code></a></dt> + <dd>{{cssxref("<integer>")}} вказує рівень накладання створеного контейнеру в поточному контексті накладання. Контейнер також створює локальний контекст накладання в якому його рівень накладання дорівнює <code>0</code>. Це означає що вартість z-index елементів-нащадків не порівнюється з z-index елементів поза цим елементем.</dd> +</dl> + +<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> + +<pre class="syntaxbox">auto <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> {{cssxref("<integer>")}}</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="dashed-box">Коробка з пунктиром + <span class="gold-box">Золота коробка</span> + <span class="green-box">Зелена коробка</span> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[3,11,19]">.dashed-box { + position: relative; + z-index: 1; + border: dashed; + height: 8em; + margin-bottom: 1em; + margin-top: 2em; +} +.gold-box { + position: absolute; + z-index: 3; /* розташуй .gold-box над .green-box та .dashed-box */ + background: gold; + width: 80%; + left: 60px; + top: 3em; +} +.green-box { + position: absolute; + z-index: 2; /* розташуй .green-box над .dashed-box */ + background: lightgreen; + width: 20%; + left: 65%; + top: -25px; + height: 7em; + opacity: 0.9; +} +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'поводження анімації z-index')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Означає <code>z-index</code> як такий, який можна анімувати.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Початкове визначення</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Браузерна_сумісність">Браузерна сумісність</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена за допомогою структурованих даних. Якщо хочеш зробити свій внесок до цих даних, звернися до сторінки <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і вишли нам pull request.</div> + +<p>{{Compat("css.properties.z-index")}}</p> + +<h2 id="Дивись_також">Дивись також</h2> + +<ul> + <li>Властивість CSS {{Cssxref("position")}}</li> + <li><a href="/en-US/docs/CSS/Understanding_z-index">Зрозуміти CSS z-index</a></li> +</ul> diff --git a/files/uk/web/css/альтернативні_таблиці_стилів/index.html b/files/uk/web/css/альтернативні_таблиці_стилів/index.html new file mode 100644 index 0000000000..1dd1b5a510 --- /dev/null +++ b/files/uk/web/css/альтернативні_таблиці_стилів/index.html @@ -0,0 +1,80 @@ +--- +title: Альтернативні таблиці стилів +slug: Web/CSS/Альтернативні_таблиці_стилів +tags: + - Стилі + - Теми +translation_of: Web/CSS/Alternative_style_sheets +--- +<p>Specifying <strong>alternative style sheets</strong> in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.</p> + +<p>Firefox lets the user select the stylesheet using the View > Page Style submenu, Internet Explorer also supports this feature (beginning with IE 8), also accessed from View > Page Style (at least as of IE 11), but Chrome requires an extension to use the feature (as of version 48). The web page can also provide its own user interface to let the user switch styles.</p> + +<h2 id="An_example_specifying_the_alternative_stylesheets">An example: specifying the alternative stylesheets</h2> + +<p>The alternate stylesheets are commonly specified using a {{HTMLElement("link")}} element with <code>rel="stylesheet alternate"</code> and <code>title="..."</code> attributes, for example:</p> + +<pre class="eval"><link href="reset.css" rel="stylesheet" type="text/css"> + +<link href="default.css" rel="stylesheet" type="text/css" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic"> +</pre> + +<p>In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the Page Style submenu, with the Default Style pre-selected. When the user selects a different style, the page will immediately be re-rendered using that style sheet.</p> + +<p>No matter what style is selected, the rules from the reset.css stylesheet will always be applied.</p> + +<h3 id="Try_it_out">Try it out</h3> + +<p><a href="/samples/cssref/altstyles/index.html">Click here</a> for a working example you can try out.</p> + +<h2 id="Details">Details</h2> + +<p>Any stylesheet in a document falls into one of the following categories:</p> + +<ul> + <li><strong>Persistent</strong> (no <code>rel="alternate"</code>, no <code>title=""</code>): always applies to the document.</li> + <li><strong>Preferred</strong> (no <code>rel="alternate"</code>, with <code>title="..."</code> specified): applied by default, but {{domxref("StyleSheet.disabled", "disabled", "", 1)}} if an alternate stylesheet is selected. <strong>There can only be one preferred stylesheet</strong>, so providing stylesheets with different title attributes will cause some of them to be ignored. See <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">Correctly Using Titles With External Stylesheets</a> for a more detailed discussion.</li> + <li><strong>Alternate</strong> (<code>rel="stylesheet alternate"</code>, <code>title="..."</code> must be specified): disabled by default, can be selected.</li> +</ul> + +<p>When style sheets are referenced with a <code>title</code> attribute on the {{HTMLElement("link", "<link rel=\"stylesheet\">")}} or {{HTMLElement("style")}} element, the title becomes one of the choices offered to the user. Style sheets linked with the same <code>title</code> are part of the same choice. Style sheets linked without a <code>title</code> attribute are always applied.</p> + +<p>Use <code>rel="stylesheet"</code> to link to the default style, and <code>rel="alternate stylesheet"</code> to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>The CSS OM specification defines the concepts of the <strong>style sheet set name</strong>, its <strong>disabled flag</strong>, and the <strong>preferred CSS style sheet set name</strong>.<br> + It defines how these are determined, and lets the HTML specification define the HTML-specific behaviors by requiring it to define when to <strong><dfn>create a CSS style sheet</dfn></strong>.</td> + </tr> + <tr> + <td> + <p>{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}<br> + {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}<br> + {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}</p> + </td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>The HTML specification defines when and how the <strong><dfn>create a CSS style sheet</dfn></strong><dfn> algorithm is invoked while handling <link> and <style> elements, and also defines the behavior of <code><meta </code></dfn><code>http-equiv="default-style"></code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>Earlier, the HTML specification itself defined the concept of preferred and alternate stylesheets.</td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/uk/web/css/довідник/index.html b/files/uk/web/css/довідник/index.html new file mode 100644 index 0000000000..ba325fe7da --- /dev/null +++ b/files/uk/web/css/довідник/index.html @@ -0,0 +1,188 @@ +--- +title: CSS довідник +slug: Web/CSS/Довідник +translation_of: Web/CSS/Reference +--- +<p><span class="seoSummary">This <em>CSS Reference</em> shows the basic syntax of a CSS rule; lists all standard <a href="/uk/docs/CSS">CSS</a> properties, <a href="/uk/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> and <a href="/uk/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/uk/docs/Web/CSS/At-rule">@-rules</a>, <a href="/uk/docs/Web/CSS/length">units</a>, and <a href="/uk/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>, all together in <a href="#Keyword_index">alphabetical order</a>, as well as just the <a href="#Selectors">selectors by type</a>; and allows you to quickly access detailed information for each of them. It not only lists the CSS 1 and CSS 2.1 properties, but also is a CSS3 reference that links to any <a href="/uk/docs/Web/CSS/CSS3">CSS3</a> property and concept standardized, or already stabilized. Also included is a brief <a href="#DOM_CSS">DOM-CSS / CSSOM reference</a>.</span></p> + +<p>Note that CSS rule-definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM, the rule-management system, is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p> + +<p>See also <a href="/uk/docs/Web/CSS/Reference/Mozilla_Extensions">Mozilla CSS Extensions</a> for Gecko-specific properties prefixed with <code>-moz</code>; and <a href="/uk/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Extensions</a> for WebKit-specific properties. See <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> by Peter Beverloo for all prefixed properties.</p> + +<h2 id="Basic_rule_syntax">Basic rule syntax</h2> + +<p>Be warned that any syntax error in a rule definition will invalidate the entire rule.</p> + +<h3 id="Style_rules">Style rules</h3> + +<pre class="syntaxbox"><strong><var>selectorlist</var> { <var>property</var>: <var>value</var>;</strong> <var>[more property:value; pairs]</var> <strong>}</strong> + +...where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var> + +See <a href="#Selectors"><em>selector</em></a>, <a href="#pelm"><em>pseudo-element</em></a>, <a href="#pcls"><em>pseudo-class</em></a> lists below. +</pre> + +<h4 id="Examples">Examples</h4> + +<pre class="brush: css">strong { color: red;} +div.menu-bar li:hover > ul { display: block; } +</pre> + +<p>More about examples: <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors">#1</a>, <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Action_Using_selectors_based_on_relationships_and_pseudo-classes">#2</a></p> + +<h3 id="rules">@rules</h3> + +<p>As these have so many different structure-formats, see the desired <a href="/uk/docs/Web/CSS/At-rule">At-rule</a> for syntax.</p> + +<h2 id="Keyword_index">Keyword index</h2> + +<div>{{CSS_Ref}}</div> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Selectors">Selectors</h2> + +<ul> + <li>Basic Selectors + <ul> + <li><a href="/uk/docs/Web/CSS/Type_selectors">Type selectors</a><code> elementname</code></li> + <li><a href="/uk/docs/Web/CSS/Class_selectors">Class selectors</a> <code>.classname</code></li> + <li><a href="/uk/docs/Web/CSS/ID_selectors">ID selectors</a> <code>#idname</code></li> + <li><a href="/uk/docs/Web/CSS/Universal_selectors">Universal selectors</a><code> * ns|* *|*</code></li> + <li><a href="/uk/docs/Web/CSS/Attribute_selectors">Attribute selectors</a><code> [attr=value]</code></li> + </ul> + </li> + <li>Combinators <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships">(more info)</a> + <ul> + <li><a href="/uk/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a> <code>A + B</code></li> + <li><a href="/uk/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a> <code>A ~ B</code></li> + <li><a href="/uk/docs/Web/CSS/Child_selectors">Child selectors</a> <code>A > B</code></li> + <li><a href="/uk/docs/Web/CSS/Descendant_selectors">Descendant selectors</a> <code>A B</code></li> + </ul> + </li> + <li id="pelm">Pseudo-elements <a href="/uk/docs/Web/CSS/Pseudo-elements">(more info)</a> + <ul> + <li>{{ Cssxref("::after") }}</li> + <li>{{ Cssxref("::before") }}</li> + <li>{{ Cssxref("::first-letter") }}</li> + <li>{{ Cssxref("::first-line") }}</li> + <li>{{ Cssxref("::selection") }}</li> + <li>{{ Cssxref("::backdrop") }}</li> + <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li> + </ul> + </li> + <li id="pcls">Standard pseudo-classes <a href="/uk/docs/Web/CSS/Pseudo-classes">(more info)</a> + <div class="index"> + <ul> + <li>{{ Cssxref(":active") }}</li> + <li>{{ cssxref(':any')}}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":default") }}</li> + <li>{{ Cssxref(":dir", ":dir()")}}</li> + <li>{{ Cssxref(":disabled") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":first") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":fullscreen") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":indeterminate") }}</li> + <li>{{ Cssxref(":in-range") }}</li> + <li>{{ Cssxref(":invalid") }}</li> + <li>{{ Cssxref(":lang", ":lang()") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":left") }}</li> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":not", ":not()") }}</li> + <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li> + <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li> + <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li> + <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li> + <li>{{ Cssxref(":only-child") }}</li> + <li>{{ Cssxref(":only-of-type") }}</li> + <li>{{ Cssxref(":optional") }}</li> + <li>{{ Cssxref(":out-of-range") }}</li> + <li>{{ Cssxref(":read-only") }}</li> + <li>{{ Cssxref(":read-write") }}</li> + <li>{{ Cssxref(":required") }}</li> + <li>{{ Cssxref(":right") }}</li> + <li>{{ Cssxref(":root") }}</li> + <li>{{ Cssxref(":scope") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":valid") }}</li> + <li>{{ Cssxref(":visited") }}</li> + </ul> + </div> + </li> +</ul> + +<p>A complete <a href="https://www.w3.org/TR/selectors/#selectors">list of selectors</a> in the Selectors Level 3 specification.</p> + +<h2 id="CSS3_Tutorials">CSS3 Tutorials</h2> + +<p>These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:</p> + +<ul> + <li><a href="/uk/docs/Web/Guide/CSS/Media_queries">Using CSS media queries</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Counters">Using CSS counters</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_gradients">Using CSS gradients</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_transforms">Using CSS transforms</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_animations">Using CSS animations</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Using_multiple_backgrounds">Using CSS multiple backgrounds</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li> +</ul> + +<h2 id="Concepts">Concepts</h2> + +<ul> + <li><a href="/uk/docs/Web/CSS/Syntax">CSS syntax</a></li> + <li><a href="/uk/docs/Web/CSS/At-rule">At-rule</a></li> + <li><a href="/uk/docs/Web/CSS/Comments">Comments</a></li> + <li><a href="/uk/docs/Web/CSS/Specificity">Specificity</a></li> + <li><a href="/uk/docs/Web/CSS/initial_value">Initial value</a></li> + <li><a href="/uk/docs/Web/CSS/inheritance">Inheritance</a></li> + <li><a href="/uk/docs/Web/CSS/specified_value">Specified value</a></li> + <li><a href="/uk/docs/Web/CSS/computed_value">Computed value</a></li> + <li><a href="/uk/docs/Web/CSS/used_value">Used value</a></li> + <li><a href="/uk/docs/Web/CSS/actual_value">Actual value</a></li> + <li><a href="/uk/docs/Web/CSS/resolved_value">Resolved value</a></li> + <li><a href="/uk/docs/Web/CSS/box_model">Box model</a></li> + <li><a href="/uk/docs/Web/CSS/Replaced_element">Replaced element</a></li> + <li><a href="/uk/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li> + <li><a href="/uk/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li> + <li><a href="/uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li> + <li><a href="/uk/docs/Web/CSS/Layout_mode">Layout mode</a></li> +</ul> + +<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> + +<p>Major object types:</p> + +<ul> + <li>document . <a href="/uk/docs/Web/API/Document/styleSheets">styleSheets</a></li> + <li>styleSheets[x] . <a href="/uk/docs/Web/API/CSSRuleList">cssRules</a></li> + <li>cssRules[x] . <a href="/uk/docs/Web/API/CSSRule/cssText">cssText</a> (selector & style)</li> + <li>cssRules[x] . <a href="/uk/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li> + <li>elem . <a href="/uk/docs/Web/API/HTMLElement/style">style</a></li> + <li>elem . style . <a href="/uk/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li> + <li>elem . <a href="/uk/docs/Web/API/Element/className">className</a></li> + <li>elem . <a href="/uk/docs/Web/API/Element/classList">classList</a></li> +</ul> + +<p>Important methods:</p> + +<ul> + <li>{{domxref("CSSStyleSheet.insertRule")}}</li> + <li>{{domxref("CSSStyleSheet.deleteRule")}}</li> +</ul> +</div> +</div> diff --git a/files/uk/web/css/коробчаста_модель_css/index.html b/files/uk/web/css/коробчаста_модель_css/index.html new file mode 100644 index 0000000000..4920b7ceb9 --- /dev/null +++ b/files/uk/web/css/коробчаста_модель_css/index.html @@ -0,0 +1,161 @@ +--- +title: Коробчаста модель CSS +slug: Web/CSS/Коробчаста_модель_CSS +tags: + - CSS + - Довідка + - Коробчаста модель CSS +translation_of: Web/CSS/CSS_Box_Model +--- +<div><strong>Коробчаста модель</strong> (box model) — це алгоритм CSS, що подає елементи (включно з їх {{cssxref("margin", "відступами")}} та {{cssxref("padding", "полями")}}) у вигляді прямокутних «коробок» та компонує їх відповідно до {{cssxref("Visual_formatting_model", "моделі візуального формування")}}.</div> + +<h2 id="Довідка">Довідка</h2> + +<h3 id="Властивості">Властивості</h3> + +<h4 id="Властивості_що_визначають_потік_(flow)_вмісту">Властивості, що визначають потік (flow) вмісту</h4> + +<div class="index"> +<ul> + <li>{{cssxref("box-decoration-break")}}</li> + <li>{{cssxref("box-sizing")}}</li> + <li>{{cssxref("overflow")}}</li> + <li>{{cssxref("overflow-x")}}</li> + <li>{{cssxref("overflow-y")}}</li> +</ul> +</div> + +<h4 id="Властивості_що_визначають_розміри">Властивості, що визначають розміри</h4> + +<div class="index"> +<ul> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("width")}}</li> + <li>{{cssxref("max-height")}}</li> + <li>{{cssxref("max-width")}}</li> + <li>{{cssxref("min-height")}}</li> + <li>{{cssxref("min-width")}}</li> +</ul> +</div> + +<h4 id="Властивості_що_визначають_відступи">Властивості, що визначають відступи</h4> + +<div class="index"> +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-top")}}</li> +</ul> +</div> + +<h4 id="Властивості_що_визначають_поля">Властивості, що визначають поля</h4> + +<div class="index"> +<ul> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-top")}}</li> +</ul> +</div> + +<h4 id="Інші_властивості">Інші властивості</h4> + +<div class="index"> +<ul> + <li>{{cssxref("visibility")}}</li> +</ul> +</div> + +<h2 id="Посібники">Посібники</h2> + +<dl> + <dt><a href="/uk/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Вступ до коробчастої моделі CSS</a></dt> + <dd>Описує та пояснює одне з ґрунтовних понять в CSS — коробчасту модель. Ця модель визначає, як CSS розташовує елементи, їх вміст, {{cssxref("padding", "поля")}}, {{cssxref("border", "обрамок")}} та {{cssxref("margin", "відступи")}}.</dd> + <dt><a href="/uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Згортання відступів</a></dt> + <dd>Два прилеглі відступи інколи згортаються в один. Ця стаття наводить правила, за якими це відбувається, та пояснює, як цим керувати.</dd> + <dt><a href="/uk/docs/Web/CSS/Visual_formatting_model">Модель візуального формування</a></dt> + <dd>Описує та пояснює модель візуального формування.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box")}}</td> + <td>{{Spec2("CSS3 Box")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Первинне визначення</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/uk/web/css/модель_візуального_формування/index.html b/files/uk/web/css/модель_візуального_формування/index.html new file mode 100644 index 0000000000..fb25e2d60a --- /dev/null +++ b/files/uk/web/css/модель_візуального_формування/index.html @@ -0,0 +1,225 @@ +--- +title: Модель візуального формування +slug: Web/CSS/Модель_візуального_формування +tags: + - CSS + - NeedsUpdate + - Коробчаста модель CSS +translation_of: Web/CSS/Visual_formatting_model +--- +<p class="summary"><em>Модель візуального форматування</em> (visual formatting model) у CSS являє собою алгоритм, що обробляє документ та подає його на візуальному носії. Ця модель є основним поняттям CSS.</p> + +<p>Кожен елемент в документі зазнає перетворення згідно з моделлю візуального формування і породжує нуль (жодного), один або кілька прямокутників відповідно до {{cssxref("CSS_Box_Model/Introduction_to_the_CSS_box_model", "коробчастої моделі")}} CSS. Компонування кожного такого прямокутника визначається низкою чинників:</p> + +<ul> + <li>Розміри прямокутника: точно зазначені, обмежені, або ні;</li> + <li>Тип компонування: рядковий (inline), рядкового рівня (inline-level), неподільний рядкового рівня чи блоковий;</li> + <li>Схема розміщення: в нормальному потоці (flow), {{cssxref("float", "рухомий")}}, чи абсолютно розміщений;</li> + <li>Решта елементів у дереві: нащадки та сусідські елементи;</li> + <li>Розмір {{glossary("viewport", "вікна")}} та розміщення в ньому;</li> + <li>Справжні (первинні) розміри зображень, що їх містять елементи;</li> + <li>Інша інформація ззовні.</li> +</ul> + +<p>Відповідно до моделі, прямокутник розміщується й малюється відносно краю блока, всередині якого він міститься. Зазвичай прямокутник утворює такий блок для своїх нащадків. Втім, розмір прямокутника не обмежено розмірами блока, що його містить; коли компонування прямокутника передбачає вихід за межі блока, це зветься {{cssxref("overflow", "переповненням")}}.</p> + +<h2 id="Утворення_прямокутників">Утворення прямокутників</h2> + +<p>Генерація блоків, це частина візуального форматування CSS, що створює прямокутники з елементів документу. Сгенеровані блоки є різних типів, що вплиає на те, як виконується візуальне формування. Тип згенерованого блоку залежить від значення CSS {{ cssxref("display") }}.</p> + +<h3 id="Block-level_elements_and_block_boxes">Block-level elements and block boxes</h3> + +<p>Елемент називається <em>блочним</em>, коли його вираховане значення {{ cssxref("display") }} CSS property is: <code>block</code>, <code>list-item</code>, or <code>table</code>. Елемент рівня блоку візуально форматується, як блок (наприклад абзац), приздачений для вертикальної компановки.</p> + +<p>Each block-level box participates in a <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block formatting context</a>. Each block-level element generates at least one block-level box, called the <em>principal block-level</em><em> box</em>. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.</p> + +<p>The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">positioning scheme</a>.</p> + +<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">A block-level box may also be a block container box. A <em>block container box</em> is a box that contains only other block-level boxes, or creates an <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">inline formatting context</a>, thus containing only inline boxes.</p> + +<p>It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.</p> + +<p>Block-level boxes that also are block container boxes are called <em>block boxes</em>.</p> + +<h4 id="Anonymous_block_boxes">Anonymous block boxes</h4> + +<p>In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called <em>anonymous boxes</em>.</p> + +<p>Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the <code>inherit</code> value, and all non-inheritable CSS properties, have the <code>initial</code> value.</p> + +<p>Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.</p> + +<h3 id="Example">Example</h3> + +<p>If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have <code>display:block</code> :</p> + +<pre class="syntaxbox"><code><div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div></code></pre> + +<p>Two anonymous block boxes are created: one for the text before the paragraph (<code>Some inline text</code>), and another for the text after it (<code>followed by more inline text</code>). This builds the following block structure:</p> + +<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p> + +<p>Leading to:</p> + +<pre>Some inline text +followed by a paragraph +followed by more inline text. +</pre> + +<p>Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the <code>initial</code> value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the<code> initial</code> value for that property, and thus the background of the <code><div></code> is visible. A specific background color can be applied to the <code><p></code> box. Similarly, the two anonymous boxes always use the same color for their text.</p> + +<p>Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an <em>anonymous block box</em>, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.</p> + +<p>If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.</p> + +<h3 id="Example_2">Example</h3> + +<p>If we take the following HTML code, with {{ HTMLElement("p") }} have <code>display:inline</code> and {{ HTMLElement("span") }} have <code>display:block</code> :</p> + +<pre class="syntaxbox"><code><p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p></code></pre> + +<p>Two anonymous block boxes are created, one for the text before the span Element (<code>Some <em>inline</em> text</code>) and one for the text after it (<code>followed by more inline text</code>), which gives the following block structure:</p> + +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> + +<p>Which leads to:</p> + +<pre>Some inline text +followed by a paragraph +followed by more inline text. +</pre> + +<h3 id="Inline-level_elements_and_inline_boxes">Inline-level elements and inline boxes</h3> + +<p>An element is said to be <em>inline-level</em> when the calculated value of its {{ cssxref("display") }} CSS property is: <code>inline</code>, <code>inline-block</code> or <code>inline-table</code>. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.</p> + +<p><img alt="venn_inlines.png" class="internal lwrap" src="/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p> + +<div class="warning"> +<p>This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2</p> +</div> + +<p>Inline-level elements generate <em>inline-level boxes</em> that are defined as boxes participating to an <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">inline formatting context</a>. <em>Inline boxes</em> are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with <code>display:inline</code>. Inline-level boxes, whose contents do not participate in an inline formatting context, are called <em>atomic inline-level boxes</em>. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of <code>inline-block</code> or <code>inline-table</code>, are never split into several boxes, as is possible with inline boxes.</p> + +<div class="note"><strong>Note:</strong> Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are <strong>not</strong> inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.</div> + +<div class="note">Atomic inline boxes cannot be split into several lines in an inline formatting context. +<div style=""> +<pre><style> + span { + display:inline; /* default value*/ + } +</style> +<div style="width:20em;"> + The text in the span <span>can be split in several + lines as it</span> is an inline box. +</div> +</pre> + +<p>which leads to:</p> + +<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div> + +<pre><style> + span { + display:inline-block; + } +</style> +<div style="width:20em;"> + The text in the span <span>cannot be split in several + lines as it</span> is an inline-block box. +</div> +</pre> + +<p>which leads to:</p> + +<div style="width: 20em;">The text in the span <span style="display: inline-block;">cannot be split into several lines as it</span> is an inline-block box.</div> +</div> +</div> + +<h4 id="Anonymous_inline_boxes">Anonymous inline boxes</h4> + +<p>As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to <code>initial</code> for all others.</p> + +<p>The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.</p> + +<div class="note">Example TBD</div> + +<h3 id="Other_types_of_boxes">Other types of boxes</h3> + +<h4 id="Line_boxes">Line boxes</h4> + +<p><em>Line boxes</em> are generated by the <a href="/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">inline formatting context</a> to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are <a href="/en-US/docs/CSS/float" title="float">floats</a>, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.</p> + +<p>These boxes are technical, and Web authors do not usually have to bother with them.</p> + +<h4 id="Run-in_boxes">Run-in boxes</h4> + +<p><em>Run-in boxes</em>, defined using <code>display:run-in</code>, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.</p> + +<div class="note"><strong>Note:</strong> Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered <em>experimental</em>. They should not be used in production.</div> + +<h4 class="note" id="Model-induced_boxes">Model-induced boxes</h4> + +<p>Besides the inline and block formatting contexts, CSS specifies several additional <em>content models</em> that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:</p> + +<ul> + <li>The <a href="/en-US/docs/CSS/table-layout" title="table-layout">table content model</a> may create a <em>table wrapper box</em> and a <em>table box</em>, but also specific boxes like <em>caption boxes</em>.</li> + <li>The <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">multi-column content model</a> may create <em>column boxes</em> between the container box and the content<em>.</em></li> + <li>The experimental grid, or flex-box content models, also create additional types of boxes.</li> +</ul> + +<h4 id="Positioning_schemes">Positioning schemes</h4> + +<p>Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:</p> + +<ul> + <li>The <em>normal flow</em> - positions each box one after the other.</li> + <li>The <em>floats</em> algorithm - extracts the box from the normal flow and put it to the side of the containing box.</li> + <li>The <em>absolute positioning</em> scheme - positions a box within an absolute coordinate system that is established by its containing element. An absolutely positioned element can cover other elements.</li> +</ul> + +<h3 id="Normal_flow">Normal flow</h3> + +<p>In the <em>normal flow</em>, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value <code>static</code> or <code>relative</code>, and if the CSS {{ cssxref("float") }} is set to the value <code>none</code>.</p> + +<h3 id="Example_3">Example</h3> + +<div class="note">When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:<br> +<br> +[image]<br> +<br> +When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:<br> +<br> +[image]</div> + +<p class="note">There are two sub-cases of the normal flow: static positioning and relative positioning:</p> + +<ul> + <li class="note">In <em>static positioning</em>, triggered by the value <code>static</code> of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.<br> + [image]</li> + <li class="note">In <em>relative</em><em> positioning</em>, triggered by the value <code>relative</code> of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</li> +</ul> + +<h3 id="Floats">Floats</h3> + +<p>In the <em>float positioning scheme</em>, specific boxes (called <em>floating boxes</em> or simply <em>floats)</em> are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.</p> + +<p>The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than <code>none</code> and {{ cssxref("position") }} to <code>static</code> or <code>relative</code>. If {{ cssxref("float") }} is set to <code>left</code>, the float is positioned at the beginning of the line box. If set to <code>right</code>, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.</p> + +<p>[image]</p> + +<h3 id="Absolute_positioning">Absolute positioning</h3> + +<p>In the <em>absolute positioning scheme</em>, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">containing block</a> using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</p> + +<p>An element is absolutely positioned if the {{ cssxref("position") }} is set to <code>absolute</code> or <code>fixed</code>.</p> + +<p>With a <em>fixed positioned element</em>, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/uk/web/css/розмітка_кулінарна-книга/index.html b/files/uk/web/css/розмітка_кулінарна-книга/index.html new file mode 100644 index 0000000000..e6d7f61135 --- /dev/null +++ b/files/uk/web/css/розмітка_кулінарна-книга/index.html @@ -0,0 +1,80 @@ +--- +title: Кулінарна книга з CSS розмітки +slug: Web/CSS/Розмітка_кулінарна-книга +translation_of: Web/CSS/Layout_cookbook +--- +<div>{{CSSRef}}</div> + +<p class="summary">The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are new to CSS layout then you might first like to take a look at our <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout learning module</a>, as this will give you the basic grounding you need to make use of the recipes here.</p> +</div> + +<h2 id="The_Recipes">The Recipes</h2> + +<table class="standard-table" style="height: 543px; width: 1188px;"> + <thead> + <tr> + <th scope="col">Recipe</th> + <th scope="col">Description</th> + <th scope="col">Layout Methods</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media objects</a></td> + <td>A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td> + <td>When to choose multi-column layout, flexbox or grid for your columns.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td> + <td>How to center an item horizontally and vertically.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td> + <td>Creating a footer which sits at the bottom of the container or viewport when the content is shorter. </td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split navigation</a></td> + <td>A navigation pattern where some links are visually separated from the others.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb navigation</a></td> + <td>Creating a list of links to allow the visitor to navigate back up through the page hierarchy.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges">List group with badges</a></td> + <td>A list of items with a badge to display a count.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td> + <td>Links to pages of content (such as search results).</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Card</a></td> + <td>A card component, which displays in a grid of cards.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Grid wrapper</a></td> + <td>For aligning grid content within a central wrapper, while also allowing items to break out.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a></td> + </tr> + </tbody> +</table> + +<h2 id="Contribute_a_Recipe">Contribute a Recipe</h2> + +<p>As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">See this page</a> for a template and guidelines for writing your own example.</p> diff --git a/files/uk/web/css/схема_компонування/index.html b/files/uk/web/css/схема_компонування/index.html new file mode 100644 index 0000000000..5794b4c397 --- /dev/null +++ b/files/uk/web/css/схема_компонування/index.html @@ -0,0 +1,30 @@ +--- +title: Схема компонування +slug: Web/CSS/Схема_компонування +tags: + - CSS + - Компонування + - Розмітка + - Розташування +translation_of: Web/CSS/Layout_mode +--- +<div><strong>Схема компонування</strong> (layout mode) в <a href="/en-US/docs/Web/CSS">CSS</a> являє собою алгоритм, який визначає розташування та розміри елементів залежно від того, як вони взаємодіють із сусідніми та батьківськими елементами. Існує декілька таких схем:</div> + +<ul> + <li><em>Блокове компонування</em> (block), призначене для розмітки документів. Ця схема має відповідні засоби, як-от можливість зробити елементи <em><a href="/uk/docs/Web/CSS/float">рухомими</a></em> (плаваючими) або скомпонувати їх в <em><a href="/uk/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">кілька стовпчиків</a></em>.</li> + <li><em>Рядкове компонування</em> (inline), призначене насамперед для розмітки тексту.</li> + <li><em>Табличне компонування</em>, призначене для розмітки таблицею.</li> + <li><em><a href="/uk/docs/Web/CSS/position#Види_розташування">Компонування розміщенням</a></em> (positioned), призначене для застосування до елементів, що не надто взаємодіють з іншими.</li> + <li><em><a href="/uk/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Компонування flexbox</a></em>, призначене для створення складної розмітки сторінок, які можна плавно масштабувати.</li> + <li><em><a href="/uk/docs/Web/CSS/CSS_Grid_Layout">Компонування сіткою</a></em>, призначене для розташування елементів відносно нерухомої сітки. {{experimental_inline}}</li> +</ul> + +<div class="note"> +<p><strong>Зауваження:</strong> Не всі <a href="/en-US/docs/Web/CSS/Reference">властивості CSS</a> застосовні до всіх <em>схем компонування</em>. Більшість із них вживаються разом з однією-двома схемами і жодним чином не діють, якщо відповідний елемент компонується за іншою схемою.</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{CSS_key_concepts}}</li> +</ul> |