Справочник CSS
Оформление, размеры и раскладка: понятные объяснения свойств CSS, примеры, частые ошибки и упражнения.
clamp(): плавный размер с нижней и верхней границей
Функция clamp выбирает предпочтительное значение, ограничивая его снизу и сверху. Она удобна для плавных размеров, которые не должны становиться чрезмерно маленькими или большими.
calc(): вычисление размера из совместимых величин
Функция calc позволяет записать вычисление непосредственно в CSS-значении. Частый сценарий — вычесть постоянный отступ из доступной ширины контейнера.
@supports: улучшение оформления при поддержке свойства
Правило @supports применяет набор CSS-деклараций, когда браузер распознаёт указанное сочетание свойства и значения. Оно позволяет строить улучшение поверх рабочей базовой раскладки.
@layer: явный порядок слоёв каскада
Каскадные слои задают порядок групп CSS-правил до сравнения специфичности внутри этих групп. Это помогает отделить базовые стили от компонентов и локальных дополнений.
animation: ключевые кадры и спокойная альтернатива движению
Свойство animation связывает элемент с ключевыми кадрами и задаёт параметры воспроизведения. Для короткого появления блока обычно достаточно одного прохода без бесконечного повторения.
accent-color: цвет стандартных элементов формы
Свойство accent-color задаёт акцентный цвет некоторых нативных элементов управления. Оно позволяет приблизить чекбоксы и переключатели к оформлению сайта, сохраняя стандартное поведение.
caret-color: цвет текстового курсора в поле
Свойство caret-color меняет цвет каретки — тонкого указателя позиции ввода в редактируемом тексте. Это отдельная настройка от цвета букв, рамки поля и выделенного фрагмента.
text-underline-offset: расстояние до подчёркивания
Свойство text-underline-offset управляет расстоянием между текстом и его подчёркиванием. Оно помогает сделать ссылку читаемой, не заменяя подчёркивание рамкой у всего блока.
outline-offset: отступ контура фокуса
Свойство outline-offset отодвигает контур outline от края элемента или переносит его внутрь при отрицательном значении. Контур удобно использовать для видимого состояния клавиатурного фокуса.
isolation: локальный контекст наложения компонента
Значение isolation:isolate создаёт новый контекст наложения. Оно помогает ограничить взаимодействие слоёв внутри компонента с соседними частями страницы.
float: обтекание небольшого блока текстом
Float позволяет окружающему строчному содержимому обтекать элемент. Это полезно для иллюстрации внутри статьи, когда текст должен идти рядом, а затем продолжаться под ней.
clear: начало блока ниже плавающих элементов
Clear указывает, с какой стороны блок не должен соседствовать с предыдущими плавающими элементами. Он помогает отделить новый раздел от обтекания, начатого выше.
column-count: текст, текущий через несколько колонок
Column-count задаёт желаемое количество колонок в многоколоночном контейнере. Содержимое течёт из одной колонки в следующую, как в газетной полосе, а не распределяется независимыми карточками.
column-width: желаемая ширина текстовой колонки
Column-width предлагает браузеру ширину колонок, а количество подбирается по доступному пространству. Это позволяет менять раскладку без отдельного медиазапроса для каждого числа колонок.
break-inside: сохранить короткий блок при разбиении
Break-inside управляет допустимостью разрыва внутри элемента при фрагментации на страницы или колонки. Оно помогает не отделять подпись от компактного примера.
filter: визуальная обработка элемента и его содержимого
Свойство filter применяет визуальные преобразования к отрисованному элементу: например, меняет насыщенность, яркость или добавляет размытие. Исходное изображение или текст при этом не переписываются.
backdrop-filter: обработка фона за полупрозрачным блоком
Backdrop-filter применяет эффект к области позади элемента. Частый пример — полупрозрачная панель, через которую виден размытый фон, а её собственный текст остаётся чётким.
mix-blend-mode: смешивание слоя с задним фоном
Mix-blend-mode задаёт способ смешивания цветов элемента с содержимым позади него. В отличие от обычной прозрачности результат зависит от цветов обоих слоёв.
background-blend-mode: смешивание фоновых слоёв одного элемента
Background-blend-mode управляет смешиванием фоновых изображений и фонового цвета внутри элемента. Текст и обычные потомки не становятся самостоятельными фоновыми слоями.
user-select: управление выделением текста в интерфейсе
User-select влияет на возможность выделять текст обычным взаимодействием. Его применяют точечно к интерфейсным деталям, но учебный текст и примеры кода обычно должны оставаться копируемыми.
:is(): объединение вариантов селектора
Псевдокласс is позволяет записать несколько альтернатив в одном месте селектора. Он сокращает повторение общей части правила, сохраняя возможность выбрать разные типы элементов.
:where(): общий стиль с нулевой специфичностью аргументов
Where объединяет альтернативы селектора, но не добавляет специфичности за счёт себя и своего списка. Это удобно для базового оформления, которое легко переопределить в компоненте.
:not(): исключение элементов из выбора
Not выбирает элементы, которые не соответствуют указанному селектору или списку селекторов. Это фильтрация элементов, а не команда отменить уже применённый стиль.
:has(): оформление элемента по состоянию его содержимого
Has позволяет выбрать элемент на основе относительного селектора внутри него или рядом с ним. Один из сценариев — выделить подпись, содержащую отмеченный чекбокс.
:nth-child(): выбор по позиции среди соседних элементов
Nth-child выбирает элементы по их порядковому номеру среди дочерних элементов одного родителя. Нумерация начинается с единицы и не совпадает с индексами массива JavaScript.
grid-row: размещение элемента между строками сетки
Grid-row задаёт начало и конец элемента вдоль строк CSS Grid. Значения относятся к линиям сетки, поэтому номер линии нельзя механически считать номером готовой ячейки.
justify-items: выравнивание содержимого ячеек Grid
Justify-items задаёт выравнивание элементов сетки по строчной оси внутри их областей. Оно помогает управлять свободным местом в ячейках, не меняя расположение самих колонок.
place-items: совместная настройка двух осей в Grid
Place-items объединяет align-items и justify-items. В CSS Grid оно позволяет компактно настроить положение элементов внутри их областей по двум осям.
align-content: распределение строк внутри контейнера
Align-content управляет размещением содержимого вдоль соответствующей оси выравнивания. В многострочном Flexbox это особенно заметно при распределении нескольких строк внутри высокого контейнера.
grid-template-areas: именованная схема расположения блоков
Grid-template-areas описывает области сетки через короткие имена. Такая запись помогает читать общую схему макета и менять её на разных ширинах без перестановки HTML.