Справочник CSS
Оформление, размеры и раскладка: понятные объяснения свойств CSS, примеры, частые ошибки и упражнения.
inline-size: размер блока вдоль строки
Inline-size задаёт размер по строчной оси режима письма. При горизонтальном письме это обычно ширина, а при вертикальном — соответствующее вертикальное измерение.
block-size: размер по блочной оси письма
Block-size задаёт размер по оси размещения блоков. Для обычного горизонтального текста он соответствует высоте, но в вертикальном письме ориентируется по другой физической оси.
border-inline: рамки вдоль строчных краёв
Border-inline задаёт рамки у начала и конца строчной оси. Свойство удобно для оформления, которое должно следовать направлению письма без отдельных правил для левой и правой стороны.
margin-block: внешние отступы по блочной оси
Margin-block задаёт внешние отступы перед и после блока в текущем режиме письма. Это помогает отделять абзацы и секции без привязки к физическим верхней и нижней сторонам.
padding-block: внутренний отступ перед и после содержимого
Padding-block добавляет внутреннее пространство по блочной оси. Оно отделяет текст от краёв фона или рамки и остаётся частью оформляемого блока.
:first-child: первый элемент среди соседей
First-child выбирает элемент, если он стоит первым среди дочерних элементов родителя. Селектор полезен для оформления границ списка без назначения отдельного класса первому пункту.
:last-child: оформление последнего элемента группы
Last-child выбирает последний дочерний элемент родителя. Частый случай — убрать разделитель после последнего пункта списка, не меняя разметку при добавлении новых пунктов.
:only-child: особое оформление единственного элемента
Only-child совпадает с элементом, у которого нет соседних элементов в том же родителе. Он подходит для небольших изменений раскладки, когда группа содержит ровно один блок.
:empty: выбор элемента без содержимого
Empty позволяет оформить контейнер, в котором нет дочерних элементов и текстового содержимого. Его удобно изучать на различии действительно пустого узла и узла с пробелом.
:nth-of-type(): позиция среди элементов одного типа
Nth-of-type считает позицию элемента среди соседей с тем же именем тега. Это отличается от nth-child, который в базовой форме считает все соседние элементы.
contain: границы влияния компонента на раскладку
Contain сообщает браузеру об изоляции некоторых аспектов элемента от остальной страницы. Его выбирают для конкретной модели компонента, а не как универсальную кнопку ускорения любого блока.
content-visibility: пропуск отрисовки далёких секций
Content-visibility позволяет браузеру откладывать часть работы для содержимого, которое пока не нужно рисовать. Значение auto предназначено для оптимизации длинной страницы с сохранением обычного доступа к содержимому.
will-change: предварительная подсказка о будущем изменении
Will-change сообщает браузеру, какое свойство элемента ожидается изменить. Это средство для устранения измеренной проблемы анимации, а не обязательная настройка каждого движущегося компонента.
scroll-snap-type: направление и строгость привязки прокрутки
Scroll-snap-type включает привязку прокрутки у контейнера. Свойство задаёт ось и строгость поведения, а точки привязки определяются отдельно на дочерних элементах.
scroll-snap-align: точка привязки конкретного элемента
Scroll-snap-align задаёт выравнивание элемента при привязке прокрутки. Его применяют к элементам внутри контейнера с включённым scroll-snap-type, а не только к самому контейнеру.
text-wrap: балансировка строк заголовка
Text-wrap управляет переносом и выбором разбиения строк текста. Значение balance может сделать короткий многострочный заголовок визуально ровнее без ручных br.
hyphens: перенос слов с учётом языка
Hyphens управляет возможностью переноса внутри слов. Автоматический перенос может улучшить узкие текстовые колонки, если браузер располагает подходящими языковыми правилами.
tab-size: отображение табуляции в примере кода
Tab-size задаёт ширину табуляции при её отображении. Это помогает согласовать вид учебных примеров, если исходный текст действительно содержит символы табуляции.
text-align-last: выравнивание последней строки
Text-align-last задаёт выравнивание последней строки текстового блока и строки перед принудительным разрывом. Это отдельная настройка от выравнивания остальных строк абзаца.
text-decoration-thickness: толщина подчёркивания ссылки
Text-decoration-thickness управляет толщиной линии текстового оформления. Оно помогает настроить подчёркивание так, чтобы ссылка оставалась заметной и линия не заслоняла буквы.
appearance: нативное оформление элемента управления
Appearance управляет использованием платформенного оформления элементов управления. Значение none помогает строить собственный внешний вид, но часть привычных визуальных признаков придётся восстановить самостоятельно.
field-sizing: размер поля по содержимому
Field-sizing позволяет некоторым полям подстраивать размер под содержимое. Значение content может сократить необходимость скрипта для растущего textarea, если целевые браузеры поддерживают такое поведение.
color-scheme: светлое и тёмное оформление нативных частей
Color-scheme сообщает браузеру, какие цветовые схемы поддерживает область документа. Оно влияет на нативные части интерфейса, но не создаёт полноценную тёмную тему для всех авторских цветов.
print-color-adjust: намерение сохранить цвета при печати
Print-color-adjust задаёт пожелание по экономии или сохранению цветов при выводе документа. Оно полезно для отдельных печатных блоков, где цветовое оформление помогает чтению.
quotes: кавычки для вложенных цитат
Quotes задаёт пары кавычек, которые CSS использует для открывающего и закрывающего цитирования. Это помогает согласовать оформление вложенных коротких цитат с выбранной редакционной практикой.