3.10. Справочник по CSS

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Справочник по CSS

Общие вводные

Единицы измерения
- Абсолютные: px, pt, pc, in, cm, mm
- Относительные:
  - к шрифту: em, rem, ex, ch, cap, ic
  - к viewport: vw, vh, vmin, vmax, vi, vb, svw, svh, lvw, lvh, dvw, dvh
  - к контейнеру: cqw, cqh, cqi, cqb, cqmin, cqmax
- Углы: deg, rad, grad, turn
- Время: s, ms
- Частота: Hz, kHz
- Разрешение: dpi, dpcm, dppx
Глобальные ключевые слова
initial, inherit, unset, revert, revert-layer
CSS Custom Properties (переменные)
Синтаксис: --имя: значение;
Использование: var(--имя[, fallback])
Область видимости — каскад и наследование.

Box Model

● `display`

— Синтаксис:

display: <display-outside> || <display-inside> || <display-listitem> || <display-internal> || <display-box> || <display-legacy>

— Возможные значения:

Внешнее поведение: block, inline, run-in
Внутреннее поведение: flow, flow-root, table, flex, grid, ruby
Комбинированные: block flow, inline flow, block flow-root, inline flex, block grid, inline table, inline ruby
List-item: list-item, block list-item, inline list-item
Внутренние: table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption
Box: contents, none
Legacy: inline-block, inline-table, inline-flex, inline-grid
— Наследуется: нет
— Анимируемое: нет
— Initial: inline
— Примечания:
display: contents убирает визуальную коробку элемента, но сохраняет дочерние элементы в потоке.
display: flow-root создаёт новый BFC без использования overflow: hidden.

● `box-sizing`

— Синтаксис:

box-sizing: content-box | border-box

— Возможные значения: content-box, border-box
— Наследуется: нет
— Анимируемое: нет
— Initial: content-box
— Примечания:

border-box включает padding и border в вычисление ширины/высоты.

● `margin` (и логические `margin-block-start`, `margin-inline-end`, и т.д.)

— Синтаксис:

margin: [ <length> | <percentage> | auto ]{1,4}

— Доп. значения: auto
— Наследуется: нет
— Анимируемое: да (числовые значения)
— Initial: 0
— Примечания:

Вертикальные margin блочных элементов схлопываются (margin collapsing).
margin: auto центрирует блочный элемент по горизонтали при заданной width.

● `padding` (и логические `padding-block-start`, `padding-inline-end`, и т.д.)

— Синтаксис:

padding: [ <length> | <percentage> ]{1,4}

— Наследуется: нет
— Анимируемое: да
— Initial: 0
— Примечания:

Процентное значение рассчитывается от ширины содержащего блока (даже для padding-top/padding-bottom).

● `width`, `height`, `min-width`, `min-height`, `max-width`, `max-height`

— Синтаксис:

[ <length> | <percentage> | auto | min-content | max-content | fit-content( [ <length> | <percentage> ] ) | intrinsic | contain-floats* | stretch | clamp( <length-percentage>, <length-percentage>, <length-percentage> ) ]

— Доп. значения (Level 4+):

fit-content — сокращение для min(max-content, max(min-content, argument))
stretch — расширение до доступного размера (внутри flex/grid)
clamp(min, preferred, max) — ограничение в диапазоне
— Наследуется: нет
— Анимируемое: да
— Initial:
width, height: auto
min-*: 0
max-*: none
— Примечания:
height: auto — по контенту; width: auto — заполнение доступного пространства (для блочных).
min-content ≈ min-intrinsic, max-content ≈ intrinsic (устаревшие термины).
contain-floats устарело, заменено display: flow-root.

Позиционирование и размещение

● `position`

— Синтаксис:

position: static | relative | absolute | fixed | sticky

— Наследуется: нет
— Анимируемое: нет
— Initial: static
— Примечания:

sticky — гибрид relative + fixed, активируется при скролле.
fixed позиционируется относительно viewport (не документа!).
absolute — относительно ближайшего позиционированного предка (position ≠ static).

● `top`, `right`, `bottom`, `left` (и логические `inset-block-start`, `inset-inline-end`, `inset` как сокращение)

— Синтаксис:

[ <length> | <percentage> | auto ]

— Наследуется: нет
— Анимируемое: да
— Initial: auto
— Примечания:

Для static — игнорируются.
inset: 10px 20px ≡ top: 10px; right: 20px; bottom: 10px; left: 20px.

● `z-index`

— Синтаксис:

z-index: auto | <integer>

— Наследуется: нет
— Анимируемое: да
— Initial: auto
— Примечания:

Работает только для позиционированных элементов или при opacity < 1, transform ≠ none, filter ≠ none, will-change и др., создающих stacking context.
z-index: auto не создаёт нового stacking context.

● `float`, `clear`

— float:

left | right | inline-start | inline-end | none

— clear:

none | left | right | inline-start | inline-end | both

— Наследуется: нет
— Анимируемое: нет
— Initial: none
— Примечания:

float и clear устаревают в пользу flex/grid, но ещё используются в legacy-кодах и layout-хаках.
У floated элементов создаётся BFC при display: flow-root, overflow ≠ visible, и др.

● `isolation`

— Синтаксис:

isolation: auto | isolate

— Наследуется: нет
— Анимируемое: нет
— Initial: auto
— Примечания:

isolate создаёт новый stacking context (аналог z-index с созданием context, но без изменения порядка).

Границы (`border`)

● `border` (и подробные `border-width`, `border-style`, `border-color`)

— Синтаксис (сокращённый):

border: [ <line-width> || <line-style> || <color> ]

— Подробно:

● `border-width`

— Синтаксис:

[ <length> | thin | medium | thick ]{1,4}

— Initial: medium
— Наследуется: нет
— Анимируемое: да
— Значения: thin ≈ 1px, medium ≈ 3px, thick ≈ 5px (зависит от UA)

● `border-style`

— Синтаксис:

[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}

— Initial: none
— Наследуется: нет
— Анимируемое: нет
— Особенности:

none и hidden — нет границы, но hidden приоритетнее при конфликте (в таблицах).
double — две линии с промежутком, ширина пропорциональна border-width.
Геометрические (groove, ridge, inset, outset) имитируют 3D-эффект (но не гарантируется).

● `border-color`

— Синтаксис:

[ <color> ]{1,4}

— Initial: currentColor
— Наследуется: нет
— Анимируемое: да
— Примечания:

currentColor наследуется от color.

● `border-radius`

— Синтаксис:

[ <length-percentage>{1,2} ]{1,4} [/ <length-percentage>{1,4}]?

— Анимируемое: да
— Initial: 0
— Примечания:

Формат a b c d / e f g h — горизонтальные и вертикальные радиусы (для эллиптических углов).
Проценты в горизонтальной части — от ширины, в вертикальной — от высоты.
border-radius применяется и к background, box-shadow, outline (если overflow: hidden).

● `border-image` (и раздельные подсвойства)

— Синтаксис полный:

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Подсвойства:

border-image-source: none | <image>
— Initial: none
border-image-slice: [ <number> | <percentage> ]{1,4} && fill?
— Initial: 100%
— fill — разрешает растягивать центральную часть (иначе она прозрачна)
border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
— Initial: 1
— auto — ширина по размеру среза изображения
border-image-outset: [ <length> | <number> ]{1,4}
— Initial: 0
— Сдвигает изображение вне border-box (не влияет на layout)
border-image-repeat: [ stretch | repeat | round | space ]{1,2}
— Initial: stretch
— round — масштабирует плитки так, чтобы они вписались целым числом
— space — равномерные зазоры между плитками (последняя плитка не обрезается)

● `outline` (и `outline-width`, `outline-style`, `outline-color`, `outline-offset`)

— Отличие от border:

Не занимает место в layout (не влияет на размеры/позиционирование)
Рисуется вне border box (но outline-offset может его смещать внутрь/наружу)
— outline-offset: <length>
— Initial: 0
— Может быть отрицательным → outline рисуется внутри border-box

**Фон (`background-*`)**

● `background` (сокращённая форма)

— Синтаксис:

background: [ <bg-layer> , ]* <final-bg-layer>`  
где `<bg-layer>` = `<bg-image> || <bg-position> [ / <bg-size> ]? || <bg-repeat> || <bg-attachment> || <bg-origin> || <bg-clip>

и <final-bg-layer> дополнительно включает <bg-color> (только в последнем слое).
— Наследуется: нет
— Анимируемое: частично (только background-color, background-position, background-size при использовании transform)
— Initial: background-color: transparent, остальные — по отдельным свойствам
— Примечания:

Можно задавать многослойный фон (через запятую).
Порядок объявления внутри слоя — произвольный, но bg-size обязательно следует после bg-position через /.
background-color применяется под всеми слоями изображений.

● `background-color`

— Синтаксис:

<color>

— Наследуется: нет
— Анимируемое: да
— Initial: transparent
— Примечания:

Не прозрачен даже при opacity: 0.5 → используйте rgba()/hsla() или color-mix().

● `background-image`

— Синтаксис:

[ <image> | none ]#

element(#id) — берёт render-дерево другого элемента (только в Firefox, experimental).
image() — позволяет задать fallback и direction (например, image(url(a.png) #00f)).
paint() — из CSS Painting API (Houdini).

● `background-position`

— Синтаксис:

[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? ]#

— Наследуется: нет
— Анимируемое: да
— Initial: 0% 0%
— Примечания:

Можно задавать 3+ значения (например, right 20px bottom 10px).
Поддерживает anchor() (CSS Anchor Positioning, экспериментально в Chrome 116+).

● `background-size`

— Синтаксис:

[ <length-percentage> | auto | cover | contain ]#

— Наследуется: нет
— Анимируемое: да (но медленно — триггерит repaint/layout в некоторых браузерах)
— Initial: auto
— Примечания:

cover — масштабирует изображение с сохранением пропорций, полностью покрывая контейнер (часть может обрезаться).
contain — масштабирует с сохранением пропорций, вписываясь целиком (могут быть пустые поля).
auto для одной оси — сохраняет пропорции исходного изображения.

● `background-repeat`

— Синтаксис:

[ repeat | repeat-x | repeat-y | round | space | no-repeat ]#

— Наследуется: нет
— Анимируемое: нет
— Initial: repeat
— Примечания:

repeat-x = repeat no-repeat, repeat-y = no-repeat repeat.
round и space — предотвращают обрезку плиток (в отличие от repeat).

● `background-attachment`

— Синтаксис:

[ scroll | fixed | local ]#

— Наследуется: нет
— Анимируемое: нет
— Initial: scroll
— Примечания:

fixed — фон фиксируется относительно viewport (не скроллится).
local — фон скроллится вместе с контентом (если элемент прокручиваемый, напр., overflow: auto).

● `background-origin`

— Синтаксис:

[ padding-box | border-box | content-box ]#

— Наследуется: нет
— Анимируемое: нет
— Initial: padding-box
— Примечания:

Определяет, откуда отсчитывается background-position.
Не влияет на background-clip.

● `background-clip`

— Синтаксис:

[ border-box | padding-box | content-box | text ]#

— Наследуется: нет
— Анимируемое: нет
— Initial: border-box
— Примечания:

text — обрезает фон по форме текста (требует -webkit-background-clip: text и color: transparent для совместимости).
Влияет на область отрисовки фона, но не на background-origin.

Цвет и непрозрачность

● `color`

— Синтаксис: <color>

<color>` = `transparent | currentColor | <named-color> | <hex-color> | <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | color() | device-cmyk() | color-mix()

— Наследуется: да
— Анимируемое: да
— Initial: canvastext (обычно #000000)
— Примечания:

currentColor ссылается на вычисленное значение color.
color() — для профилей ICC (редко поддерживается).
color-mix(in lch, red 30%, blue) — новый синтаксис (CSS Color 5), заменяет blend().

● `opacity`

— Синтаксис:

<alpha-value>` (`<number [0.0,1.0]> | <percentage>`)

— Наследуется: нет
— Анимируемое: да
— Initial: 1
— Примечания:

Применяется ко всему элементу (включая потомков).
Создаёт stacking context при opacity < 1.
Не влияет на доступность (не заменяет aria-hidden).

● `color-scheme`

— Синтаксис:

normal | [ light | dark | <custom-ident> ]+

— Наследуется: да
— Анимируемое: нет
— Initial: normal
— Примечания:

Указывает, какие цветовые схемы поддерживает элемент.
Влияет на поведение scrollbar, form controls, ::selection и др. нативных элементов.
@media (prefers-color-scheme: dark) можно использовать синхронно.

● `forced-color-adjust`

— Синтаксис:

auto | none

— Наследуется: да
— Анимируемое: нет
— Initial: auto
— Примечания:

При none отключает принудительную замену цветов в Windows High Contrast Mode.
Используйте осторожно — может нарушить доступность.

Текст и шрифты

● `font` (сокращённая форма)

— Синтаксис:

font: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

— Наследуется: да
— Анимируемое: частично (font-size, line-height, font-weight)
— Initial: зависит от UA
— Примечания:

Системные ключевые слова (caption и др.) устаревают (CSS Fonts 4).
line-height обязан следовать сразу после font-size через /.

● `font-family`

— Синтаксис: [ <family-name> | <generic-family> ]#

<generic-family>` = `serif | sans-serif | cursive | fantasy | monospace | system-ui | emoji | math | fangsong

— Наследуется: да
— Анимируемое: нет
— Initial: serif / sans-serif (зависит от UA)
— Примечания:

system-ui — системный шрифт по умолчанию (Windows: Segoe UI, macOS: San Francisco, Linux: Cantarell/Ubuntu).
Имена с пробелами — в кавычках: "Times New Roman".

● `font-size`

— Синтаксис:
<absolute-size> | <relative-size> | <length-percentage>

<absolute-size>` = `xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large  
<relative-size>` = `larger | smaller

— Наследуется: да
— Анимируемое: да
— Initial: medium
— Примечания:

larger/smaller масштабируются относительно родителя (обычно ×1.2 / ÷1.2).
xxx-large — добавлено в CSS Fonts 4.

● `font-weight`

— Синтаксис:

normal | bold | <number [1,1000]> | bolder | lighter

— Наследуется: да
— Анимируемое: да (числовые значения)
— Initial: normal (400)
— Примечания:

bolder/lighter — относительно вычисленного значения родителя (не font-weight, указанного в CSS!).
100–900 — стандарт, 1000 — для ultra-black (редко).

● `font-style`

— Синтаксис:

normal | italic | oblique <angle>?

— Наследуется: да
— Анимируемое: нет
— Initial: normal
— Примечания:

oblique 14deg — задаёт угол наклона (если нет italic-начертания).

● `font-stretch`

— Синтаксис:

normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>

— Наследуется: да
— Анимируемое: да
— Initial: normal (100%)
— Примечания:

% — 50%–200% (менее 100% — сжатие, более — растяжение).
Работает только если шрифт содержит соответствующие варианты.

● `font-variant` и `font-variant-*`

— Основные подсвойства:

font-variant-ligatures`: `normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]
 
font-variant-caps`: `normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

font-variant-numeric`: `normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] 

font-variant-east-asian`: `normal | [ <east-asian-variant-values> || <east-asian-width-values> ]

font-variant-position`: `normal | sub | super

— Наследуется: да
— Анимируемое: нет
— Initial: normal
— Примечания:

font-variant-numeric: tabular-nums — выравнивание цифр по столбцам (для таблиц).
font-variant-position: sub не заменяет <sub> — только стилизация.

● `line-height`

— Синтаксис:

normal | <number> | <length> | <percentage>

— Наследуется: да
— Анимируемое: да
— Initial: normal (~1.2)
— Примечания:

Безразмерное число (1.5) — умножается на font-size.
% и em — вычисляются сразу и наследуются как абсолютное значение (px).

● `letter-spacing`, `word-spacing`

— Синтаксис:

normal | <length>

— Наследуется: да
— Анимируемое: да
— Initial: normal
— Примечания:

Отрицательные значения допустимы (но могут ухудшать читаемость).

● `text-align`

— Синтаксис:

start | end | left | right | center | justify | match-parent | justify-all

— Наследуется: да
— Анимируемое: нет
— Initial: start
— Примечания:

start/end — логические (зависят от direction).
justify-all включает выравнивание и последней строки.

● `text-align-last`

— Синтаксис:

auto | start | end | left | right | center | justify

— Наследуется: да
— Анимируемое: нет
— Initial: auto
— Примечания:

Применяется только к последней строке или строке перед forced break.

● `text-justify`

— Синтаксис:

auto | none | inter-word | inter-character | distribute

— Наследуется: да
— Анимируемое: нет
— Initial: auto
— Примечания:

Управляет методом выравнивания при text-align: justify.
inter-character — для CJK-текстов.

● `text-indent`

— Синтаксис:

[ <length> | <percentage> ] && hanging? && each-line?

— Наследуется: да
— Анимируемое: да
— Initial: 0
— Примечания:

hanging — отступ вовнутрь (для выноски).
each-line — применяется к каждой строке (включая после br).

● `text-transform`

— Синтаксис:

none | capitalize | uppercase | lowercase | full-width | full-size-kana

— Наследуется: да
— Анимируемое: нет
— Initial: none
— Примечания:

full-width — конвертирует латиницу/цифры в fullwidth-символы (например, для CJK-совместимости).

● `white-space`

— Синтаксис:

normal | pre | nowrap | pre-wrap | pre-line | break-spaces

— Наследуется: да
— Анимируемое: нет
— Initial: normal
— Таблица поведения:

Значение	Переносы	Пробелы	`\n`
`normal`	да	collapse	да
`pre`	нет	preserve	да
`nowrap`	нет	collapse	да
`pre-wrap`	да	preserve	да
`pre-line`	да	collapse	да
`break-spaces`	да	preserve	да*

— Примечания:

break-spaces сохраняет все пробелы и позволяет разрывать длинные последовательности пробелов.
\n в pre-line → пробел (не перенос).

● `overflow-wrap` (ранее `word-wrap`)

— Синтаксис:

normal | break-word | anywhere

— Наследуется: да
— Анимируемое: нет
— Initial: normal
— Примечания:

break-word — устаревшее, эквивалент overflow-wrap: anywhere в большинстве браузеров.
anywhere — разрешает разрыв в любом месте слова (даже внутри URL).

● `word-break`

— Синтаксис:

normal | break-all | keep-all | break-word

— Наследуется: да
— Анимируемое: нет
— Initial: normal
— Примечания:

break-all — для CJK: разрывает слова без учёта слогов.
keep-all — запрещает разрыв CJK-слов вообще.
break-word — алиас для overflow-wrap: anywhere.

● `hyphens`

— Синтаксис:

none | manual | auto

— Наследуется: да
— Анимируемое: нет
— Initial: manual
— Примечания:

Требует указания lang="..." (браузер использует словарь для переносов).
 () — мягкий перенос (работает при hyphens: manual | auto).

● `text-decoration` (и подсвойства)

— Сокращённая форма:

text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

— Подсвойства:

● `text-decoration-line`

— Синтаксис:

none | [ underline || overline || line-through || blink ]

— Наследуется: нет
— Анимируемое: нет
— Initial: none
— Примечания:

blink — не поддерживается (устаревшее).

● `text-decoration-style`

— Синтаксис:

solid | double | dotted | dashed | wavy

— Наследуется: нет
— Анимируемое: нет
— Initial: solid
— Примечания:

wavy — волнистая линия (часто для орфографических ошибок).

● `text-decoration-color`

— Синтаксис:

<color>

— Наследуется: нет
— Анимируемое: да
— Initial: currentColor

● `text-decoration-thickness`

— Синтаксис:

auto | from-font | <length> | <percentage>

— Наследуется: нет
— Анимируемое: да
— Initial: auto
— Примечания:

from-font — берёт толщину из шрифта (OpenType textDecorationThickness).

● `text-underline-offset`

— Синтаксис:

auto | <length> | <percentage>

— Наследуется: нет
— Анимируемое: да
— Initial: auto

● `text-underline-position`

— Синтаксис:

auto | [ under || [ left | right ] ]

— Наследуется: нет
— Анимируемое: нет
— Initial: auto
— Примечания:

under — линия под baseline (для CJK).
left/right — для вертикального текста.

● `text-shadow`

— Синтаксис:

none | [ <length>{2,3} && <color>? ]#

— Наследуется: нет
— Анимируемое: да
— Initial: none
— Примечания:

Первые два length — смещение по X и Y, третий — размытие (без blur-radius = 0).
Можно несколько теней (через запятую).

● `text-overflow`

— Синтаксис:

[ clip | ellipsis | <string> ]{1,2}

— Наследуется: нет
— Анимируемое: нет
— Initial: clip
— Примечания:

Работает только при overflow ≠ visible и white-space: nowrap.
Два значения — для начала и конца строки (например, "«" "»").

● `direction`, `unicode-bidi`

— direction: ltr | rtl
— unicode-bidi:

normal | embed | isolate | bidi-override | isolate-override | plaintext

— Наследуется: direction — да, unicode-bidi — нет
— Анимируемое: нет
— Initial: ltr, normal
— Примечания:

Используется для многоязычных текстов (арабский, иврит).
isolate предпочтительнее embed (меньше побочных эффектов).

**Списки (`list-style-*`)**

● `list-style` (сокращённая форма)

— Синтаксис:

<list-style-type> || <list-style-position> || <list-style-image>

— Наследуется: да
— Анимируемое: нет
— Initial: disc outside none

● `list-style-type`

— Синтаксис:

none | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | [ <string> | <counter-style> | <symbols()> ]

— Поддержка symbols():
symbols( cyclic "★" "★★" "★★★" ) — для кастомных маркеров.
— Наследуется: да
— Анимируемое: нет
— Initial: disc
— Примечания:

Для ol по умолчанию — decimal.
@counter-style позволяет определять сложные счётчики (например, китайские иероглифы).

● `list-style-position`

— Синтаксис:

inside | outside

— Наследуется: да
— Анимируемое: нет
— Initial: outside
— Примечания:

inside — маркер входит в padding-inline-start.

● `list-style-image`

— Синтаксис:

none | <image>

— Наследуется: да
— Анимируемое: нет
— Initial: none
— Примечания:

При ошибке загрузки изображения fallback → list-style-type.

Таблицы

● `table-layout`

— Синтаксис:

auto | fixed

— Наследуется: да
— Анимируемое: нет
— Initial: auto
— Примечания:

fixed — ширина колонок определяется первой строкой (<col>, <colgroup>, первой <td>). Быстрее отрисовки.

● `border-collapse`

— Синтаксис:

collapse | separate

— Наследуется: да
— Анимируемое: нет
— Initial: separate
— Примечания:

collapse — границы соседних ячеек объединяются в одну.
separate + border-spacing — отступы между ячейками.

● `border-spacing`

— Синтаксис:

<length> <length>?

— Наследуется: да
— Анимируемое: да
— Initial: 0
— Примечания:

Работает только при border-collapse: separate.
Второе значение — вертикальное расстояние (по умолчанию = первое).

● `caption-side`

— Синтаксис:

top | bottom | block-start | block-end | inline-start | inline-end

— Наследуется: да
— Анимируемое: нет
— Initial: top
— Примечания:

block-start/block-end — логические (зависят от writing-mode).

● `empty-cells`

— Синтаксис:

show | hide

— Наследуется: да
— Анимируемое: нет
— Initial: show
— Примечания:

При hide — фон и границы пустых ячеек не рисуются.
Работает только при border-collapse: separate.

● `vertical-align`

— Синтаксис:

baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

— Наследуется: нет
— Анимируемое: да
— Initial: baseline
— Примечания:

Применяется к inline и table-cell элементам.
% и length — смещение относительно line-height.
middle — по центру между baseline и x-height (не геометрический центр!).

Визуальные эффекты

● `box-shadow`

— Синтаксис:

none | [ inset? && <length>{2,4} && <color>? ]#

— Наследуется: нет
— Анимируемое: да
— Initial: none
— Примечания:

inset — тень внутри коробки.
Третий length — blur-radius, четвёртый — spread-radius.
Не влияет на layout.

● `filter`

— Синтаксис:

none | <filter-function>#  

<filter-function> =  blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

— Наследуется: нет
— Анимируемое: да
— Initial: none
— Примечания:

drop-shadow() ≠ box-shadow — учитывает альфа-канал (например, для SVG).
url() — ссылка на SVG-фильтр.

● `backdrop-filter`

— Синтаксис:

none | <filter-function>#

— Наследуется: нет
— Анимируемое: да
— Initial: none
— Примечания:

Применяется к области за элементом (требует частичной прозрачности: background: rgba() или backdrop-filter + ::backdrop).
Требует backface-visibility: hidden для HW-ускорения в некоторых случаях.

● `clip-path`

— Синтаксис:

none | <clip-source> | [ <basic-shape> || <geometry-box> ]  
<basic-shape> = inset() | circle() | ellipse() | polygon() | path() 
<geometry-box> = shape-box || fill-box || stroke-box || view-box

— Наследуется: нет
— Анимируемое: частично (inset, circle, ellipse — да; polygon, path — нет)
— Initial: none
— Примечания:

polygon(0 0, 100% 0, 100% 100%, 0 100%) — прямоугольник.
path() — SVG-путь (в координатах 0..1).
clip-path обрезает всё содержимое, включая box-shadow.

● `mask` (и `mask-*`)

— Синтаксис: сложный (аналог background, но для маски)
— Основные подсвойства:

mask-image
mask-mode (alpha | luminance)
mask-repeat, mask-position, mask-size, mask-origin, mask-clip
mask-composite (add | subtract | intersect | exclude)
— Наследуется: нет
— Анимируемое: частично (mask-position, mask-size)
— Initial: mask-image: none
— Примечания:
Поддержка неполная (лучше в WebKit).
mask-composite реализован слабо.

● `shape-outside`

— Синтаксис:

none | [ <shape-box> || <basic-shape> ] | <image>

— Наследуется: нет
— Анимируемое: частично
— Initial: none
— Примечания:

Работает только при float ≠ none.
Позволяет обтекать не прямоугольные формы (например, circle(50%)).

**Переходы (`transition-*`)**

● `transition` (сокращённая форма)

— Синтаксис:

<single-transition>#

где <single-transition> = <property> || <duration> || <timing-function> || <delay>
— Наследуется: нет
— Анимируемое: нет (но само свойство управляет анимацией других свойств)
— Initial: all 0s ease 0s
— Примечания:

Порядок значений — свободный, но duration перед delay (иначе интерпретируется как delay).
none в transition-property отключает переходы.

● `transition-property`

— Синтаксис:

none | [ all | <custom-ident> | <property-name> ]#

— <property-name> = width, background-color, --custom-prop и др.
— Наследуется: нет
— Анимируемое: нет
— Initial: all
— Примечания:

Кастомные свойства (--*) анимируемы только через @property (см. Houdini).
all — применяется ко всем анимируемым свойствам.

● `transition-duration`

— Синтаксис:

<time>#

— Наследуется: нет
— Анимируемое: нет
— Initial: 0s
— Примечания:

0s — мгновенное изменение (без интерполяции).

● `transition-timing-function`

— Синтаксис:

ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, <step-position> ]? ) | cubic-bezier( <number>#{4} )  
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

— Наследуется: нет
— Анимируемое: нет
— Initial: ease
— Примечания:

ease = cubic-bezier(0.25, 0.1, 0.25, 1)
steps(4, jump-both) — 4 шага, прыжки в начале и конце интервала (CSS Easing 2).

● `transition-delay`

— Синтаксис: <time>#
— Наследуется: нет
— Анимируемое: нет
— Initial: 0s
— Примечания:

Отрицательные значения — начало анимации с промежуточной точки.

**Анимации (`animation-*`, `@keyframes`)**

● `animation` (сокращённая форма)

— Синтаксис:
<single-animation>#
где <single-animation> =

<name> || <duration> || <timing-function> || <delay> || <iteration-count> || <direction> || <fill-mode> || <play-state>

— Наследуется: нет
— Анимируемое: нет
— Initial:
animation-name: none,
animation-duration: 0s,
animation-timing-function: ease,
animation-delay: 0s,
animation-iteration-count: 1,
animation-direction: normal,
animation-fill-mode: none,
animation-play-state: running
— Примечания:

Можно задавать несколько анимаций (через запятую).

● `animation-name`

— Синтаксис:

[ none | <keyframes-name> ]#

— Наследуется: нет
— Анимируемое: нет
— Initial: none
— Примечания:

<keyframes-name> — идентификатор @keyframes.

● `animation-duration`

— Синтаксис: <time>#
— Наследуется: нет
— Анимируемое: нет
— Initial: 0s
— Примечания:

0s — мгновенный переход к 100%.

● `animation-timing-function`

— Синтаксис: как у transition-timing-function, плюс frames( <integer> ) (устаревшее)
— Наследуется: нет
— Анимируемое: нет
— Initial: ease

● `animation-delay`

— Синтаксис: <time>#
— Наследуется: нет
— Анимируемое: нет
— Initial: 0s

● `animation-iteration-count`

— Синтаксис: [ <number> | infinite ]#
— Наследуется: нет
— Анимируемое: нет
— Initial: 1
— Примечания:

infinite — бесконечный цикл.

● `animation-direction`

— Синтаксис:

[ normal | reverse | alternate | alternate-reverse ]#

— Наследуется: нет
— Анимируемое: нет
— Initial: normal
— Примечания:

alternate — чётные итерации проигрываются в обратном направлении.

● `animation-fill-mode`

— Синтаксис:

[ none | forwards | backwards | both ]#

— Наследуется: нет
— Анимируемое: нет
— Initial: none
— Примечания:

forwards — сохраняет стиль 100% после завершения.
backwards — применяет стиль 0% сразу при animation-delay > 0.
both = forwards + backwards.

● `animation-play-state`

— Синтаксис: [ running | paused ]#
— Наследуется: нет
— Анимируемое: нет
— Initial: running
— Примечания:

Можно управлять через JS или :hover.

● `@keyframes`

— Синтаксис:

@keyframes <keyframes-name> {  
  [ from | to | <percentage> ] { <declaration-list> }*  
}

— Примечания:

from = 0%, to = 100%.
Можно несколько точек: 0%, 30%, 100%.
Нельзя использовать !important внутри.
Не наследуется.
Запрещено объявлять внутри @media, @supports, @layer.

● `animation-timeline` (CSS Scroll-Linked Animations)

— Синтаксис:

auto | <timeline-name> | <scroll-timeline>

— Подтипы:

scroll() — привязка к скроллу контейнера
view() — привязка к видимости элемента (intersection-based)
— Пример:

@keyframes slide {
  to { transform: translateX(200px); }
}
.target {
  animation: slide linear forwards;
  animation-timeline: scroll(root);
}

— Поддержка: Chrome 115+, Safari 17.4+, Firefox пока нет (2025).
— Наследуется: нет
— Анимируемое: нет
— Initial: auto

● `animation-range`

— Синтаксис: [ <start-name> | <start-offset> ] [ <end-name> | <end-offset> ]?
— Используется с animation-timeline: view()
— Пример: animation-range: entry 0% cover 50%
— Позволяет задавать диапазон прогресса анимации в зависимости от видимости.

**Трансформации (`transform-*`)**

● `transform`

— Синтаксис: none | <transform-list>
— <transform-function> =

2D: translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skew(), skewX(), skewY()
3D: translateZ(), translate3d(), scaleZ(), scale3d(), rotateX(), rotateY(), rotateZ(), rotate3d(), perspective()
Матрицы: matrix(), matrix3d()
— Наследуется: нет
— Анимируемое: да
— Initial: none
— Примечания:
Трансформации применяются после layout, не влияют на flow.
transform создаёт stacking context и containing block для absolutely positioned потомков.

● `transform-origin`

— Синтаксис: [ <length-percentage> | left | center | right | top | bottom ]{1,3}
— Третье значение — для Z-оси (<length>)
— Наследуется: нет
— Анимируемое: да
— Initial: 50% 50% 0
— Примечания:

Проценты в первых двух значениях — относительно размеров элемента, не родителя.

● `transform-style`

— Синтаксис: flat | preserve-3d
— Наследуется: нет
— Анимируемое: нет
— Initial: flat
— Примечания:

preserve-3d — дочерние элементы сохраняют 3D-позиционирование в пространстве (иначе «сплющиваются»).
Создаёт stacking context.

● `perspective`

— Синтаксис: none | <length>
— Наследуется: нет
— Анимируемое: да
— Initial: none
— Примечания:

Применяется к контейнеру, влияет на transform: perspective() у потомков.
Меньшее значение → сильнее искажение.

● `perspective-origin`

— Синтаксис: как transform-origin, но без Z
— Наследуется: нет
— Анимируемое: да
— Initial: 50% 50%

● `backface-visibility`

— Синтаксис: visible | hidden
— Наследуется: нет
— Анимируемое: нет
— Initial: visible
— Примечания:

При hidden — оборотная сторона элемента (при rotateY(180deg)) не отрисовывается.
Полезно для flip-анимаций.

● `will-change`

— Синтаксис:

auto | scroll-position | contents | [ <animateable-feature> ]#

— <animateable-feature> = transform, opacity, filter, left, top, и т.д.
— Наследуется: нет
— Анимируемое: нет
— Initial: auto
— Примечания:

Подсказка браузеру для оптимизации.
Не используйте массово — может вызвать оверхед.
Не меняет поведение, только производительность.

Flexbox

● Контейнер (`display: flex | inline-flex`)

● `flex-direction`

— Синтаксис: row | row-reverse | column | column-reverse
— Наследуется: нет
— Анимируемое: нет
— Initial: row

● `flex-wrap`

— Синтаксис: nowrap | wrap | wrap-reverse
— Наследуется: нет
— Анимируемое: нет
— Initial: nowrap

● `flex-flow`

— Синтаксис: <flex-direction> || <flex-wrap>
— Сокращённая запись для двух выше.

● `justify-content`

— Синтаксис:

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

<content-distribution> = space-between | space-around | space-evenly | stretch  
<content-position> = center | start | end | flex-start | flex-end

— Наследуется: нет
— Анимируемое: нет
— Initial: normal
— Примечания:

normal = flex-start для flex.
stretch — растягивает элементы по главной оси (если flex-basis: auto и flex-grow: 0).

● `align-items`

— Синтаксис:

normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]  
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end  
<baseline-position> = baseline | first baseline | last baseline

— Наследуется: нет
— Анимируемое: нет
— Initial: normal
— Примечания:

normal = stretch для flex.
stretch — растягивает по поперечной оси до размера контейнера.

● `align-content`

— Синтаксис:

normal | <content-distribution> | <overflow-position>? [ <content-position> ]

— Применяется только при flex-wrap: wrap и align-items ≠ stretch
— Наследуется: нет
— Анимируемое: нет
— Initial: normal
— Примечания:

Управляет распределением линий по поперечной оси.

● `row-gap`, `column-gap`, `gap`

— Синтаксис: <length-percentage>
— Наследуется: нет
— Анимируемое: да
— Initial: normal (≈ 0)
— Примечания:

В flex — gap = row-gap (поперечная ось) + column-gap (главная ось).
Не влияет на justify-content: space-*.

● Элементы (`flex-*`, `align-self`, `order`)

● `flex` (сокращённая форма)

— Синтаксис:

none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

— Initial: 0 1 auto
— Примечания:

flex: 1 = 1 1 0% (на практике — «заполнить доступное пространство»)
flex: auto = 1 1 auto
flex: none = 0 0 auto

● `flex-grow`

— Синтаксис: <number>
— Наследуется: нет
— Анимируемое: да
— Initial: 0

● `flex-shrink`

— Синтаксис: <number>
— Наследуется: нет
— Анимируемое: да
— Initial: 1

● `flex-basis`

— Синтаксис: content | <width>
— <width> = auto, <length>, <percentage>, min-content, max-content, fit-content()
— Наследуется: нет
— Анимируемое: да
— Initial: auto
— Примечания:

content — размер по контенту (аналог width: max-content, но с учётом flex-алгоритма).

● `align-self`

— Синтаксис: как align-items, плюс auto
— Наследуется: нет
— Анимируемое: нет
— Initial: auto
— Примечания:

auto — берёт значение из align-items родителя.

● `order`

— Синтаксис: <integer>
— Наследуется: нет
— Анимируемое: нет
— Initial: 0
— Примечания:

Меняет визуальный порядок, но не порядок в DOM (влияет на доступность!).
Отрицательные значения допустимы.

Grid

● Контейнер (`display: grid | inline-grid`)

● `grid-template-rows`, `grid-template-columns`

— Синтаксис:

none | <track-list> | <auto-track-list>  
<track-size> = <length> | <percentage> | min-content | max-content | fit-content( [ <length> | <percentage> ] ) | auto | minmax( <inflexible-breadth>, <track-breadth> ) | fit-content( <length-percentage> )  
<line-name> = [ <custom-ident> ]*

— Пример: grid-template-columns: [start] 1fr [mid] 200px [end];
— Наследуется: нет
— Анимируемое: частично (только при grid-template-areas или grid с subgrid — нет)
— Initial: none

● `grid-template-areas`

— Синтаксис:
none | <string>+
— Пример:

grid-template-areas: 
  "header header"
  "nav    main"
  "footer footer";

— Наследуется: нет
— Анимируемое: нет
— Initial: none
— Примечания:

. — пустая ячейка.
Имена должны быть сплошными (без пробелов).

● `grid-template`

— Синтаксис:

none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

— Сокращённая запись для grid-template-rows, grid-template-columns, grid-template-areas.

● `grid-auto-rows`, `grid-auto-columns`

— Синтаксис: <track-size>+
— Наследуется: нет
— Анимируемое: нет
— Initial: auto
— Примечания:

Размер неявных дорожек (для элементов вне grid-template-*).

● `grid-auto-flow`

— Синтаксис: [ row | column ] || dense
— Наследуется: нет
— Анимируемое: нет
— Initial: row
— Примечания:

dense — позволяет «затыкать дыры» (алгоритм пытается заполнить пробелы).

● `grid`

— Синтаксис:

<grid-template> | <grid-template-rows> / [ <grid-template-columns> | <track-list> ]

— Полная сокращённая форма.

● `row-gap`, `column-gap`, `gap`

— Как в flex, но:

gap = row-gap (вертикально) + column-gap (горизонтально).
Поддержка в grid — полная.

● `justify-items`, `align-items`

— Синтаксис:

normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> ]

— Наследуется: нет
— Анимируемое: нет
— Initial: normal (stretch для grid)
— Примечания:

justify-items — по главной оси (строки), align-items — по поперечной (столбцы).
Для grid normal = stretch.

● `justify-content`, `align-content`

— Управляет выравниванием сетки целиком внутри контейнера.
— Синтаксис: как в flex, плюс safe center, unsafe center (для избежания overflow).

● `place-items`, `place-content`, `place-self`

— place-items = align-items + justify-items
— place-content = align-content + justify-content
— place-self = align-self + justify-self
— Наследуется: нет
— Анимируемое: нет
— Initial: зависит от компонентов.

● Элементы

● `grid-row-start`, `grid-column-start`, `grid-row-end`, `grid-column-end`

— Синтаксис:

auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

— Пример: grid-column: 2 / span 3;
— Наследуется: нет
— Анимируемое: нет
— Initial: auto

● `grid-row`, `grid-column`, `grid-area`

— grid-row = grid-row-start / grid-row-end
— grid-column = grid-column-start / grid-column-end
— grid-area = grid-row-start / grid-column-start / grid-row-end / grid-column-end
— Пример: grid-area: header; — если header объявлено в grid-template-areas.

● `justify-self`, `align-self`

— Синтаксис: как justify-items, align-items, плюс auto
— auto — наследует от контейнера.

**Контейнерные запросы (`@container`, `container-*`)**

● `container-type`

— Синтаксис: normal | size | inline-size
— Наследуется: нет
— Анимируемое: нет
— Initial: normal
— Примечания:

size — контейнер отслеживает ширину и высоту.
inline-size — только ширину в inline-направлении (чаще всего — горизонтальную).
Требует display: flow-root, overflow: hidden, или другого BFC-создателя.

● `container-name`

— Синтаксис: [ <custom-ident> ]#
— Наследуется: нет
— Анимируемое: нет
— Initial: none
— Примечания:

Позволяет именовать контейнер для точечного запроса.

● `container`

— Синтаксис: [ <'container-name'>? <'container-type'> ]#
— Сокращённая запись.

● `@container`

— Синтаксис:

@container [ <container-name> ]? [ <container-query> ]? { <stylesheet> }  
<container-query> = ( <feature-name>: <feature-value> )

— Возможные условия:

min-width, max-width, width
min-height, max-height, height
min-inline-size, max-inline-size, inline-size
min-block-size, max-block-size, block-size
— Пример:

@container card (min-width: 300px) {
  .title { font-size: 1.5rem; }
}

— Примечания:

Запрос идёт по ближайшему предку с container-type ≠ normal.
Можно использовать container-name для точного указания.
Поддержка: Chrome 105+, Safari 16+, Firefox 110+ (2025).

● `container-query-affected` (экспериментально)

— Псевдокласс :container() — пока не стандартизирован.
— Вместо него используйте @container.

CSS Houdini

● `@property` (CSS Properties and Values API)

— Синтаксис:

@property --custom-prop {
  syntax: "<length> | <percentage>";
  inherits: true;
  initial-value: 0px;
}

— Параметры:

syntax — грамматика (по CSS Typed OM)
inherits — true/false
initial-value — обязательное начальное значение
— Примечания:
Позволяет анимировать кастомные свойства.
Позволяет валидировать значения (например, syntax: "<integer>").
Поддержка: Chrome, Edge, Safari 16.4+, Firefox — нет (2025).

● `paint()` (CSS Painting API)

— Используется в background-image, border-image, mask-image и др.
— Пример:

background-image: paint(checkerboard);

— Требует регистрации через JS:

CSS.paintWorklet.addModule('checkerboard.js');

— Поддержка: Chrome, Edge. Firefox — частично.

● `@keyframes` с `@property`

— Можно анимировать --custom-prop, если оно объявлено через @property.

● `layout()` (CSS Layout API — experimental)

— Позволяет создавать кастомные layout-алгоритмы (аналог flex/grid).
— Используется через display: layout(custom-layout).
— Поддержка: только Chrome (флаг #enable-experimental-web-platform-features).
— Не рекомендуется для production.

Слои (`@layer`) и области видимости (`@scope`)

● `@layer`

— Синтаксис:
@layer <layer-name>?;
@layer <layer-name> { <stylesheet> }
— Пример:

@layer reset, defaults, components, utilities;
@layer components {
  .card { padding: 1rem; }
}

— Примечания:

Слои упорядочены по порядку первого объявления.
Специфичность внутри слоя не влияет на приоритет между слоями.
@layer может быть вложен: @layer theme.dark { ... }
Поддержка: Chrome 99+, Safari 15.4+, Firefox 97+.

● `@scope` (CSS Nesting Module + Scope)

— Синтаксис (Scope):

@scope (.article) to (.aside) {
  p { color: blue; } /* применяется только внутри .article и до .aside */
}

— to() — граница области (необязательно).
— Поддержка: экспериментально (Chrome 118+, флаг).
— Альтернатива :scope и BEM.

● `@starting-style` (CSS Transitions from Initial Values)

— Синтаксис:

@starting-style {
  --my-var: 0;
}

— Позволяет задать начальное состояние для transition при первом render.
— Поддержка: Chrome 117+, Safari 17.4+.

Печать (`@page`, `orphans`, `widows`)

● `@page`

— Синтаксис:

@page <page-selector-list>? { <page-margin-boxes>? <declaration-list> }

— Пример:

@page :first {
  margin: 2in;
}
@page :left {
  @top-left {
    content: "Глава 1";
  }
}

— Поддерживаемые свойства внутри:

margin, size, marks, bleed, crop, cross, background, box-decoration-break
— Примечания:
size: A4 portrait или size: 8.5in 11in.
marks: crop cross — метки обрезки.

● `orphans`, `widows`

— Синтаксис: <integer>
— Наследуется: да
— Анимируемое: нет
— Initial: 2
— Примечания:

orphans — минимальное число строк абзаца внизу страницы.
widows — вверху страницы.
Игнорируется браузерами при отображении на экране.

● `page-break-before`, `page-break-after`, `page-break-inside`

— Устаревшие. Используйте:

break-before: page | column | region | always | avoid | left | right | recto | verso
break-after — аналогично
break-inside: auto | avoid | avoid-page | avoid-column | avoid-region
— Поддержка: полная.

● `marks`, `bleed`, `crop`

— Используются в @page:

bleed: 3mm — область обрезки
marks: crop cross — метки
— Примечания:
Поддержка — только в PDF-рендерерах (Prince, Antenna House), не в браузерах.

Интерактивность и указатели

● `cursor`

— Синтаксис:

[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]

— Наследуется: да
— Анимируемое: нет
— Initial: auto
— Примечания:

<url> — кастомный курсор (.cur, .png). Координаты — точка «горячей» зоны.
grab/grabbing — для draggable-элементов.
none — полностью скрывает курсор (осторожно: ухудшает UX).

● `pointer-events`

— Синтаксис:

auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all

— Наследуется: нет
— Анимируемое: нет
— Initial: auto
— Примечания:

Для HTML: только auto и none имеют эффект.
none — игнорирует все pointer-события (включая :hover, :active).
Работает даже при visibility: visible.

● `touch-action`

— Синтаксис:

auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

— Наследуется: нет
— Анимируемое: нет
— Initial: auto
— Примечания:

Управляет поведением жестов на сенсорных устройствах.
manipulation = pan-x pan-y pinch-zoom (оптимизация для кликов/скролла).
Запрещает браузерные жесты (например, touch-action: none отключает pull-to-refresh).

● `overscroll-behavior`

— Синтаксис:

[ contain | none | auto ]{1,2}

— Наследуется: нет
— Анимируемое: нет
— Initial: auto
— Примечания:

Управляет «перескроллом» (rubber-band effect) у корневого и вложенных прокручиваемых контейнеров.
contain — останавливает распространение scroll-событий.
Полезно для модальных окон, карт, каруселей.

● `user-select`

— Синтаксис:

auto | text | none | contain | all

— Наследуется: да
— Анимируемое: нет
— Initial: auto
— Примечания:

none — запрещает выделение текста (но не Ctrl+A).
contain — выделение ограничено элементом (не выходит за его границы).
all — одно нажатие выделяет весь контент элемента.
Не влияет на доступность (скринридеры игнорируют).

● `user-modify` (устаревшее, WebKit-only)

— Синтаксис:

read-only | read-write | read-write-plaintext-only

— Наследуется: да
— Анимируемое: нет
— Initial: read-only
— Примечания:

Устарело. Используйте contenteditable или input/textarea.

Прокрутка

● `scroll-behavior`

— Синтаксис: auto | smooth
— Наследуется: да
— Анимируемое: нет
— Initial: auto
— Примечания:

Влияет на window.scrollTo(), element.scrollIntoView(), и якорные ссылки (#id).
smooth — анимированный скролл (длительность и easing не настраиваются в CSS).

● `scrollbar-*` (только WebKit/Blink)

— Свойства:

scrollbar-width (стандартное, см. ниже)
scrollbar-color (стандартное)
-webkit-scrollbar, -webkit-scrollbar-track, -webkit-scrollbar-thumb, -webkit-scrollbar-button, -webkit-scrollbar-corner
— Пример:

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; }

— Примечания:

Не стандартизировано. Firefox использует scrollbar-width/scrollbar-color.
Изменение размера скролл-бара может вызвать reflow.

● `scrollbar-width` (стандарт, Firefox/Chrome 123+)

— Синтаксис: auto | thin | none
— Наследуется: нет
— Анимируемое: нет
— Initial: auto
— Примечания:

none — полностью скрывает скроллбар (но контент остаётся прокручиваемым).
Поддержка: Firefox (с 64), Chrome 123+, Safari — нет.

● `scrollbar-color` (стандарт)

— Синтаксис: auto | <color>{2}
— Второй цвет — track, первый — thumb.
— Наследуется: нет
— Анимируемое: да
— Initial: auto
— Поддержка: Firefox, Chrome 123+.

● `scroll-padding`, `scroll-margin`

— Синтаксис: как padding/margin, но для скролла
— Наследуется: нет
— Анимируемое: да
— Initial: 0
— Примечания:

scroll-padding — внутренний отступ от края viewport при прокрутке к якорю.
scroll-margin — внешний отступ элемента при прокрутке к нему.
Используется для компенсации фиксированных шапок:
```
:target { scroll-margin-top: 60px; }
```

● `scroll-snap-*` (CSS Scroll Snap Module Level 1)

● `scroll-snap-type`

— Синтаксис:

none | [ x | y | block | inline | both ] [ mandatory | proximity ]

— Наследуется: нет
— Анимируемое: нет
— Initial: none
— Примечания:

Применяется к контейнеру.
mandatory — строго привязывает к точке; proximity — мягче.

● `scroll-snap-align`

— Синтаксис:

[ none | start | end | center ]{1,2}

— Наследуется: нет
— Анимируемое: нет
— Initial: none
— Примечания:

Применяется к дочерним элементам.
Определяет, какая часть элемента «прилипает» к контейнеру.

● `scroll-snap-stop`

— Синтаксис: normal | always
— Наследуется: нет
— Анимируемое: нет
— Initial: normal
— Примечания:

always — принудительно останавливает скролл на элементе (даже при быстром свайпе).

● `scroll-padding-`, `scroll-margin-`

— Также участвуют в snap-поведении.

● `scroll-timeline` (CSS Scroll-Linked Animations)

— Синтаксис:

scroll( <'scroll-timeline-name'>? <'scroll-direction'>? <'scroll-offset'>? )

— Используется в animation-timeline.
— Пример:

.target {
  animation: slide linear;
  animation-timeline: scroll(root block);
}

— Поддержка: Chrome 115+, Safari 17.4+, Firefox — нет.

● `view-timeline`

— Аналогично, но привязан к видимости элемента (view()).
— Использует animation-range.

Доступность

● `forced-color-adjust`

— Синтаксис: auto | none
— Наследуется: да
— Анимируемое: нет
— Initial: auto
— Примечания:

При none отключает замену цветов в Windows HC Mode.
Не отключает prefers-contrast.

● `prefers-reduced-motion`

— Медиа-запрос:

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

— Примечания:

Уважайте предпочтения пользователя — отключайте несущественные анимации.
Не отключайте функциональные переходы (например, opacity для появления модалки).

● `prefers-contrast`

— Синтаксис:

@media (prefers-contrast: more | less | custom | no-preference)

— Примечания:

more — пользователь запросил повышенный контраст.
Используйте для усиления границ, уменьшения прозрачности.

● `prefers-color-scheme`

— Синтаксис:

@media (prefers-color-scheme: light | dark)

— Примечания:

Синхронизируйте с color-scheme.

● `speak` (CSS Speech Module — deprecated)

— Синтаксис: auto | none | normal
— Наследуется: да
— Анимируемое: нет
— Initial: auto
— Примечания:

Игнорируется всеми современными браузерами.
Используйте aria-hidden, role, aria-live для управления скринридерами.

● `nav-*` (устаревшие, не реализованы)

— nav-up, nav-right, nav-down, nav-left
— Примечания:

Не поддерживаются. Для keyboard navigation используйте tabindex, :focus-visible, focus-trap.

● `inert` (атрибут, не CSS-свойство)

— Аналог pointer-events: none; user-select: none; + отключение фокуса и скринридеров.
— Реализуется через :inert в будущем (пока только как атрибут).

Системный интерфейс и поведение

● `appearance`

— Синтаксис:

none | auto | <compat-auto> | button | checkbox | listbox | meter | progress-bar | push-button | radio | searchfield | slider-horizontal | ...

— Наследуется: нет
— Анимируемое: нет
— Initial: auto
— Примечания:

appearance: none — сброс стилей нативных элементов (<input>, <select>).
auto — позволяет UA применять стили.
Поддержка textfield, textarea в Safari требует -webkit-appearance.

● `accent-color`

— Синтаксис: auto | <color>
— Наследуется: да
— Анимируемое: да
— Initial: auto
— Примечания:

Меняет цвет акцентов у checkbox, radio, range, progress, meter.
auto — системный цвет (синий в Windows, фиолетовый в macOS).
Поддержка: Chrome 93+, Firefox 92+, Safari 15.4+.

● `caret-color`

— Синтаксис: auto | <color>
— Наследуется: да
— Анимируемое: да
— Initial: auto
— Примечания:

Цвет курсора в editable-элементах (<input>, contenteditable).
auto — системный (обычно color или text).

● `resize`

— Синтаксис:

none | both | horizontal | vertical | block | inline

— Наследуется: нет
— Анимируемое: нет
— Initial: none
— Примечания:

Работает только при overflow ≠ visible.
block/inline — логические направления.

● `content-visibility`

— Синтаксис:

visible | auto | hidden

— Наследуется: нет
— Анимируемое: нет
— Initial: visible
— Примечания:

auto — откладывает render содержимого, пока оно не в viewport (оптимизация).
Требует contain: style layout paint (автоматически применяется).
Осторожно: может нарушать offsetHeight, getBoundingClientRect().
Поддержка: Chrome 85+, Edge.

● `contain`

— Синтаксис:

none | strict | content | [ size || layout || style || paint ]

— Наследуется: нет
— Анимируемое: нет
— Initial: none
— Примечания:

strict = size layout style paint
content = layout style paint
Используется для изоляции элемента (оптимизация, избегание layout thrashing).
contain: inline-size — экспериментально (Chrome 111+).

Устаревшие и нестандартные свойства

Свойство	Статус	Альтернатива
`zoom`	Нестандартное (IE/WebKit)	`transform: scale()` + `transform-origin`
`filter` (IE-синтаксис `progid:`)	Устарело	`filter: blur()`, `url()`
`-ms-interpolation-mode`	Устарело (IE)	`image-rendering: crisp-edges`
`behavior`	Устарело (IE)	JS или CSS Houdini
`ime-mode`	Устарело	`inputmode` (HTML-атрибут)
`scrollbar-3dlight-color`, `-face-color` и др.	Устарело (IE)	`-webkit-scrollbar-*` или JS-кастомизация
`box-reflect`	Устарело (WebKit)	`::after` + `mask`/`-webkit-box-reflect` (ограниченно)

● `-webkit-text-fill-color`, `-webkit-text-stroke`

— Синтаксис:
-webkit-text-fill-color: <color>
-webkit-text-stroke: <length> <color>
— Примечания:

Поддержка: WebKit/Blink.

Для совместимости:

color: transparent;
-webkit-text-fill-color: red;
-webkit-text-stroke: 1px black;

● `image-orientation`

— Синтаксис: from-image | <angle> | flip
— Наследуется: да
— Анимируемое: да
— Initial: from-image
— Примечания:

Используется для коррекции EXIF-ориентации изображений.
Поддержка: Firefox, Safari. Chrome — нет.

Перспективные модули (на ноябрь 2025 г.)

● CSS Anchor Positioning (Level 1)

— Свойства:

anchor-name: --my-anchor
anchor-scope: root | <selector>
position: anchor(<anchor-name> <side>? <offset>?)
top: anchor(--my-anchor bottom)
— Примечания:
Позволяет позиционировать элемент относительно любого другого (не только предка).
Поддержка: Chrome 116+, Safari 17.4+, Firefox — в разработке.

● CSS Nesting (Level 1)

— Синтаксис:

.parent {
  color: blue;
  & .child { color: red; }
  &:hover { opacity: 0.8; }
}

— Примечания:

Полная поддержка: Chrome 123+, Safari 17.4+, Firefox 122+.
& обязателен.
Можно вкладывать @media, @supports.

● CSS View Transitions API (Level 1)

— Не CSS-свойство, но влияет на стили:

::view-transition, ::view-transition-group(), ::view-transition-image-pair(), ::view-transition-old(), ::view-transition-new()
— Пример:

::view-transition-old(root) {
  animation: 300ms ease-out both fade-out;
}

— Примечания:

Позволяет анимировать переходы между состояниями DOM.
Поддержка: Chrome 111+, Safari 17.4+, Firefox — experimental.

● CSS Color 5

— Новые функции:

color-mix(in lch, red 30%, blue)
color-contrast(red vs white, black, gray)
color-adjust(red blackness(20%))
lab(), lch(), oklab(), oklch() — с поддержкой прозрачности: lch(50% 50 200 / 0.5)
— Примечания:
oklch() — perceptually uniform (лучше для градиентов).
Поддержка: Safari 16.4+, Chrome 111+, Firefox 117+.

● CSS Nesting + Scoping (`@scope`)

— Синтаксис:

@scope (.card) to (.footer) {
  .title { font-weight: bold; } /* только внутри .card и до .footer */
}

— Примечания:

to() — граница действия.
Поддержка: Chrome 121+ (experimental).

● CSS `field-sizing` (Level 1)

— Синтаксис: content | fixed
— Примечания:

field-sizing: content — <input> и <textarea> растягиваются по контенту (как inline-block).
Поддержка: Chrome 124+ (экспериментально).

— HTML-атрибут popover="auto | manual" + CSS:

:popover-open — псевдокласс
popover: auto | manual (в будущем)
— Примечания:
Заменяет кастомные модалки/тултипы.
Поддержка: Chrome 114+, Safari 17.4+.

Псевдоклассы

● Общие правила

Синтаксис: :псевдокласс или ::псевдоэлемент
Специфичность:
- Псевдоклассы — как класс (0,1,0)
- Псевдоэлементы — как элемент (0,0,1)
Нельзя комбинировать :not() с псевдоэлементами.

● Стандартные псевдоклассы (Selectors Level 4+)

Псевдокласс	Условие	Примечания
`:any-link`	`<a href>`, `<area href>`, `<link href>`	Заменяет `:link, :visited`
`:link`, `:visited`	Посещённость ссылки	`:visited` ограничен из соображений приватности
`:local-link`	Ссылка ведёт в тот же origin	Экспериментально (Chrome 112+)
`:target`	Элемент с `id`, совпадающим с `#fragment`
`:target-within`	Элемент содержит `:target`	Уровень 4
`:scope`	Текущий scope (обычно `:root`, или внутри `querySelector(':scope > …')`)
`:dir(ltr)`, `:dir(rtl)`	Направление текста	Аналог `[dir="ltr"]`, но учитывает наследование
`:lang(en)`, `:lang(zh, ja)`	Язык элемента (по `lang`, `xml:lang`, метаданным)	Поддерживает диапазоны: `:lang(en-GB)`
`:blank`	Пустой editable-элемент (`value === ""`)	Уровень 4; поддержка: частичная
`:placeholder-shown`	`<input>`/`<textarea>` с placeholder и пустым значением
`:user-invalid`, `:user-valid`	Валидность после взаимодействия	Отличается от `:invalid`/`:valid` (последние — сразу после загрузки)
`:modal`	Элемент внутри `<dialog open>`	Поддержка: Chrome 101+, Safari 15.4+
`:popover-open`	Элемент с `popover="auto"` и открыт	CSS Popover API
`:open`, `:closed`	`<details>`, `<dialog>`	`:open` = `[open]`, но работает и без атрибута в будущем
`:playing`, `:paused`	`<video>`, `<audio>`	Экспериментально (Safari)
`:future`, `:past`	Временные метки в `<video>`	Для timeline UI

● Взаимодействие

Псевдокласс	Условие
`:hover`	Указатель над элементом
`:active`	Нажатие (mousedown/mouseup или touchstart/touchend)
`:focus`	Фокус (клавиатура, программно)
`:focus-visible`	Фокус только при keyboard navigation
`:focus-within`	Элемент или его потомок в фокусе
`:drop`, `:drop-active`, `:drop-valid`, `:drop-invalid`	Drag-and-drop состояния

● Формы

Псевдокласс	Условие
`:enabled`, `:disabled`	Состояние `disabled`
`:read-only`, `:read-write`	`readonly` или `contenteditable`
`:required`, `:optional`	Наличие `required`
`:valid`, `:invalid`	Валидность по constraint validation
`:in-range`, `:out-of-range`	Для `input[type=number]` с `min`/`max`
`:indeterminate`	`checkbox`, `radio`, `progress` в промежуточном состоянии
`:default`	Элемент по умолчанию (`<input type=radio checked>`)
`:checked`	`checkbox`, `radio`, `option:selected`
`:nth-child(n [of S]?)`, `:nth-last-child()`	Селектор `S` — фильтр (Level 4)
`:nth-of-type(n [of S]?)` — аналогично
`:has(S)`	Элемент, содержащий `S`
`:is(S1, S2, …)`, `:where(S1, S2, …)`	Группировка селекторов

● Дерево

Псевдокласс	Условие
`:empty`	Нет дочерних узлов (включая текст)
`:only-child`, `:only-of-type`	Единственный потомок/типа
`:first-child`, `:last-child`, `:first-of-type`, `:last-of-type`	Позиция среди братьев
`:root`	Корневой элемент (`<html>`)
`:host`, `:host()`	В Shadow DOM — хост-элемент
`:host-context()`	Хост в контексте селектора

● Экспериментальные (2025)

Псевдокласс	Условие	Статус
`:popover-open`	`popover="auto"` открыт	Draft
`:modal`	`<dialog open>`	Draft
`:user`	Пользовательский контекст (например, `:user(dark-mode)`)	Concept
`:state()`	Кастомные состояния (`--state: active`)	Houdini State API (не реализовано)

Псевдоэлементы

Псевдоэлемент	Применяется к	Примечания
`::before`, `::after`	Элементы с `content`	`content: normal` = `none` для `::before/::after`
`::marker`	`<li>`, `<summary>`	Заменяет `list-style-*` для кастомизации маркера
`::selection`	Выделенный текст	Ограничен: `color`, `background`, `cursor`, `caret-color`
`::placeholder`	`<input>`, `<textarea>`	Заменяет устаревший `::-webkit-input-placeholder`
`::file-selector-button`	`<input type=file>`	Кнопка выбора файла
`::backdrop`	`<dialog>`, `:modal`	Фон под модальным окном
`::cue`, `::cue-region`	`<video>`, `<audio>`	Для WebVTT-субтитров
`::first-letter`, `::first-line`	Блочные контейнеры	Не наследуют `display`
`::grammar-error`, `::spelling-error`	Текст с ошибками	Поддержка: Safari, частично Chrome
`::target-text`	Текст, соответствующий `#:~:text=`	Поддержка: Chrome 80+, Edge
`::view-transition`, `::view-transition-group()`, `::view-transition-image-pair()`, `::view-transition-old()`, `::view-transition-new()`	View Transitions API	Chrome 111+
`::slotted()`	В Shadow DOM — распределённые узлы
`::part()`	Экспортированные части из Shadow DOM (`part="name"`)
`::cue()`	Субтитры с фильтром	`::cue(.highlight)`

Медиа-запросы

● Синтаксис

@media [not | only] <media-type> [and <media-condition>] {
  /* rules */
}

● Типы медиа (редко используются, кроме `print`)

all (по умолчанию)
print, screen, speech
not, only — для совместимости со старыми браузерами

● Медиа-характеристики (Media Queries Level 5)

● Размеры и ориентация

Характеристика	Значения	Примечания
`width`, `height`	`<length>`	Размер viewport
`min-width`, `max-width`
`aspect-ratio`	`<ratio>` (например, `16/9`)
`orientation`	`portrait	landscape`
`display-mode`	`fullscreen	standalone

● Разрешение и плотность

Характеристика	Значения
`resolution`	`<resolution>` (`dpi`, `dpcm`, `dppx`)
`min-resolution`
`scan`	`interlace

● Цвет

Характеристика	Значения
`color`	`<integer>` (бит на канал)
`min-color`
`color-index`	`<integer>`
`monochrome`	`<integer>`
`prefers-color-scheme`	`light
`prefers-contrast`	`no-preference
`prefers-reduced-motion`	`no-preference
`prefers-reduced-transparency`	`no-preference
`forced-colors`	`none

● Интерактивность

Характеристика	Значения
`pointer`	`none
`any-pointer`
`hover`	`none
`any-hover`
`scripting`	`none

● Контейнерные запросы

Характеристика	Значения
`container-type`	`size
`container-width`, `container-height`	`<length>`

● Особые

Характеристика	Значения
`update`	`none
`overflow-block`, `overflow-inline`	`none

● Логические операторы

and — все условия истинны
, (запятая) — OR
not — инверсия
() — группировка (Level 4)
Пример:

@media (width >= 600px) and (hover: hover) { … }

● Поддержка

prefers-reduced-motion, prefers-color-scheme — повсеместно
prefers-contrast — Safari 15.4+, Chrome 108+, Firefox 103+
dynamic-range (новое в Level 5) — HDR-дисплеи (standard | high)

Функции CSS

● Математические

Функция	Синтаксис	Примечания
`calc()`	`calc(<calc-sum>)`	Поддерживает `+`, `-`, `*`, `/`, `min()`, `max()`, `clamp()` внутри
`min()`	`min(<calc-sum>#)`	Возвращает минимальное значение
`max()`	`max(<calc-sum>#)`	Максимальное
`clamp()`	`clamp(<calc-sum>, <calc-sum>, <calc-sum>)`	`clamp(min, val, max)`
`round()`, `mod()`, `rem()`	`round(<rounding-strategy>?, <calc-sum>, <calc-sum>)`	Level 4; поддержка: Chrome 111+

● Цветовые

Функция	Синтаксис	Примечания
`rgb()`, `rgba()`	`rgb(255 0 0 / 0.5)`	Новый синтаксис (без запятых)
`hsl()`, `hsla()`	`hsl(0 100% 50% / 0.5)`
`hwb()`	`hwb(0 0% 0% / 1)`	Hue-Whiteness-Blackness
`lab()`, `lch()`	`lab(50% 40 20 / 1)`	Perceptually uniform
`oklab()`, `oklch()`	`oklch(0.6 0.1 200 / 1)`	Улучшенная uniformity
`color()`	`color(display-p3 1 0 0)`	Для цветовых пространств
`color-mix()`	`color-mix(in lch, red 30%, blue)`	Level 5
`color-contrast()`	`color-contrast(red vs white, black)`	Level 5
`color-adjust()`	`color-adjust(red lightness(+20%))`	Level 5

● Изображения

Функция	Синтаксис	Примечания
`url()`	`url("path.svg")`
`image()`	`image("a.png", blue)`	Fallback цвет/изображение
`element()`	`element(#chart)`	Render-дерево другого элемента (Firefox)
`cross-fade()`	`cross-fade(20% url(a.png), url(b.png))`
`linear-gradient()`, `radial-gradient()`, `conic-gradient()`
`paint()`	`paint(checkerboard)`	Houdini Painting API

● Прочие

Функция	Синтаксис	Примечания
`var()`	`var(--name, fallback)`	Fallback может быть другим `var()`
`env()`	`env(safe-area-inset-top)`	Системные переменные (iOS/Android)
`attr()`	`attr(data-size px)`	Только в `content`, `counter-reset` (и в будущем — везде)
`counter()`, `counters()`	`counter(section, decimal)`	Для нумерации
`toggle()`	`toggle(disc, circle, square)`	Устарело

Системные цвета и переменные

● Системные цвета (CSS System Colors)

Canvas, CanvasText
LinkText, VisitedText, ActiveText
Field, FieldText
ButtonFace, ButtonText, ButtonBorder
SelectedItem, SelectedItemText
Mark, MarkText
AccentColor, AccentColorText (новые в CSS UI 4)
— Рекомендуется использовать вместо #0000ff, #000080.

● Системные переменные (`env()`)

Переменная	Назначение
`safe-area-inset-top` и др.	Безопасные отступы (iOS notch)
`titlebar-area-x`, `-y`, `-width`, `-height`	Область тайтлбара (PWA)
`keyboard-inset-*`	Клавиатура на iOS

● Кастомные свойства

Имена чувствительны к регистру: --main-color ≠ --Main-Color
Значение должно быть валидным токеном (не обязательно валидным значением свойства).
Валидация происходит при применении (через var()).
@property позволяет строго типизировать (см. часть 3).

CSSOM и Typed OM

● CSSOM (CSS Object Model)

element.style — inline-стили
window.getComputedStyle(element) — вычисленные стили
CSSStyleSheet, CSSRule, CSSStyleRule — для динамической манипуляции

● Typed OM (CSS Typed Object Model Level 1)

element.attributeStyleMap.set('width', CSS.px(100))
CSS.em(), CSS.percent(), CSS.deg(), CSS.number(), CSS.vw()
Преимущества:
- Типизированные значения (не строки)
- Лучшая производительность
- Поддержка единиц cqw, svh и др.
Поддержка: Chrome, Edge. Firefox — частично.

● Houdini Paint/Layout API

CSS.paintWorklet.addModule()
registerPaint() — кастомные paint() функции
CSS.layoutWorklet.addModule() — экспериментально

Операция	Категория	Рекомендация
`top`, `left`, `width`, `height`, `margin`, `padding`	Layout	Избегать анимации; использовать `transform`/`opacity`
`background`, `color`, `box-shadow`	Paint	Минимизировать; использовать `will-change` осторожно
`filter`, `backdrop-filter`	Composite	HW-ускоряются, но дорого на мобильных
`transform`, `opacity`	Composite	Предпочтительны для анимаций
`content-visibility: auto`	Render	Для длинных списков/статей
`contain: layout style paint`	Isolation	Для изоляции тяжёлых компонентов

Справочник по CSS​

Общие вводные​

Box Model​

● display​

● box-sizing​

● margin (и логические margin-block-start, margin-inline-end, и т.д.)​

● padding (и логические padding-block-start, padding-inline-end, и т.д.)​

● width, height, min-width, min-height, max-width, max-height​

Позиционирование и размещение​

● position​

● top, right, bottom, left (и логические inset-block-start, inset-inline-end, inset как сокращение)​

● z-index​

● float, clear​

● isolation​

Границы (border)​

● border (и подробные border-width, border-style, border-color)​

● border-width​

● border-style​

● border-color​

● border-radius​

● border-image (и раздельные подсвойства)​

Подсвойства:​

● outline (и outline-width, outline-style, outline-color, outline-offset)​

Фон (background-*)​

● background (сокращённая форма)​

● background-color​

● background-image​

● background-position​

● background-size​

● background-repeat​

● background-attachment​

● background-origin​

● background-clip​

Цвет и непрозрачность​

● color​

● opacity​

● color-scheme​

● forced-color-adjust​

Текст и шрифты​

● font (сокращённая форма)​

● font-family​

● font-size​

● font-weight​

● font-style​

● font-stretch​

● font-variant и font-variant-*​

● line-height​

● letter-spacing, word-spacing​

● text-align​

● text-align-last​

● text-justify​

● text-indent​

● text-transform​

● white-space​

● overflow-wrap (ранее word-wrap)​

● word-break​

● hyphens​

● text-decoration (и подсвойства)​

● text-decoration-line​

● text-decoration-style​

● text-decoration-color​

● text-decoration-thickness​

● text-underline-offset​

● text-underline-position​

● text-shadow​

● text-overflow​

● direction, unicode-bidi​

Списки (list-style-*)​

● list-style (сокращённая форма)​

● list-style-type​

● list-style-position​

● list-style-image​

Таблицы​

● table-layout​

● border-collapse​

● border-spacing​

● caption-side​

● empty-cells​

● vertical-align​

Визуальные эффекты​

Справочник по CSS

Общие вводные

Box Model

● `display`

● `box-sizing`

● `margin` (и логические `margin-block-start`, `margin-inline-end`, и т.д.)

● `padding` (и логические `padding-block-start`, `padding-inline-end`, и т.д.)

● `width`, `height`, `min-width`, `min-height`, `max-width`, `max-height`

Позиционирование и размещение

● `position`

● `top`, `right`, `bottom`, `left` (и логические `inset-block-start`, `inset-inline-end`, `inset` как сокращение)

● `z-index`

● `float`, `clear`

● `isolation`

Границы (`border`)

● `border` (и подробные `border-width`, `border-style`, `border-color`)

● `border-width`

● `border-style`

● `border-color`

● `border-radius`

● `border-image` (и раздельные подсвойства)

Подсвойства:

● `outline` (и `outline-width`, `outline-style`, `outline-color`, `outline-offset`)

**Фон (`background-*`)**

● `background` (сокращённая форма)

● `background-color`

● `background-image`

● `background-position`

● `background-size`

● `background-repeat`

● `background-attachment`

● `background-origin`

● `background-clip`

Цвет и непрозрачность

● `color`

● `opacity`

● `color-scheme`

● `forced-color-adjust`

Текст и шрифты

● `font` (сокращённая форма)

● `font-family`

● `font-size`

● `font-weight`

● `font-style`

● `font-stretch`

● `font-variant` и `font-variant-*`

● `line-height`

● `letter-spacing`, `word-spacing`

● `text-align`

● `text-align-last`

● `text-justify`

● `text-indent`

● `text-transform`

● `white-space`

● `overflow-wrap` (ранее `word-wrap`)

● `word-break`

● `hyphens`

● `text-decoration` (и подсвойства)

● `text-decoration-line`

● `text-decoration-style`

● `text-decoration-color`

● `text-decoration-thickness`

● `text-underline-offset`

● `text-underline-position`

● `text-shadow`

● `text-overflow`

● `direction`, `unicode-bidi`

**Списки (`list-style-*`)**

● `list-style` (сокращённая форма)

● `list-style-type`

● `list-style-position`

● `list-style-image`

Таблицы

● `table-layout`

● `border-collapse`

● `border-spacing`

● `caption-side`

● `empty-cells`

● `vertical-align`

Визуальные эффекты