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 000000000..35ece9a39 --- /dev/null +++ b/files/uk/web/css/css_functions/index.md @@ -0,0 +1,345 @@ +--- +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. Пробіли дозволені, але вони необов'язкові всередині дужок. У деяких функційних записах різні аргументи розділяються комами, а інші використовують пробіли. + +> [!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) вимагають значень параметрів, але не є функціями значень. Умовні директиви також не є функціями значень; дужки використовуються для групувань. + +## Функції перетворень + +[Тип даних](/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()")}} + - : Обчислює модуль (остачу — з тим самим знаком, що й у дільника) при діленні одного числа на інше. +- {{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/device-cmyk", "device-cmyk()")}} + - : Визначає кольори CMYK у залежний від пристрою спосіб. +- {{CSSXref("color_value/light-dark", "light-dark()")}} + - : Повертає один з двох заданих кольорів на основі поточної колірної схеми. + +## Функції зображень + +[Тип даних](/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()")}} + - : Визначає {{CSSxRef("<image>")}} подібно до типу {{cssxref("url_value", "<url>")}}, але з додатковими можливостями, серед яких задання напрямку письма в зображенні та запасних зображень, на випадок того, що головне зображення не підтримується. +- {{CSSxRef("image/image-set","image-set()")}} + - : Вибирає найвідповідніше зображення CSS із переданого набору, в основному для екранів з високою щільністю пікселів. +- {{CSSxRef("cross-fade", "cross-fade()")}} + - : Змішує два або більше зображень з визначеною прозорістю. +- {{CSSxRef("element", "element()")}} + - : Визначає значення {{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()")}} + - : Визначає прямокутник за допомогою віддалей від верхнього та лівого країв опорної рамки. +- {{CSSxRef("basic-shape/xywh","xywh()")}} + - : Визначає прямокутник за допомогою заданих віддалей від верхнього та лівого країв опорної рамки, а також ширини та висоти прямокутника. +- {{CSSxRef("basic-shape/polygon","polygon()")}} + - : Визначає багатокутник. +- {{CSSxRef("basic-shape/path", "path()")}} + - : Приймає рядок шляху SVG, даючи змогу малювати фігуру. +- {{CSSxRef("basic-shape/shape", "shape()")}} + - : Приймає розділений комами список команд, що визначають фігуру для малювання. + +## Функції покликань + +Наступні функції використовуються як значення властивостей для покликань на значення, визначені в іншому місці: + +- {{CSSxRef("attr", "attr()")}} + - : Використовує атрибути, визначені на елементі HTML. +- {{CSSxRef("env", "env()")}} + - : Використовує значення, визначене користувацьким агентом як змінну середовища. +- {{cssxref("url_value", "<url>")}} + - : Використовує файл за заданим URL. +- {{CSSxRef("var", "var()")}} + - : Використовує значення кастомної властивості замість будь-якої частини значення іншої властивості. + +## Функції сіток + +Наступні функції використовуються для визначення [Сітки CSS](/uk/docs/Web/CSS/CSS_grid_layout): + +- {{CSSxRef("fit-content_function", "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/linear", "linear()")}} + - : Функція згладжування, яка інтерполює лінійно між своїми точками. +- {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}} + - : Функція згладжування, що визначає кубічну криву Безьє. +- {{cssxref("easing-function/steps", "steps()")}} + - : Ітерація по вказаній кількості зупинок протягом переходу, відображаючи кожну зупинку протягом рівних проміжків часу. + +## Функції анімацій + +Наступні функції використовуються як значення різних властивостей {{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) +- [Навчання – Значення та одиниці вимірювання](/uk/docs/Learn_web_development/Core/Styling_basics/Values_and_units) diff --git a/uk_spelling_additions.txt b/uk_spelling_additions.txt index cebe2dc3c..fc66fbc67 100644 --- a/uk_spelling_additions.txt +++ b/uk_spelling_additions.txt @@ -104,6 +104,7 @@ гештаблиць гештаблицями гешу +гліфи-дингбати глупість гравіс гравісами @@ -124,6 +125,7 @@ Деніколи деоптимізації деоптимізувати +деревно-структурних Деревно-структурні десеріалізації десеріалізований @@ -220,8 +222,8 @@ метатег метод-сетер мешап -міжсайтове міждокументних +міжсайтове міжсайтових міжсайтові міжсайтового @@ -415,8 +417,8 @@ підможливістю підпатерн підпатерном -підресурсами підпсевдоелементи +підресурсами підресурси підресурсів підресурсу @@ -546,6 +548,7 @@ флексбоксу флексфактор флексфактору +флерони форматувальника форматувальники форматувальників @@ -591,6 +594,8 @@ юнікодні юнікодному юніттестування +якірно-позиційним +якірно-позиційні f-рядків Firefox-специфічна JSON-серіалізовним