From 1a449b7f3a6253df423b4f44d4ae41a4ffb09e16 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Tue, 16 Jan 2024 15:00:02 +0200 Subject: [PATCH 1/5] translation(CSS): web/css/css_functions --- files/uk/web/css/css_functions/index.md | 336 ++++++++++++++++++++++++ 1 file changed, 336 insertions(+) create mode 100644 files/uk/web/css/css_functions/index.md diff --git a/files/uk/web/css/css_functions/index.md b/files/uk/web/css/css_functions/index.md new file mode 100644 index 0000000000..e80ee344cb --- /dev/null +++ b/files/uk/web/css/css_functions/index.md @@ -0,0 +1,336 @@ +--- +title: Функції значень CSS +slug: Web/CSS/CSS_Functions +page-type: guide +--- + +{{CSSRef}} + +**Функції значень CSS** – це інструкції, що закликають особливу обробку даних або обчислення, щоб повернути [значення](/uk/docs/Web/CSS/CSS_Values_and_Units) [CSS](/uk/docs/Web/CSS) для властивості CSS. Функції значень CSS представляють складніші [типи даних](/uk/docs/Web/CSS/CSS_Types), і вони можуть приймати якісь вихідні аргументи, щоб обчислювати на основі них повернене значення. + +## Синтаксис + +```css +selector { + property: function([argument]? [, argument]!); +} +``` + +Синтаксис значення починається з **назви функції**, після якої ставиться ліва дужка `(`. Далі йдуть аргументи, а завершується функція правою дужкою `)`. + +Функції можуть приймати кілька аргументів, котрі форматуються подібно до значень властивостей CSS. Пробіли дозволені, але вони необов'язкові всередині дужок. У деяких функційних записах різні аргументи розділяються комами, а інші використовують пробіли. + +> **Примітка:** Функції значень CSS вживаються як значення властивостей, і їх не слід плутати з псевдокласами. [Функційні псевдокласи](/uk/docs/Web/CSS/Pseudo-classes#funktsiini-psevdoklasy), [лінгвістичні псевдокласи](/uk/docs/Web/CSS/Pseudo-classes#linhvistychni-psevdoklasy) та декілька [деревно-структурних псевдокласів](/uk/docs/Web/CSS/Pseudo-classes#derevno-strukturni-psevdoklasy) вимагають значень параметрів, але не є функціями значень. [Умовні директиви](/uk/docs/Web/CSS/At-rule#umovni-hrupovi-dyrektyvy) також не є функціями значень; дужки використовуються для групувань. + +## Функції перетворень + +[Тип даних](/uk/docs/Web/CSS/CSS_Types) CSS {{CSSxRef("<transform-function>")}} представляє перетворення вигляду. Він використовується як значення властивості {{CSSxRef("transform")}}. + +### Функції перекладу + +- {{CSSxRef("transform-function/translateX", "translateX()")}} + - : Перекладає елемент по горизонталі. +- {{CSSxRef("transform-function/translateY", "translateY()")}} + - : Перекладає елемент по вертикалі. +- {{CSSxRef("transform-function/translateZ", "translateZ()")}} + - : Перекладає елемент по аплікаті. +- {{CSSxRef("transform-function/translate", "translate()")}} + - : Перекладає елемент на двовимірній площині. +- {{CSSxRef("transform-function/translate3d", "translate3d()")}} + - : Перекладає елемент у тривимірному просторі. + +### Функції обертання + +- {{CSSxRef("transform-function/rotateX", "rotateX()")}} + - : Обертає елемент навколо горизонтальної осі. +- {{CSSxRef("transform-function/rotateY", "rotateY()")}} + - : Обертає елемент навколо вертикальної осі. +- {{CSSxRef("transform-function/rotateZ", "rotateZ()")}} + - : Обертає елемент навколо аплікати. +- {{CSSxRef("transform-function/rotate", "rotate()")}} + - : Обертає елемент навколо фіксованої точки на двовимірній площині. +- {{CSSxRef("transform-function/rotate3d", "rotate3d()")}} + - : Обертає елемент навколо фіксованої осі в тривимірному просторі. + +### Функції масштабування + +- {{CSSxRef("transform-function/scaleX", "scaleX()")}} + - : Масштабує елемент по горизонталі. +- {{CSSxRef("transform-function/scaleY", "scaleY()")}} + - : Масштабує елемент по вертикалі. +- {{CSSxRef("transform-function/scaleZ", "scaleZ()")}} + - : Масштабує елемент по аплікаті. +- {{CSSxRef("transform-function/scale", "scale()")}} + - : Масштабує елемент на двовимірній площині. +- {{CSSxRef("transform-function/scale3d", "scale3d()")}} + - : Масштабує елемент у тривимірному просторі. + +### Функції нахиляння + +- {{CSSxRef("transform-function/skewX", "skewX()")}} + - : Нахиляє елемент у горизонтальному напрямку. +- {{CSSxRef("transform-function/skewY", "skewY()")}} + - : Нахиляє елемент у вертикальному напрямку. +- {{CSSxRef("transform-function/skew", "skew()")}} + - : Нахиляє елемент на двовимірній площині. + +### Матричні функції + +- {{CSSxRef("transform-function/matrix", "matrix()")}} + - : Описує однорідну матрицю двовимірного перетворення. +- {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} + - : Описує тривимірне перетворення як однорідну матрицю 4×4. + +### Функції перспективи + +- {{CSSxRef("transform-function/perspective", "perspective()")}} + - : Задає віддаль між користувачем і площиною z=0. + +## Математичні функції + +Математичні функції дають змогу записувати числові значення у вигляді математичних виразів. + +Кожна зі сторінок нижче містить докладну інформацію про синтаксис математичної функції, дані про сумісність з браузерами, приклади та інше. Для загального знайомства з математичними функціями CSS дивіться [Використання математичних функцій CSS](/uk/docs/Web/CSS/CSS_Functions/Using_CSS_math_functions). + +### Базова арифметика + +- {{CSSxRef("calc", "calc()")}} + - : Виконує базові арифметичні обчислення над числовими значеннями. + +### Функції порівняння + +- {{CSSxRef("min", "min()")}} + - : Обчислює найменше зі списку значень. +- {{CSSxRef("max", "max()")}} + - : Обчислює найбільше зі списку значень. +- {{CSSxRef("clamp", "clamp()")}} + - : Обчислює центральне значення між мінімальним, центральним та максимальним значеннями. + +### Функції крокових значень + +- {{CSSxRef("round", "round()")}} + - : Обчислює округлене число на основі певної стратегії округлення. +- {{CSSxRef("mod", "mod()")}} + - : Calculates a modulus (with the same sign as the divisor) when dividing one number by another. + - : Обчислює остачу (з тим самим знаком, що й у дільника) при діленні одного числа на інше. +- {{CSSxRef("rem", "rem()")}} + - : Обчислює остачу (з тим самим знаком, що й у діленого) при діленні одного числа на інше. + +### Тригонометричні функції + +- {{CSSxRef("sin", "sin()")}} + - : Обчислює тригонометричний синус числа. +- {{CSSxRef("cos", "cos()")}} + - : Обчислює тригонометричний косинус числа. +- {{CSSxRef("tan", "tan()")}} + - : Обчислює тригонометричний тангенс числа. +- {{CSSxRef("asin", "asin()")}} + - : Обчислює тригонометричний арксинус числа. +- {{CSSxRef("acos", "acos()")}} + - : Обчислює тригонометричний арккосинус числа. +- {{CSSxRef("atan", "atan()")}} + - : Обчислює тригонометричний арктангенс числа. +- {{CSSxRef("atan2", "atan2()")}} + - : Обчислює тригонометричний арктангенс двох чисел на площині. + +### Експоненційні функції + +- {{CSSxRef("pow", "pow()")}} + - : Обчислює основу, піднесену до степеня числа. +- {{CSSxRef("sqrt", "sqrt()")}} + - : Обчислює квадратний корінь числа. +- {{CSSxRef("hypot", "hypot()")}} + - : Обчислює квадратний корінь суми квадратів своїх аргументів. +- {{CSSxRef("log", "log()")}} + - : Обчислює логарифм числа. +- {{CSSxRef("exp", "exp()")}} + - : Обчислює `e`, піднесене до степеня числа. + +### Знакові функції + +- {{CSSxRef("abs", "abs()")}} + - : Обчислює модуль числа. +- {{CSSxRef("sign", "sign()")}} + - : Обчислює знак числа (додатний або від'ємний). + +## Функції фільтрування + +[Тип даних](/uk/docs/Web/CSS/CSS_Types) CSS {{CSSxRef("<filter-function>")}} представляє графічний ефект, що може змінювати вигляд вихідного зображення. Він використовується властивостями {{CSSxRef("filter")}} і {{CSSxRef("backdrop-filter")}}. + +- {{CSSxRef("filter-function/blur", "blur()")}} + - : Збільшує розмивання Гауса зображення. +- {{CSSxRef("filter-function/brightness", "brightness()")}} + - : Висвітлює або затемнює зображення. +- {{CSSxRef("filter-function/contrast", "contrast()")}} + - : Збільшує або зменшує контрастність зображення. +- {{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}} + - : Застосовує відкидання тіні за зображенням. +- {{CSSxRef("filter-function/grayscale", "grayscale()")}} + - : Перетворює зображення на чорно-біле. +- {{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}} + - : Змінює загальне забарвлення зображення. +- {{CSSxRef("filter-function/invert", "invert()")}} + - : Обертає кольори зображення. +- {{CSSxRef("filter-function/opacity", "opacity()")}} + - : Додає до зображення прозорість. +- {{CSSxRef("filter-function/saturate", "saturate()")}} + - : Змінює загальну насиченість зображення. +- {{CSSxRef("filter-function/sepia", "sepia()")}} + - : Збільшує сепію зображення. + +## Колірні функції + +[Тип даних](/uk/docs/Web/CSS/CSS_Types) CSS {{CSSxRef("color_value","<color>")}} визначає різні способи представлення кольорів. + +- {{CSSxRef("color_value/rgb", "rgb()")}} + - : Визначає даний колір за його складовими червоного, зеленого, синього та альфа-каналу (прозорості). +- {{CSSxRef("color_value/hsl", "hsl()")}} + - : Визначає даний колір за його складовими барви, насиченості, світлості та альфа-каналу (прозорості). +- {{CSSxRef("color_value/hwb", "hwb()")}} + - : Визначає даний колір за його складовими барви, білизни та чорноти. +- {{CSSxRef("color_value/lch", "lch()")}} + - : Визначає даний колір за його складовими світності, інтенсивності та барви. +- {{CSSxRef("color_value/oklch", "oklch()")}} + - : Визначає даний колір за його складовими світлості, інтенсивності, барви та альфа-каналу (прозорості). +- {{CSSxRef("color_value/lab", "lab()")}} + - : Визначає даний колір за його складовими світлості, відстані по осі A та відстані по осі B в колірному просторі LAB. +- {{CSSxRef("color_value/oklab", "oklab()")}} + - : Визначає даний колір за його складовими світлості, відстані по осі A та відстані по осі B в колірному просторі LAB, а також альфа-каналу (прозорості). +- {{CSSxRef("color_value/color", "color()")}} + - : Задає конкретний, визначений колірний простір замість неявного колірного простору sRGB. +- {{CSSxRef("color_value/color-mix", "color-mix()")}} + - : Змішує два колірні значення в заданому колірному просторі згідно з заданими кількостями. +- {{CSSxRef("color_value/color-contrast", "color-contrast()")}} {{Experimental_Inline}} + - : Вибирає найвищий колірний контраст серед списку кольорів, порівнюючи з базовим колірним значенням. +- {{CSSxRef("color_value/device-cmyk", "device-cmyk()")}} {{Experimental_Inline}} + - : Визначає кольори CMYK у незалежний від пристрою спосіб. +- {{CSSXref("color_value/light-dark", "light-dark()")}} {{Experimental_Inline}} + - : Повертає один з двох заданих кольорів на основі поточної колірної схеми. + +## Функції зображень + +[Тип даних](/uk/docs/Web/CSS/CSS_Types) CSS {{CSSxRef("<image>")}} надає графічне представлення зображень або градієнтів. + +### Функції градієнтів + +- {{CSSxRef("gradient/linear-gradient","linear-gradient()")}} + - : Лінійні градієнти плавно змінюють колір уздовж уявної лінії. +- {{CSSxRef("gradient/radial-gradient","radial-gradient()")}} + - : Радіальні градієнти плавно змінюють колір від центральної точки (початку). +- {{CSSxRef("gradient/conic-gradient", "conic-gradient()")}} + - : Конічні градієнти плавно змінюють колір по колу. +- {{CSSxRef("gradient/repeating-linear-gradient","repeating-linear-gradient()")}} + - : Схожа на `linear-gradient()` і приймає ті ж аргументи, але повторює кольорові зупинки нескінченно в усіх напрямках, щоб покрити весь свій контейнер. +- {{CSSxRef("gradient/repeating-radial-gradient","repeating-radial-gradient()")}} + - : Схожа на `radial-gradient()` і приймає ті ж аргументи, але повторює кольорові зупинки нескінченно в усіх напрямках, щоб покрити весь свій контейнер. +- {{CSSxRef("gradient/repeating-conic-gradient","repeating-conic-gradient()")}} + - : Схожа на `conic-gradient()` і приймає ті ж аргументи, але повторює кольорові зупинки нескінченно в усіх напрямках, щоб покрити весь свій контейнер. + +### Функції зображень + +- {{CSSxRef("image/image","image()")}} {{Experimental_Inline}} + - : Визначає {{CSSxRef("<image>")}} подібно до функції {{CSSxRef("url", "url()")}}, але з додатковими можливостями, серед яких задання напрямку письма в зображенні та запасних зображень, на випадок того, що головне зображення не підтримується. +- {{CSSxRef("image/image-set","image-set()")}} + - : Вибирає найвідповідніше зображення CSS із переданого набору, в основному для екранів з високою щільністю пікселів. +- {{CSSxRef("cross-fade", "cross-fade()")}} + - : Змішує два або більше зображень з визначеною прозорістю. +- {{CSSxRef("element", "element()")}} {{Experimental_Inline}} + - : Визначає значення {{CSSxRef("<image>")}}, породжене від довільного елемента HTML. +- {{CSSxRef("image/paint", "paint()")}} + - : Визначає значення {{CSSxRef("<image>")}}, породжене за допомогою PaintWorklet. + +## Функції лічильників + +Функції лічильників CSS загалом використовуються для властивості {{CSSxRef("content")}}, хоча в теорії їх можна використовувати всюди, де підтримується {{CSSxRef("<string>")}}. + +- {{CSSxRef("counter", "counter()")}} + - : Повертає рядок, що представляє поточне значення названого лічильника, якщо він є. +- {{CSSxRef("counters", "counters()")}} + - : Дає змогу користуватися вкладеними лічильниками, повертаючи сполучений рядок, що представляє поточні значення названих лічильників, якщо вони є. +- {{CSSxRef("symbols", "symbols()")}} + - : Визначає стилі лічильників в рядку, безпосередньо як значення властивості. + +## Функції фігур + +[Тип даних](/uk/docs/Web/CSS/CSS_Types) CSS {{CSSxRef("<basic-shape>")}} представляє графічну фігуру. Він використовується у властивостях {{CSSxRef("clip-path")}}, {{CSSxRef("offset-path")}} і {{CSSxRef("shape-outside")}}. + +- {{CSSxRef("basic-shape/circle","circle()")}} + - : Визначає коло. +- {{CSSxRef("basic-shape/ellipse","ellipse()")}} + - : Визначає еліпс. +- {{CSSxRef("basic-shape/inset","inset()")}} + - : Визначає вписаний прямокутник. +- {{CSSxRef("basic-shape/rect","rect()")}} {{Experimental_Inline}} + - : Визначає прямокутник за допомогою віддалей від верхнього та лівого країв опорної рамки. +- {{CSSxRef("basic-shape/xywh","xywh()")}} {{Experimental_Inline}} + - : Визначає прямокутник за допомогою заданих віддалей від верхнього та лівого країв опорної рамки, а також ширини та висоти прямокутника. +- {{CSSxRef("basic-shape/polygon","polygon()")}} + - : Визначає багатокутник. +- {{CSSxRef("path", "path()")}} + - : Приймає рядок шляху SVG, даючи змогу малювати фігуру. + +## Функції покликань + +Наступні функції використовуються як значення властивостей для покликань на значення, визначені в іншому місці. + +- {{CSSxRef("attr", "attr()")}} + - : Використовує атрибути, визначені на елементі HTML. +- {{CSSxRef("env", "env()")}} + - : Використовує значення, визначене користувацьким агентом як змінну середовища. +- {{CSSxRef("url", "url()")}} + - : Використовує файл за заданим URL. +- {{CSSxRef("var", "var()")}} + - : Використовує значення кастомної властивості замість будь-якої частини значення іншої властивості. + +## Функції сіток + +Наступні функції використовуються для визначення [Сітки CSS](/uk/docs/Web/CSS/CSS_grid_layout). + +- {{CSSxRef("fit-content", "fit-content()")}} + - : Обмежує переданий розмір доступним розміром згідно з формулою `min(максимальний розмір, max(мінімальний розмір, аргумент))`. +- {{CSSxRef("minmax", "minmax()")}} + - : Визначає діапазон розмірів, що більші або дорівнюють _min_ і менші або дорівнюють _max_. +- {{CSSxRef("repeat", "repeat()")}} + - : Представляє повторний фрагмент списку доріжок, даючи змогу використовувати велику кількість стовпців або рядків, що відповідають циклічному шаблону. + +## Функції шрифтів + +Функції шрифтів CSS використовуються вкупі зі властивістю {{CSSxRef("font-variant-alternates")}}, щоб керувати використанням альтернативних гліфів. + +- {{CSSxRef("font-variant-alternates#stylistic", "stylistic()")}} + - : Дає змогу використовувати стилістичні альтернативи для окремих символів. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенню OpenType `salt`, наприклад, `salt 2`. +- {{CSSxRef("font-variant-alternates#styleset", "styleset()")}} + - : Дає змогу використовувати стилістичні альтернативи для наборів символів. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенню OpenType `ssXY`, наприклад, `ss02`. +- {{CSSxRef("font-variant-alternates#character-variant", "character-variant()")}} + - : Дає змогу використовувати специфічні стилістичні альтернативи для символів. Подібна до `styleset()`, але не створює зв'язних гліфів для набору символів; окремі символи матимуть незалежні та не обов'язково зв'язні стилі. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенню OpenType `cvXY`, наприклад, `cv02`. +- {{CSSxRef("font-variant-alternates#swash", "swash()")}} + - : Дає змогу користуватися гліфами з [розчерками](https://en.wikipedia.org/wiki/Swash_%28typography%29). Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенням OpenType `swsh` та `cswh`, наприклад, `swsh 2` та `cswh 2`. +- {{CSSxRef("font-variant-alternates#ornaments", "ornaments()")}} + - : Дає змогу використовувати оздоби, такі як [флерони](https://en.wikipedia.org/wiki/Fleuron_%28typography%29) та інші гліфи-дингбати. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенню OpenType `ornm`, наприклад, `ornm 2`. +- {{CSSxRef("font-variant-alternates#annotation", "annotation()")}} + - : Дає змогу користуватися анотаціями, такими як цифри в колах або обернені символи. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенню OpenType `nalt`, наприклад, `nalt 2`. + +## Функції згладжування + +Наступні функції використовуються як значення властивостей переходу та анімації. + +- {{cssxref("easing-function#liniina-funktsiia-zhladzhuvannia", "linear()")}} + - : Функція згладжування, яка інтерполює лінійно між своїми точками. +- {{cssxref("easing-function#kubichna-funktsiia-zhladzhuvannia-bezie", "cubic-bezier()")}} + - : Функція згладжування, що визначає кубічну криву Безьє. +- {{cssxref("easing-function#krokova-funktsiia-zhladzhuvannia", "steps()")}} + - : Ітерація по вказаній кількості зупинок протягом переходу, відображаючи кожну зупинку протягом рівних проміжків часу. + +## Функції анімацій + +Наступні функції використовуються як значення різних властивостей {{cssxref("animation-timeline")}}. Дивіться подробиці про це у {{cssxref("animation-timeline")}}. + +- {{cssxref("animation-timeline/scroll", "scroll()")}} + - : Задає _анонімну часову шкалу прокрутки_ елемента як його {{cssxref("animation-timeline")}}. +- {{cssxref("animation-timeline/view", "view()")}} + - : Задає _анонімну часову шкалу перегляду_ елемента як його {{cssxref("animation-timeline")}}. + +## Дивіться також + +- [Значення та одиниці вимірювання CSS](/uk/docs/Web/CSS/CSS_Values_and_Units) +- [Знайомство з CSS – Значення та одиниці вимірювання](/uk/docs/Learn/CSS/Building_blocks/Values_and_units) From d4f42ba4c8634b61100381b27d45c257b0422112 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Tue, 16 Jan 2024 15:02:37 +0200 Subject: [PATCH 2/5] chore: uk_spelling_additions.txt --- uk_spelling_additions.txt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/uk_spelling_additions.txt b/uk_spelling_additions.txt index 995c0dbf7e..797fc084ce 100644 --- a/uk_spelling_additions.txt +++ b/uk_spelling_additions.txt @@ -82,6 +82,7 @@ гештаблиць гештаблицями гешу +гліфи-дингбати гравіс гравісами гравіси @@ -422,6 +423,7 @@ флексбоксу флексфактор флексфактору +флерони форматувальника форматувальники форматувальників From bc1d042a10601749ccf9791789f3a8279010af30 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Thu, 26 Dec 2024 19:54:29 +0200 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: Mykola Myslovskyi --- files/uk/web/css/css_functions/index.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/files/uk/web/css/css_functions/index.md b/files/uk/web/css/css_functions/index.md index e80ee344cb..2514564a5f 100644 --- a/files/uk/web/css/css_functions/index.md +++ b/files/uk/web/css/css_functions/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -**Функції значень CSS** – це інструкції, що закликають особливу обробку даних або обчислення, щоб повернути [значення](/uk/docs/Web/CSS/CSS_Values_and_Units) [CSS](/uk/docs/Web/CSS) для властивості CSS. Функції значень CSS представляють складніші [типи даних](/uk/docs/Web/CSS/CSS_Types), і вони можуть приймати якісь вихідні аргументи, щоб обчислювати на основі них повернене значення. +**Функції значень CSS** – це інструкції, що закликають особливу обробку даних або обчислення, щоб повернути [значення](/uk/docs/Web/CSS/CSS_Values_and_Units) [CSS](/uk/docs/Web/CSS) для властивості CSS. Функції значень CSS представляють складніші [типи даних](/uk/docs/Web/CSS/CSS_Types), і вони можуть приймати якісь вхідні аргументи, щоб обчислювати на основі них повернене значення. ## Синтаксис @@ -111,8 +111,7 @@ selector { - {{CSSxRef("round", "round()")}} - : Обчислює округлене число на основі певної стратегії округлення. - {{CSSxRef("mod", "mod()")}} - - : Calculates a modulus (with the same sign as the divisor) when dividing one number by another. - - : Обчислює остачу (з тим самим знаком, що й у дільника) при діленні одного числа на інше. + - : Обчислює модуль (остачу — з тим самим знаком, що й у дільника) при діленні одного числа на інше. - {{CSSxRef("rem", "rem()")}} - : Обчислює остачу (з тим самим знаком, що й у діленого) при діленні одного числа на інше. @@ -191,9 +190,9 @@ selector { - {{CSSxRef("color_value/lch", "lch()")}} - : Визначає даний колір за його складовими світності, інтенсивності та барви. - {{CSSxRef("color_value/oklch", "oklch()")}} - - : Визначає даний колір за його складовими світлості, інтенсивності, барви та альфа-каналу (прозорості). + - : Визначає даний колір за його складовими світності, інтенсивності, барви та альфа-каналу (прозорості). - {{CSSxRef("color_value/lab", "lab()")}} - - : Визначає даний колір за його складовими світлості, відстані по осі A та відстані по осі B в колірному просторі LAB. + - : Визначає даний колір за його складовими світності, відстаней по осях A та B в колірному просторі LAB. - {{CSSxRef("color_value/oklab", "oklab()")}} - : Визначає даний колір за його складовими світлості, відстані по осі A та відстані по осі B в колірному просторі LAB, а також альфа-каналу (прозорості). - {{CSSxRef("color_value/color", "color()")}} From 25f6f94f32e56eb79918716968d1bbb30c656328 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Thu, 26 Dec 2024 20:03:00 +0200 Subject: [PATCH 4/5] Apply suggestions from code review Co-authored-by: Mykola Myslovskyi --- files/uk/web/css/css_functions/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/uk/web/css/css_functions/index.md b/files/uk/web/css/css_functions/index.md index 2514564a5f..31f9138e63 100644 --- a/files/uk/web/css/css_functions/index.md +++ b/files/uk/web/css/css_functions/index.md @@ -194,7 +194,7 @@ selector { - {{CSSxRef("color_value/lab", "lab()")}} - : Визначає даний колір за його складовими світності, відстаней по осях A та B в колірному просторі LAB. - {{CSSxRef("color_value/oklab", "oklab()")}} - - : Визначає даний колір за його складовими світлості, відстані по осі A та відстані по осі B в колірному просторі LAB, а також альфа-каналу (прозорості). + - : Визначає даний колір за його складовими світності, відстаней по осях A та B в колірному просторі LAB, а також альфа-каналу (прозорості). - {{CSSxRef("color_value/color", "color()")}} - : Задає конкретний, визначений колірний простір замість неявного колірного простору sRGB. - {{CSSxRef("color_value/color-mix", "color-mix()")}} From 6042497d130f060daf93d20290756954cfec5d92 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Fri, 27 Dec 2024 12:54:47 +0200 Subject: [PATCH 5/5] update(CSS): web/css/css_functions --- files/uk/web/css/css_functions/index.md | 54 +++++++++++++++---------- uk_spelling_additions.txt | 7 +++- 2 files changed, 37 insertions(+), 24 deletions(-) diff --git a/files/uk/web/css/css_functions/index.md b/files/uk/web/css/css_functions/index.md index 31f9138e63..35ece9a393 100644 --- a/files/uk/web/css/css_functions/index.md +++ b/files/uk/web/css/css_functions/index.md @@ -20,7 +20,8 @@ selector { Функції можуть приймати кілька аргументів, котрі форматуються подібно до значень властивостей CSS. Пробіли дозволені, але вони необов'язкові всередині дужок. У деяких функційних записах різні аргументи розділяються комами, а інші використовують пробіли. -> **Примітка:** Функції значень CSS вживаються як значення властивостей, і їх не слід плутати з псевдокласами. [Функційні псевдокласи](/uk/docs/Web/CSS/Pseudo-classes#funktsiini-psevdoklasy), [лінгвістичні псевдокласи](/uk/docs/Web/CSS/Pseudo-classes#linhvistychni-psevdoklasy) та декілька [деревно-структурних псевдокласів](/uk/docs/Web/CSS/Pseudo-classes#derevno-strukturni-psevdoklasy) вимагають значень параметрів, але не є функціями значень. [Умовні директиви](/uk/docs/Web/CSS/At-rule#umovni-hrupovi-dyrektyvy) також не є функціями значень; дужки використовуються для групувань. +> [!NOTE] +> Функції значень CSS вживаються як значення властивостей, і їх не слід плутати з псевдокласами. [Функційні псевдокласи](/uk/docs/Web/CSS/Pseudo-classes#funktsiini-psevdoklasy), [лінгвістичні псевдокласи](/uk/docs/Web/CSS/Pseudo-classes#linhvistychni-psevdoklasy) та декілька [деревно-структурних псевдокласів](/uk/docs/Web/CSS/Pseudo-classes#derevno-strukturni-psevdoklasy) вимагають значень параметрів, але не є функціями значень. Умовні директиви також не є функціями значень; дужки використовуються для групувань. ## Функції перетворень @@ -199,11 +200,9 @@ selector { - : Задає конкретний, визначений колірний простір замість неявного колірного простору sRGB. - {{CSSxRef("color_value/color-mix", "color-mix()")}} - : Змішує два колірні значення в заданому колірному просторі згідно з заданими кількостями. -- {{CSSxRef("color_value/color-contrast", "color-contrast()")}} {{Experimental_Inline}} - - : Вибирає найвищий колірний контраст серед списку кольорів, порівнюючи з базовим колірним значенням. -- {{CSSxRef("color_value/device-cmyk", "device-cmyk()")}} {{Experimental_Inline}} - - : Визначає кольори CMYK у незалежний від пристрою спосіб. -- {{CSSXref("color_value/light-dark", "light-dark()")}} {{Experimental_Inline}} +- {{CSSxRef("color_value/device-cmyk", "device-cmyk()")}} + - : Визначає кольори CMYK у залежний від пристрою спосіб. +- {{CSSXref("color_value/light-dark", "light-dark()")}} - : Повертає один з двох заданих кольорів на основі поточної колірної схеми. ## Функції зображень @@ -227,13 +226,13 @@ selector { ### Функції зображень -- {{CSSxRef("image/image","image()")}} {{Experimental_Inline}} - - : Визначає {{CSSxRef("<image>")}} подібно до функції {{CSSxRef("url", "url()")}}, але з додатковими можливостями, серед яких задання напрямку письма в зображенні та запасних зображень, на випадок того, що головне зображення не підтримується. +- {{CSSxRef("image/image","image()")}} + - : Визначає {{CSSxRef("<image>")}} подібно до типу {{cssxref("url_value", "<url>")}}, але з додатковими можливостями, серед яких задання напрямку письма в зображенні та запасних зображень, на випадок того, що головне зображення не підтримується. - {{CSSxRef("image/image-set","image-set()")}} - : Вибирає найвідповідніше зображення CSS із переданого набору, в основному для екранів з високою щільністю пікселів. - {{CSSxRef("cross-fade", "cross-fade()")}} - : Змішує два або більше зображень з визначеною прозорістю. -- {{CSSxRef("element", "element()")}} {{Experimental_Inline}} +- {{CSSxRef("element", "element()")}} - : Визначає значення {{CSSxRef("<image>")}}, породжене від довільного елемента HTML. - {{CSSxRef("image/paint", "paint()")}} - : Визначає значення {{CSSxRef("<image>")}}, породжене за допомогою PaintWorklet. @@ -259,33 +258,35 @@ selector { - : Визначає еліпс. - {{CSSxRef("basic-shape/inset","inset()")}} - : Визначає вписаний прямокутник. -- {{CSSxRef("basic-shape/rect","rect()")}} {{Experimental_Inline}} +- {{CSSxRef("basic-shape/rect","rect()")}} - : Визначає прямокутник за допомогою віддалей від верхнього та лівого країв опорної рамки. -- {{CSSxRef("basic-shape/xywh","xywh()")}} {{Experimental_Inline}} +- {{CSSxRef("basic-shape/xywh","xywh()")}} - : Визначає прямокутник за допомогою заданих віддалей від верхнього та лівого країв опорної рамки, а також ширини та висоти прямокутника. - {{CSSxRef("basic-shape/polygon","polygon()")}} - : Визначає багатокутник. -- {{CSSxRef("path", "path()")}} +- {{CSSxRef("basic-shape/path", "path()")}} - : Приймає рядок шляху SVG, даючи змогу малювати фігуру. +- {{CSSxRef("basic-shape/shape", "shape()")}} + - : Приймає розділений комами список команд, що визначають фігуру для малювання. ## Функції покликань -Наступні функції використовуються як значення властивостей для покликань на значення, визначені в іншому місці. +Наступні функції використовуються як значення властивостей для покликань на значення, визначені в іншому місці: - {{CSSxRef("attr", "attr()")}} - : Використовує атрибути, визначені на елементі HTML. - {{CSSxRef("env", "env()")}} - : Використовує значення, визначене користувацьким агентом як змінну середовища. -- {{CSSxRef("url", "url()")}} +- {{cssxref("url_value", "<url>")}} - : Використовує файл за заданим URL. - {{CSSxRef("var", "var()")}} - : Використовує значення кастомної властивості замість будь-якої частини значення іншої властивості. ## Функції сіток -Наступні функції використовуються для визначення [Сітки CSS](/uk/docs/Web/CSS/CSS_grid_layout). +Наступні функції використовуються для визначення [Сітки CSS](/uk/docs/Web/CSS/CSS_grid_layout): -- {{CSSxRef("fit-content", "fit-content()")}} +- {{CSSxRef("fit-content_function", "fit-content()")}} - : Обмежує переданий розмір доступним розміром згідно з формулою `min(максимальний розмір, max(мінімальний розмір, аргумент))`. - {{CSSxRef("minmax", "minmax()")}} - : Визначає діапазон розмірів, що більші або дорівнюють _min_ і менші або дорівнюють _max_. @@ -311,25 +312,34 @@ selector { ## Функції згладжування -Наступні функції використовуються як значення властивостей переходу та анімації. +Наступні функції використовуються як значення властивостей переходу та анімації: -- {{cssxref("easing-function#liniina-funktsiia-zhladzhuvannia", "linear()")}} +- {{cssxref("easing-function/linear", "linear()")}} - : Функція згладжування, яка інтерполює лінійно між своїми точками. -- {{cssxref("easing-function#kubichna-funktsiia-zhladzhuvannia-bezie", "cubic-bezier()")}} +- {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}} - : Функція згладжування, що визначає кубічну криву Безьє. -- {{cssxref("easing-function#krokova-funktsiia-zhladzhuvannia", "steps()")}} +- {{cssxref("easing-function/steps", "steps()")}} - : Ітерація по вказаній кількості зупинок протягом переходу, відображаючи кожну зупинку протягом рівних проміжків часу. ## Функції анімацій -Наступні функції використовуються як значення різних властивостей {{cssxref("animation-timeline")}}. Дивіться подробиці про це у {{cssxref("animation-timeline")}}. +Наступні функції використовуються як значення різних властивостей {{CSSxRef("animation-timeline")}}: - {{cssxref("animation-timeline/scroll", "scroll()")}} - : Задає _анонімну часову шкалу прокрутки_ елемента як його {{cssxref("animation-timeline")}}. - {{cssxref("animation-timeline/view", "view()")}} - : Задає _анонімну часову шкалу перегляду_ елемента як його {{cssxref("animation-timeline")}}. +## Функції якірного позиціювання + +Функції якірного позиціювання застосовуються, коли якірно-позиційні елементи отримують позицію та розмір, відносні щодо місця розташування та розміру пов'язаних з ними якірних елементів. + +- {{cssxref("anchor", "anchor()")}} + - : Повертає довжину, відносну щодо місця розташування країв якірного елемента, пов'язаного з поточним якірно-позиційним елементом. +- {{cssxref("anchor-size", "anchor-size()")}} + - : Повертає довжину, відносну щодо розміру пов'язаного якірного елемента. + ## Дивіться також - [Значення та одиниці вимірювання CSS](/uk/docs/Web/CSS/CSS_Values_and_Units) -- [Знайомство з CSS – Значення та одиниці вимірювання](/uk/docs/Learn/CSS/Building_blocks/Values_and_units) +- [Навчання – Значення та одиниці вимірювання](/uk/docs/Learn_web_development/Core/Styling_basics/Values_and_units) diff --git a/uk_spelling_additions.txt b/uk_spelling_additions.txt index 5d20a24082..fc66fbc675 100644 --- a/uk_spelling_additions.txt +++ b/uk_spelling_additions.txt @@ -125,6 +125,7 @@ Деніколи деоптимізації деоптимізувати +деревно-структурних Деревно-структурні десеріалізації десеріалізований @@ -221,8 +222,8 @@ метатег метод-сетер мешап -міжсайтове міждокументних +міжсайтове міжсайтових міжсайтові міжсайтового @@ -416,8 +417,8 @@ підможливістю підпатерн підпатерном -підресурсами підпсевдоелементи +підресурсами підресурси підресурсів підресурсу @@ -593,6 +594,8 @@ юнікодні юнікодному юніттестування +якірно-позиційним +якірно-позиційні f-рядків Firefox-специфічна JSON-серіалізовним