Синтаксис визначення значення

Синтаксис визначення значення CSS — це формальна граматика, що використовується для визначення множини дійсних значень властивості чи функції CSS. На додачу до цього синтаксису, множина дійсних значень може бути звужена семантичними обмеженнями (наприклад, число може бути строго додатним).

Синтаксис визначення описує, які значення дозволені, а також взаємодію між ними. Компонент може бути ключовим словом, частина символів – уважатися літералом, або ж значенням даного типу даних CSS або іншої властивості CSS.

Типи значень компонентів

Ключові слова

Загальні ключові слова

Ключове слово з наперед визначеним значенням вживається буквально, без лапок. Наприклад: auto, smaller чи ease-in.

Особливий випадок inherit, initial і unset

Усі властивості CSS приймають ключові слова inherit, initial та unset. Вони не додаються в визначення значень і є визначеними неявно.

Літерали

У CSS кілька символів можуть з'являтись самі по собі, як то скісна риска (/) чи кома (,), і використовуватись у визначенні властивості для розділення його частин. Кома нерідко використовується для розділення значень в переліченнях, або параметрів у функціях математичного вигляду; скісна риска нерідко розділяє частини значення, що є семантично відмінними, але мають спільний синтаксис. Зазвичай скісна риска використовується у властивостях-скороченнях: для розділення компонентів, що мають один тип, але належать різним властивостям.

Обидва ці символи з'являються у визначенні значень буквально.

Типи даних

Базові типи даних

Частина типів даних використовується в усій CSS і визначена один раз для всіх значень специфікації. Вони звуться базовими типами даних і представлені своїми іменами, оточеними символами < і >: <angle>, <string>, …

Нетерміновані типи даних

Менш поширені типи даних, що звуться нетермінованими типами даних, також оточуються < і >.

Нетерміновані типи даних бувають двох різновидів:

  • типи даних, що поділяють ім'я зі властивістю, поставлене в лапки. У цьому випадку і тип даних, і властивість поділяють спільну множину значень. Такі типи нерідко використовуються у визначеннях властивостей-скорочень.
  • типи даних, що не поділяють ім'я зі властивістю. Такі типи даних вельми наближені до базових типів даних. Єдина їх від них відмінність – фізичне розташування їх визначення. Їхнє визначення зазвичай фізично розташоване поруч з визначенням властивості, що їх використовує.

Комбінатори значень компонентів

Квадратні дужки

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

bold [ thin && <length> ]

Цей приклад відповідає наступним значенням:

  • bold thin 2vh
  • bold 0 thin
  • bold thin 3.5em

Але не відповідає:

  • thin bold 3em, адже bold ставиться поруч з компонентом, визначеним квадратними дужками, хоча повинно стояти перед ним.

Сусідство

Розташування декількох ключових слів, літералів чи типів даних поруч одне з одним, розділених одним чи кількома пробілами, зветься сусідством. Усі сусідні компоненти є обов'язковими та повинні стояти в точному порядку.

bold <length>, thin

Цей приклад відповідає наступним значенням:

  • bold 1em, thin
  • bold 0, thin
  • bold 2.5cm, thin
  • bold 3vh, thin

Але не:

  • thin 1em, bold, оскільки сутності мусять стояти у вказаному порядку
  • bold 1em thin, оскільки сутності є обов'язковими; мусять бути кома й літерал
  • bold 0.5ms, thin, оскільки значення ms – це не <length>

Подвійний амперсанд

Розділення двох чи більше компонентів подвійним амперсандом, &&, означає, що всі такі компоненти є обов'язковими, але можуть стояти в будь-якому порядку.

bold && <length>

Цей приклад відповідає наступним значенням:

  • bold 1em
  • bold 0
  • 2.5cm bold
  • 3vh bold

Але не:

  • bold, оскільки значення мусить містити обидва компоненти.
  • bold 1em bold, оскільки обидва компоненти мусять зустрічатися лише раз.

[!NOTE] Сусідство має пріоритет над подвійним амперсандом, а отже – bold thin && <length> рівносильно [ bold thin ] && <length>. Це описує bold thin <length> і <length> bold thin, але не bold <length> thin.

Подвійна риска

Розділення двох чи більше компонентів подвійною рискою, ||, означає, що усі сутності є варіантами: принаймні один з них мусить бути присутній, і вони можуть зустрічатися в будь-якому порядку. Здебільшого це використовується для визначення різних значень властивості-скорочення.

<'border-width'> || <'border-style'> || <'border-color'>

Цей приклад відповідає наступним значенням:

  • 1em solid blue
  • blue 1em
  • solid 1px yellow

Але не:

  • blue yellow, оскільки компонент мусить зустрітися щонайбільше один раз.
  • bold, оскільки це не ключове слово, дозволене як значення якоїсь із сутностей.

[!NOTE] Подвійний амперсанд має пріоритет над подвійною рискою, а отже – bold || thin && <length> рівносильно bold || [ thin && <length> ]. Це описує bold, thin <length>, bold thin <length> і thin <length> bold, але не <length> bold thin, адже bold, якщо не опущено, мусить стояти до чи після всього компонента thin && <length>.

Одинарна риска

Розділення двох чи більше сутностей одинарною рискою, |, означає, що всі такі сутності є виключними варіантами: мусить бути присутній рівно один з таких варіантів. Це здебільшого використовується для розділення списку можливих ключових слів.

<percentage> | <length> | left | center | right | top | bottom

Цей приклад відповідає наступним значенням:

  • 3%
  • 0
  • 3.5em
  • left
  • center
  • right
  • top
  • bottom

Але не:

  • center 3%, оскільки мусить бути присутній лише один з компонентів.
  • 3em 4.5em, адже компонент мусить бути присутній щонайбільше один раз.

[!NOTE] Подвійна риска має пріоритет над одинарною, а отже – bold | thin || <length> рівносильно bold | [ thin || <length> ]. Це описує bold, thin, <length>, <length> thin і thin <length>, але не bold <length>, адже може бути присутня лише одна сутність з обох боків комбінатора |.

Помножувачі значень компонентів

Помножувач – знак, що вказує на те, скільки разів сутність, що стоїть перед ним, може бути повторена. Сутність, що вказана без помножувача, мусить зустрітися рівно один раз.

Помножувачі не можуть отримати пріоритет над жодним з комбінаторів.

Зірочка (*)

Помножувач зірочки вказує, що сутність може повторюватися нуль, один чи декілька разів.

bold smaller*

Цей приклад відповідає наступним значенням:

  • bold
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller, і так далі.

Але не:

  • smaller, адже першим вказано bold, і це значення мусить стояти перед усіма ключовими словами smaller.

Плюс (+)

Помножувач плюса вказує, що сутність може повторюватися один або декілька разів.

bold smaller+

Цей приклад відповідає наступним значенням:

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller, і так далі.

Але не:

  • bold, адже smaller мусить зустрітися принаймні один раз.
  • smaller, адже першим вказано bold, і це значення мусить стояти перед усіма ключовими словами smaller.

Знак питання (?)

Помножувач знака питання вказує, що сутність є необов'язковою, і повинна зустрітися нуль чи один раз.

bold smaller?

Цей приклад відповідає наступним значенням:

  • bold
  • bold smaller

Але не:

  • bold smaller smaller, адже smaller мусить зустрітися щонайбільше раз.
  • smaller, адже першим вказано bold, і це значення мусить стояти перед усіма ключовими словами smaller.

Фігурні дужки ({ })

Помножувач фігурних дужок, що оточує два цілі числа, розділені комою, A та B, вказує, що сутність мусить зустрітися щонайменше A і щонайбільше B разів.

bold smaller{1,3}

Цей приклад відповідає наступним прикладам:

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller

Але не:

  • bold, адже smaller мусить зустрітися принаймні раз.
  • bold smaller smaller smaller smaller, адже smaller мусить зустрітися щонайбільше тричі.
  • smaller, адже значення bold вказане першим і мусить стояти перед усіма ключовими словами smaller

Знак решітки (#)

Помножувач решітки вказує, що сутність може повторюватися раз чи більше (як з помножувачем плюса), але кожне входження відділяється комою (',').

bold smaller#

Цей приклад відповідає наступним значенням:

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller, і так далі.

Але не:

  • bold, адже smaller мусить зустрітися принаймні раз.
  • bold smaller smaller smaller, адже наступні входження smaller мусять відділятися комами.
  • smaller, адже значення bold вказане першим і мусить стояти перед усіма ключовими словами smaller.

Після знака решітки можуть стояти фігурні дужки, аби вказати, скільки саме разів повторюється сутність.

bold smaller#{1,3}

Цей приклад відповідає наступним значенням:

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller

Але не:

  • bold smaller, smaller, smaller, smaller, адже smaller мусить зустрітися щонайбільше тричі.
bold smaller#{2}

Цей приклад відповідає наступному значенню:

  • bold smaller, smaller

Але не:

  • bold smaller, адже smaller мусить зустрітися рівно двічі.

Знак оклику (!)

Помножувач оклику після групи вказує, що група є обов'язковою і мусить дати принаймні одне значення; навіть якщо граматика елементів усередині групи дозволяє пропустити увесь вміст, то принаймні одне значення компонента усе ж повинно бути вказано.

[ bold? smaller? ]!

Цей приклад відповідає наступним значенням:

  • bold
  • smaller
  • bold smaller

Але не:

  • значенню без bold і smaller, адже щось одне із двох мусить зустрітися.
  • smaller bold, адже значення bold вказане першим і мусить стояти перед ключовим словом smaller.
  • bold smaller bold, адже bold і smaller можуть зустрітися лише раз.

Запис діапазону з квадратними дужками ([min,max])

Частина типів може прийняти числові значення в межах певного діапазону. Наприклад, властивість column-count може прийняти ціле числове значення між додатними 1 і нескінченністю включно. Відповідний синтаксис має такий вигляд:

<integer [1,∞]>

Будь-яке значення поза цим заданим діапазоном робить все оголошення недійсним, тож браузер його ігноруватиме.

Запис діапазону з квадратними дужками [min, max] позначає діапазон, що включає свої межі, між значеннями min і max. Такий запис вживається в записах числових типів і може містити одиниці вимірювання, наприклад, <angle [0,180deg]>. Для додатної та від'ємної нескінченностей (-∞ і ∞) не повинні бути задані одиниці вимірювання. Типи, що задаються з одиницями вимірювання, можуть мати нульові значення, задані як із одиницями, так і без них, наприклад, <time [0s,10s]> і <time [0,10s]>.

Ось ще кілька прикладів:

  • <integer [-∞,∞]>: Будь-яке ціле число від від'ємної нескінченності до додатної нескінченності.
  • <integer [0,∞]>: Всі цілі числа від 0 до додатної нескінченності – валідні. Від'ємні цілі – невалідні.
  • <time [0s,10s]> or <time [0,10s]>: Будь-яка тривалість від 0 до 10 секунд – валідна.
  • <integer [-∞,-1]> | <integer [1,∞]>: Усі цілі числа, крім нуля, – валідні.

Підсумок

Знак Ім'я Опис Приклад
Комбінатори
Сусідство Компоненти є обов'язковими та повинні стояти в точному порядку solid <length>
&& Подвійний амперсанд Компоненти є обов'язковими та повинні стояти в будь-якому порядку <length> && <string>
|| Подвійна риска Принаймні один з компонентів повинен бути присутній, і вони можуть стояти в будь-якому порядку. <'border-image-outset'> || <'border-image-slice'>
| Одинарна риска Повинен бути присутній рівно один з компонентів smaller | small | normal | big | bigger
[ ] Квадратні дужки Групує компоненти для обходу правил пріоритету bold [ thin && <length> ]
Помножувачі
Без помножувача Рівно 1 раз solid
* Зірочка 0 або більше разів bold smaller*
+ Знак плюса 1 або більше разів bold smaller+
? Знак питання 0 або 1 раз (тобто необов'язковість) bold smaller?
{min,max} Фігурні дужки Щонайменше min разів, щонайбільше max разів bold smaller{1,3}
# Знак решітки 1 або більше разів, але кожне входження відділене комою (,) bold smaller#
! Знак оклику Група мусить дати принаймні 1 значення [ bold? smaller? ]!
[min,max] Числовий діапазон у квадратних дужках Задає числовий діапазон <integer [0,∞]>

Специфікації

Специфікація
CSS Values and Units Module Level 5 (CSS Values 5)
# value-defs

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

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

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

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

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