Функції значень CSS

Функції значень CSS – це інструкції, що закликають особливу обробку даних або обчислення, щоб повернути значення CSS для властивості CSS. Функції значень CSS представляють складніші типи даних, і вони можуть приймати якісь вхідні аргументи, щоб обчислювати на основі них повернене значення.

Синтаксис

selector {
  property: function([argument]? [, argument]!);
}

Синтаксис значення починається з назви функції, після якої ставиться ліва дужка (. Далі йдуть аргументи, а завершується функція правою дужкою ).

Функції можуть приймати кілька аргументів, котрі форматуються подібно до значень властивостей CSS. Пробіли дозволені, але вони необов'язкові всередині дужок. У деяких функційних записах різні аргументи розділяються комами, а інші використовують пробіли.

[!NOTE] Функції значень CSS вживаються як значення властивостей, і їх не слід плутати з псевдокласами. Функційні псевдокласи, лінгвістичні псевдокласи та декілька деревно-структурних псевдокласів вимагають значень параметрів, але не є функціями значень. Умовні директиви також не є функціями значень; дужки використовуються для групувань.

Функції перетворень

Тип даних CSS <transform-function> представляє перетворення вигляду. Він використовується як значення властивості transform.

Функції перекладу

translatex(): Перекладає елемент по горизонталі.
translatey(): Перекладає елемент по вертикалі.
translatez(): Перекладає елемент по аплікаті.
translate(): Перекладає елемент на двовимірній площині.
translate3d(): Перекладає елемент у тривимірному просторі.

Функції обертання

rotatex(): Обертає елемент навколо горизонтальної осі.
rotatey(): Обертає елемент навколо вертикальної осі.
rotatez(): Обертає елемент навколо аплікати.
rotate(): Обертає елемент навколо фіксованої точки на двовимірній площині.
rotate3d(): Обертає елемент навколо фіксованої осі в тривимірному просторі.

Функції масштабування

scalex(): Масштабує елемент по горизонталі.
scaley(): Масштабує елемент по вертикалі.
scalez(): Масштабує елемент по аплікаті.
scale(): Масштабує елемент на двовимірній площині.
scale3d(): Масштабує елемент у тривимірному просторі.

Функції нахиляння

skewx(): Нахиляє елемент у горизонтальному напрямку.
skewy(): Нахиляє елемент у вертикальному напрямку.
skew(): Нахиляє елемент на двовимірній площині.

Матричні функції

matrix(): Описує однорідну матрицю двовимірного перетворення.
matrix3d(): Описує тривимірне перетворення як однорідну матрицю 4×4.

Функції перспективи

perspective(): Задає віддаль між користувачем і площиною z=0.

Математичні функції

Математичні функції дають змогу записувати числові значення у вигляді математичних виразів.

Кожна зі сторінок нижче містить докладну інформацію про синтаксис математичної функції, дані про сумісність з браузерами, приклади та інше. Для загального знайомства з математичними функціями CSS дивіться Використання математичних функцій CSS.

Базова арифметика

calc(): Виконує базові арифметичні обчислення над числовими значеннями.

Функції порівняння

min(): Обчислює найменше зі списку значень.
max(): Обчислює найбільше зі списку значень.
clamp(): Обчислює центральне значення між мінімальним, центральним та максимальним значеннями.

Функції крокових значень

round(): Обчислює округлене число на основі певної стратегії округлення.
mod(): Обчислює модуль (остачу — з тим самим знаком, що й у дільника) при діленні одного числа на інше.
rem(): Обчислює остачу (з тим самим знаком, що й у діленого) при діленні одного числа на інше.

Тригонометричні функції

sin(): Обчислює тригонометричний синус числа.
cos(): Обчислює тригонометричний косинус числа.
tan(): Обчислює тригонометричний тангенс числа.
asin(): Обчислює тригонометричний арксинус числа.
acos(): Обчислює тригонометричний арккосинус числа.
atan(): Обчислює тригонометричний арктангенс числа.
atan2(): Обчислює тригонометричний арктангенс двох чисел на площині.

Експоненційні функції

pow(): Обчислює основу, піднесену до степеня числа.
sqrt(): Обчислює квадратний корінь числа.
hypot(): Обчислює квадратний корінь суми квадратів своїх аргументів.
log(): Обчислює логарифм числа.
exp(): Обчислює e, піднесене до степеня числа.

Знакові функції

abs(): Обчислює модуль числа.
sign(): Обчислює знак числа (додатний або від'ємний).

Функції фільтрування

Тип даних CSS <filter-function> представляє графічний ефект, що може змінювати вигляд вихідного зображення. Він використовується властивостями filter і backdrop-filter.

blur(): Збільшує розмивання Гауса зображення.
brightness(): Висвітлює або затемнює зображення.
contrast(): Збільшує або зменшує контрастність зображення.
drop-shadow(): Застосовує відкидання тіні за зображенням.
grayscale(): Перетворює зображення на чорно-біле.
hue-rotate(): Змінює загальне забарвлення зображення.
invert(): Обертає кольори зображення.
opacity(): Додає до зображення прозорість.
saturate(): Змінює загальну насиченість зображення.
sepia(): Збільшує сепію зображення.

Колірні функції

Тип даних CSS <color> визначає різні способи представлення кольорів.

rgb(): Визначає даний колір за його складовими червоного, зеленого, синього та альфа-каналу (прозорості).
hsl(): Визначає даний колір за його складовими барви, насиченості, світлості та альфа-каналу (прозорості).
hwb(): Визначає даний колір за його складовими барви, білизни та чорноти.
lch(): Визначає даний колір за його складовими світності, інтенсивності та барви.
oklch(): Визначає даний колір за його складовими світності, інтенсивності, барви та альфа-каналу (прозорості).
lab(): Визначає даний колір за його складовими світності, відстаней по осях A та B в колірному просторі LAB.
oklab(): Визначає даний колір за його складовими світності, відстаней по осях A та B в колірному просторі LAB, а також альфа-каналу (прозорості).
color(): Задає конкретний, визначений колірний простір замість неявного колірного простору sRGB.
color-mix(): Змішує два колірні значення в заданому колірному просторі згідно з заданими кількостями.
device-cmyk(): Визначає кольори CMYK у залежний від пристрою спосіб.
light-dark(): Повертає один з двох заданих кольорів на основі поточної колірної схеми.

Функції зображень

Тип даних CSS <image> надає графічне представлення зображень або градієнтів.

Функції градієнтів

linear-gradient(): Лінійні градієнти плавно змінюють колір уздовж уявної лінії.
radial-gradient(): Радіальні градієнти плавно змінюють колір від центральної точки (початку).
conic-gradient(): Конічні градієнти плавно змінюють колір по колу.
repeating-linear-gradient(): Схожа на linear-gradient() і приймає ті ж аргументи, але повторює кольорові зупинки нескінченно в усіх напрямках, щоб покрити весь свій контейнер.
repeating-radial-gradient(): Схожа на radial-gradient() і приймає ті ж аргументи, але повторює кольорові зупинки нескінченно в усіх напрямках, щоб покрити весь свій контейнер.
repeating-conic-gradient(): Схожа на conic-gradient() і приймає ті ж аргументи, але повторює кольорові зупинки нескінченно в усіх напрямках, щоб покрити весь свій контейнер.

Функції зображень

image(): Визначає <image> подібно до типу <url>, але з додатковими можливостями, серед яких задання напрямку письма в зображенні та запасних зображень, на випадок того, що головне зображення не підтримується.
image-set(): Вибирає найвідповідніше зображення CSS із переданого набору, в основному для екранів з високою щільністю пікселів.
cross-fade(): Змішує два або більше зображень з визначеною прозорістю.
element(): Визначає значення <image>, породжене від довільного елемента HTML.
paint(): Визначає значення <image>, породжене за допомогою PaintWorklet.

Функції лічильників

Функції лічильників CSS загалом використовуються для властивості content, хоча в теорії їх можна використовувати всюди, де підтримується <string>.

counter(): Повертає рядок, що представляє поточне значення названого лічильника, якщо він є.
counters(): Дає змогу користуватися вкладеними лічильниками, повертаючи сполучений рядок, що представляє поточні значення названих лічильників, якщо вони є.
symbols(): Визначає стилі лічильників в рядку, безпосередньо як значення властивості.

Функції фігур

Тип даних CSS <basic-shape> представляє графічну фігуру. Він використовується у властивостях clip-path, offset-path і shape-outside.

circle(): Визначає коло.
ellipse(): Визначає еліпс.
inset(): Визначає вписаний прямокутник.
rect(): Визначає прямокутник за допомогою віддалей від верхнього та лівого країв опорної рамки.
xywh(): Визначає прямокутник за допомогою заданих віддалей від верхнього та лівого країв опорної рамки, а також ширини та висоти прямокутника.
polygon(): Визначає багатокутник.
path(): Приймає рядок шляху SVG, даючи змогу малювати фігуру.
shape(): Приймає розділений комами список команд, що визначають фігуру для малювання.

Функції покликань

Наступні функції використовуються як значення властивостей для покликань на значення, визначені в іншому місці:

attr(): Використовує атрибути, визначені на елементі HTML.
env(): Використовує значення, визначене користувацьким агентом як змінну середовища.
<url>: Використовує файл за заданим URL.
var(): Використовує значення кастомної властивості замість будь-якої частини значення іншої властивості.

Функції сіток

Наступні функції використовуються для визначення Сітки CSS:

fit-content(): Обмежує переданий розмір доступним розміром згідно з формулою min(максимальний розмір, max(мінімальний розмір, аргумент)).
minmax(): Визначає діапазон розмірів, що більші або дорівнюють min і менші або дорівнюють max.
repeat(): Представляє повторний фрагмент списку доріжок, даючи змогу використовувати велику кількість стовпців або рядків, що відповідають циклічному шаблону.

Функції шрифтів

Функції шрифтів CSS використовуються вкупі зі властивістю font-variant-alternates, щоб керувати використанням альтернативних гліфів.

stylistic(): Дає змогу використовувати стилістичні альтернативи для окремих символів. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенню OpenType salt, наприклад, salt 2.
styleset(): Дає змогу використовувати стилістичні альтернативи для наборів символів. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенню OpenType ssXY, наприклад, ss02.
character-variant(): Дає змогу використовувати специфічні стилістичні альтернативи для символів. Подібна до styleset(), але не створює зв'язних гліфів для набору символів; окремі символи матимуть незалежні та не обов'язково зв'язні стилі. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенню OpenType cvXY, наприклад, cv02.
swash(): Дає змогу користуватися гліфами з розчерками. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенням OpenType swsh та cswh, наприклад, swsh 2 та cswh 2.
ornaments(): Дає змогу використовувати оздоби, такі як флерони та інші гліфи-дингбати. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенню OpenType ornm, наприклад, ornm 2.
annotation(): Дає змогу користуватися анотаціями, такими як цифри в колах або обернені символи. Параметр є назвою, специфічною для шрифту, яка відображається на число. Відповідає значенню OpenType nalt, наприклад, nalt 2.

Функції згладжування

Наступні функції використовуються як значення властивостей переходу та анімації:

linear(): Функція згладжування, яка інтерполює лінійно між своїми точками.
cubic-bezier(): Функція згладжування, що визначає кубічну криву Безьє.
steps(): Ітерація по вказаній кількості зупинок протягом переходу, відображаючи кожну зупинку протягом рівних проміжків часу.

Функції анімацій

Наступні функції використовуються як значення різних властивостей animation-timeline:

scroll(): Задає анонімну часову шкалу прокрутки елемента як його animation-timeline.
view(): Задає анонімну часову шкалу перегляду елемента як його animation-timeline.

Функції якірного позиціювання

Функції якірного позиціювання застосовуються, коли якірно-позиційні елементи отримують позицію та розмір, відносні щодо місця розташування та розміру пов'язаних з ними якірних елементів.

anchor(): Повертає довжину, відносну щодо місця розташування країв якірного елемента, пов'язаного з поточним якірно-позиційним елементом.
anchor-size(): Повертає довжину, відносну щодо розміру пов'язаного якірного елемента.

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.