Перейти к основному содержимому

200 вопросов по CSS

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

200 вопросов по CSS​

Основы CSS​

Вопрос​

Что такое CSS?

Ответ​

CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида и форматирования документов, написанных на языках разметки, таких как HTML или XML. Он определяет цвета, шрифты, отступы, позиционирование и другие визуальные аспекты веб-страниц.

Вопрос​

Как подключить CSS к HTML-документу?

Ответ​

CSS можно подключить тремя способами:

  1. Внешний файл через тег <link> в <head>: 
    <link rel="stylesheet" href="styles.css">
  2. Внутренний стиль с помощью тега <style> в <head>: 
    <style>
      body { background: white; }
    </style>
  3. Инлайновый стиль через атрибут style у элемента: 
    <p style="color: blue;">Текст</p>

Вопрос​

Что такое каскад в CSS?

Ответ​

Каскад — это механизм, определяющий, какие стили применяются к элементу, когда несколько правил конфликтуют между собой. Он учитывает источник стиля (пользовательский, авторский, браузерный), специфичность селекторов и порядок объявления правил.

Вопрос​

Что такое специфичность (specificity) в CSS?

Ответ​

Специфичность — это вес селектора, определяющий, какое правило применится при конфликте. Она рассчитывается по формуле:

  • инлайновые стили: 1000
  • ID-селекторы: 100
  • классы, псевдоклассы, атрибуты: 10
  • теги и псевдоэлементы: 1

Пример: #header .nav a имеет специфичность 111.

Вопрос​

Как работает наследование в CSS?

Ответ​

Некоторые свойства CSS автоматически передаются от родительских элементов к дочерним. Например, color, font-family, text-align наследуются. Свойства вроде margin, padding, border не наследуются. Наследование можно принудительно включить с помощью значения inherit.

Вопрос​

Что делает ключевое слово !important?

Ответ​

!important повышает приоритет свойства выше любого другого, включая инлайновые стили и правила с большей специфичностью. Его следует использовать крайне редко, так как он нарушает естественный порядок каскада и усложняет поддержку кода.

Вопрос​

Что такое боксовая модель (box model) в CSS?

Ответ​

Боксовая модель описывает структуру каждого элемента как прямоугольник, состоящий из:

  • content (содержимое)
  • padding (внутренние отступы)
  • border (граница)
  • margin (внешние отступы)

Ширина и высота по умолчанию относятся только к content.

Вопрос​

Как изменить стандартную боксовую модель?

Ответ​

С помощью свойства box-sizing. Значение border-box включает padding и border в общую ширину и высоту элемента:

* {
  box-sizing: border-box;
}

Вопрос​

В чём разница между margin и padding?

Ответ​

margin задаёт внешнее пространство вокруг элемента и не влияет на его фон. padding задаёт внутреннее пространство между содержимым и границей элемента и участвует в отображении фона.

Вопрос​

Могут ли margin схлопываться? Если да — при каких условиях?

Ответ​

Да, вертикальные margin соседних блочных элементов могут схлопываться. Результатом становится больший из двух margin, а не их сумма. Это происходит между:

  • соседними элементами
  • родителем и первым/последним дочерним элементом (при отсутствии разделения padding/border/content)

Вопрос​

Что такое селекторы в CSS?

Ответ​

Селекторы — это шаблоны, которые указывают, к каким HTML-элементам применяется набор стилей. Примеры:

  • p — теговый селектор
  • .class — класс
  • #id — идентификатор
  • div p — потомок
  • div > p — прямой потомок

Вопрос​

Как выбрать все элементы на странице?

Ответ​

Универсальный селектор * выбирает все элементы:

* {
  margin: 0;
  padding: 0;
}

Вопрос​

Что делает селектор :hover?

Ответ​

:hover — псевдокласс, который применяет стили, когда пользователь наводит курсор на элемент:

button:hover {
  background: lightblue;
}

Вопрос​

Что такое псевдоэлементы? Приведите примеры.

Ответ​

Псевдоэлементы позволяют стилизовать части элемента, не существующие в DOM. Примеры:

  • ::before — вставляет контент до содержимого элемента
  • ::after — вставляет контент после содержимого
  • ::first-line — первая строка текста
  • ::selection — выделенный текст

Пример:

p::first-line {
  font-weight: bold;
}

Вопрос​

Как задать прозрачность элемента?

Ответ​

С помощью свойства opacity. Значение от 0 (полностью прозрачный) до 1 (непрозрачный):

div {
  opacity: 0.5;
}

Альтернатива — использовать rgba() в цветовых свойствах, например:

background: rgba(255, 0, 0, 0.5);

Вопрос​

Что такое единицы измерения em, rem, px, %?

Ответ​

  • px — абсолютная единица, фиксированный размер пикселя.
  • em — относительна к размеру шрифта текущего элемента.
  • rem — относительна к размеру шрифта корневого элемента (<html>).
  • % — процент от родительского значения (например, ширины или высоты).

Вопрос​

Как центрировать блочный элемент по горизонтали?

Ответ​

Задать фиксированную ширину и автоматические отступы по горизонтали:

.block {
  width: 300px;
  margin: 0 auto;
}

Вопрос​

Как центрировать текст по вертикали внутри блока фиксированной высоты?

Ответ​

Использовать line-height, равный высоте блока:

.centered-text {
  height: 100px;
  line-height: 100px;
}

Вопрос​

Что такое display и какие основные значения у него есть?

Ответ​

Свойство display определяет тип отображения элемента. Основные значения:

  • block — занимает всю ширину, начинается с новой строки
  • inline — занимает минимальную ширину, не переносится
  • inline-block — ведёт себя как inline, но допускает установку ширины, высоты, отступов
  • none — скрывает элемент полностью
  • flex — создаёт flex-контейнер
  • grid — создаёт grid-контейнер

Вопрос​

В чём разница между visibility: hidden и display: none?

Ответ​

visibility: hidden делает элемент невидимым, но он сохраняет место в потоке документа. display: none полностью удаляет элемент из потока — он не занимает места и не взаимодействует с пользователем.

Вопрос​

Что такое CSS-переменные и как их объявить?

Ответ​

CSS-переменные (кастомные свойства) позволяют хранить повторяющиеся значения. Объявляются с префиксом -- и используются через var():

:root {
  --main-color: #3498db;
}
.button {
  background: var(--main-color);
}

Вопрос​

Где лучше объявлять CSS-переменные — в :root или в конкретном элементе?

Ответ​

В :root — если переменная глобальная и используется во всём документе. В конкретном элементе — если она локальная и нужна только внутри его поддерева.

Вопрос​

Что такое медиазапросы?

Ответ​

Медиазапросы позволяют применять стили в зависимости от характеристик устройства, таких как ширина экрана, ориентация или разрешение. Используются для адаптивного дизайна:

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Вопрос​

Как скрыть элемент только для пользователей с клавиатурой или скринридерами?

Ответ​

Это невозможно — скрытие для одних устройств обычно влияет и на другие. Однако можно скрыть визуально, но оставить доступным для скринридеров:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Вопрос​

Что такое z-index и как он работает?

Ответ​

z-index определяет порядок наложения элементов по оси Z. Работает только для элементов с позиционированием, отличным от static (relative, absolute, fixed, sticky). Большие значения располагаются поверх меньших.

Вопрос​

Что такое stacking context?

Ответ​

Stacking context — это группа элементов, отрисовываемых вместе в определённом порядке. Создаётся корневым элементом, а также элементами с:

  • position ≠ static + z-index ≠ auto
  • opacity < 1
  • transform ≠ none
  • filter ≠ none
    и другими свойствами. Элементы внутри контекста не смешиваются с элементами вне его.

Вопрос​

Как сделать элемент кликабельным только по содержимому, игнорируя прозрачные области?

Ответ​

Использовать pointer-events: none на основном элементе и pointer-events: auto на дочернем, содержащем содержимое:

.container {
  pointer-events: none;
}
.content {
  pointer-events: auto;
}

Вопрос​

Что делает свойство overflow?

Ответ​

overflow управляет отображением содержимого, выходящего за пределы блока. Возможные значения:

  • visible — содержимое отображается за пределами (по умолчанию)
  • hidden — скрывает всё, что выходит за границы
  • scroll — всегда добавляет полосы прокрутки
  • auto — добавляет полосы прокрутки только при необходимости

Вопрос​

Как предотвратить выделение текста на элементе?

Ответ​

Использовать свойство user-select:

.no-select {
  user-select: none;
}

Вопрос​

Что такое currentColor?

Ответ​

currentColor — это ключевое слово, которое ссылается на значение свойства color текущего элемента. Используется в других свойствах, например:

.icon {
  color: blue;
  border: 2px solid currentColor; /* граница будет синей */
}

Flexbox​

Вопрос​

Что такое Flexbox?

Ответ​

Flexbox — это модуль CSS, предназначенный для одномерного распределения пространства и выравнивания элементов внутри контейнера. Он особенно удобен для создания гибких и адаптивных макетов без использования float или position.

Вопрос​

Как сделать элемент flex-контейнером?

Ответ​

Установить свойство display: flex (или inline-flex) родительскому элементу:

.container {
  display: flex;
}

Вопрос​

Какие основные оси существуют в Flexbox?

Ответ​

В Flexbox есть две оси:

  • main axis (главная ось) — направление, вдоль которого располагаются элементы (flex-direction).
  • cross axis (поперечная ось) — перпендикулярна главной.

Вопрос​

Как изменить направление главной оси?

Ответ​

С помощью свойства flex-direction:

  • row — слева направо (по умолчанию)
  • row-reverse — справа налево
  • column — сверху вниз
  • column-reverse — снизу вверх

Вопрос​

Что делает свойство flex-wrap?

Ответ​

flex-wrap определяет, должны ли flex-элементы переноситься на новую строку при нехватке места:

  • nowrap — все элементы в одной строке (по умолчанию)
  • wrap — перенос при переполнении
  • wrap-reverse — перенос в обратном порядке

Вопрос​

Как выровнять элементы по главной оси?

Ответ​

Свойство justify-content:

  • flex-start — по началу (по умолчанию)
  • flex-end — по концу
  • center — по центру
  • space-between — равномерно с фиксированными краями
  • space-around — равномерно с равными отступами вокруг
  • space-evenly — равномерно с одинаковыми промежутками между всеми элементами

Вопрос​

Как выровнять элементы по поперечной оси?

Ответ​

Свойство align-items (для всего контейнера) или align-self (для отдельного элемента):

  • stretch — растягивает по высоте контейнера (по умолчанию)
  • flex-start — по началу поперечной оси
  • flex-end — по концу
  • center — по центру
  • baseline — по базовой линии текста

Вопрос​

Что означает flex: 1?

Ответ​

flex: 1 — сокращённая запись для flex: 1 1 0%, что означает:

  • flex-grow: 1 — элемент может расти
  • flex-shrink: 1 — элемент может сжиматься
  • flex-basis: 0% — начальный размер — 0, всё свободное пространство распределяется поровну

Вопрос​

В чём разница между flex-grow, flex-shrink и flex-basis?

Ответ​

  • flex-grow — коэффициент, определяющий, как элемент занимает лишнее пространство.
  • flex-shrink — коэффициент, определяющий, как элемент сжимается при нехватке места.
  • flex-basis — начальный размер элемента до распределения свободного пространства (аналог width/height).

Вопрос​

Можно ли использовать Flexbox в колонках?

Ответ​

Да. Установка flex-direction: column превращает главную ось в вертикальную, и элементы располагаются сверху вниз. Свойства justify-content и align-items меняют своё поведение соответственно.

CSS Grid​

Вопрос​

Что такое CSS Grid?

Ответ​

CSS Grid — это двумерная система раскладки, позволяющая управлять как строками, так и столбцами одновременно. Она подходит для сложных макетов, где требуется точный контроль над позиционированием.

Вопрос​

Как создать grid-контейнер?

Ответ​

Установить display: grid (или inline-grid) родительскому элементу:

.container {
  display: grid;
}

Вопрос​

Как задать количество и размеры колонок и строк?

Ответ​

С помощью свойств grid-template-columns и grid-template-rows:

.container {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px;
}

Здесь fr — доля доступного пространства, auto — по содержимому, 100px — фиксированная высота.

Вопрос​

Что делает функция repeat()?

Ответ​

repeat() упрощает запись повторяющихся треков:

grid-template-columns: repeat(3, 1fr); /* то же, что 1fr 1fr 1fr */

Можно комбинировать:

grid-template-columns: repeat(2, 100px 1fr);

Вопрос​

Как разместить элемент в определённой ячейке?

Ответ​

С помощью свойств grid-column и grid-row (или их сокращённых форм):

.item {
  grid-column: 2 / 4; /* от 2-й линии до 4-й */
  grid-row: 1 / span 2; /* от 1-й линии, занимает 2 строки */
}

Вопрос​

Что такое grid-area?

Ответ​

grid-area — сокращённое свойство для одновременного задания grid-row-start, grid-column-start, grid-row-end, grid-column-end. Также используется с именованными областями:

.item { grid-area: header; }
.container {
  grid-template-areas:
    "header header"
    "nav main";
}

Вопрос​

Как автоматически размещать элементы в Grid?

Ответ​

Если явно не указывать позиции, элементы размещаются по порядку в доступные ячейки. Можно управлять поведением через:

  • grid-auto-flow: row (по умолчанию)
  • grid-auto-flow: column
  • grid-auto-flow: dense — заполняет пустые ячейки более мелкими элементами

Вопрос​

В чём разница между Flexbox и Grid?

Ответ​

Flexbox — одномерная система (работает либо по строке, либо по колонке). Grid — двумерная (управляет и строками, и колонками одновременно). Flexbox лучше для компоновки внутри компонентов, Grid — для общего макета страницы.

Вопрос​

Поддерживает ли Grid вложенные сетки?

Ответ​

Да. Любой grid-элемент может сам быть grid-контейнером. Это позволяет строить сложные иерархические макеты.

Вопрос​

Как центрировать элемент по обеим осям с помощью Grid?

Ответ​

.container {
  display: grid;
  place-items: center; /* сокращение для align-items и justify-items */
}

Или:

.container {
  display: grid;
  justify-content: center;
  align-items: center;
}

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

Вопрос​

Какие значения имеет свойство position?

Ответ​

  • static — стандартное позиционирование (не реагирует на top/right/bottom/left/z-index)
  • relative — смещается относительно своего обычного положения
  • absolute — позиционируется относительно ближайшего позиционированного предка
  • fixed — фиксируется относительно viewport
  • sticky — сочетает relative и fixed: фиксируется при прокрутке до определённого порога

Вопрос​

Что такое «позиционированный предок»?

Ответ​

Это ближайший родительский элемент с position, отличным от static. Именно относительно него позиционируется элемент с absolute.

Вопрос​

Как работает position: sticky?

Ответ​

Элемент ведёт себя как relative, пока не достигнет заданного порога (например, top: 0). После этого он становится fixed до тех пор, пока не выйдет из области видимости или не будет превзойдён другим sticky-элементом.

Вопрос​

Можно ли комбинировать position: absolute с margin: auto?

Ответ​

Да. Если задать left: 0; right: 0; margin: 0 auto, элемент с фиксированной шириной будет центрирован горизонтально. Аналогично для вертикали: top: 0; bottom: 0; margin: auto 0.

Вопрос​

Как зафиксировать элемент в правом нижнем углу экрана?

Ответ​

.element {
  position: fixed;
  bottom: 0;
  right: 0;
}

Адаптивный дизайн и медиазапросы​

Вопрос​

Что такое адаптивный дизайн?

Ответ​

Адаптивный дизайн — это подход к веб-разработке, при котором макет страницы автоматически подстраивается под размер экрана устройства пользователя. Он обеспечивает удобство использования на мобильных, планшетах и десктопах без необходимости создания отдельных версий сайта.

Вопрос​

В чём разница между адаптивным и респонсивным дизайном?

Ответ​

Респонсивный дизайн — это подмножество адаптивного: он использует гибкие сетки, изображения и медиазапросы для плавного изменения макета. Адаптивный дизайн может включать фиксированные точки останова и даже отдельные шаблоны под конкретные устройства.

Вопрос​

Какие единицы измерения рекомендуются для адаптивного дизайна?

Ответ​

Для адаптивного дизайна предпочтительны относительные единицы:

  • rem — для шрифтов и отступов (относительно корневого размера)
  • em — для локальных масштабов
  • % — для ширины и высоты
  • vw / vh — для размеров относительно viewport
  • fr — в CSS Grid

Вопрос​

Что делает метатег <meta name="viewport">?

Ответ​

Метатег viewport контролирует масштабирование и ширину области просмотра на мобильных устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1">

Без него браузер может отображать сайт в «десктопном» режиме с уменьшенным масштабом.

Вопрос​

Как правильно писать медиазапросы: mobile-first или desktop-first?

Ответ​

Mobile-first — современный подход: стили пишутся сначала для мобильных устройств, а затем расширяются через min-width для больших экранов:

/* Базовые стили — для мобильных */
.container { padding: 10px; }

/* Добавление для планшетов и выше */
@media (min-width: 768px) {
  .container { padding: 20px; }
}

Это улучшает производительность и читаемость кода.

Вопрос​

Что такое точка останова (breakpoint)?

Ответ​

Точка останова — это значение ширины экрана, при котором применяются новые стили. Обычно соответствует популярным размерам устройств:

  • 320–480px — мобильные
  • 768px — планшеты
  • 1024px — малые десктопы
  • 1200px+ — большие экраны

Вопрос​

Можно ли использовать max-width и min-width вместе?

Ответ​

Да, это создаёт диапазон:

@media (min-width: 768px) and (max-width: 1023px) {
  /* Стили только для планшетов */
}

Вопрос​

Что такое контейнерные запросы (Container Queries)?

Ответ​

Контейнерные запросы позволяют применять стили на основе размера родительского контейнера, а не всего viewport. Это особенно полезно для компонентов, которые могут использоваться в разных контекстах:

.card-container {
  container-type: inline-size;
}
@container (min-width: 300px) {
  .card { display: grid; }
}

Вопрос​

Как объявить контейнер для Container Queries?

Ответ​

С помощью свойства container-type:

  • size — учитывает ширину и высоту
  • inline-size — только ширину (по направлению текста)
    Пример:
.widget {
  container-type: inline-size;
  container-name: sidebar;
}

Вопрос​

Поддерживаются ли Container Queries в старых браузерах?

Ответ​

Container Queries поддерживаются в современных браузерах (Chrome 105+, Firefox 110+, Safari 16+). Для старых браузеров требуется полифил или graceful degradation.

Анимации и трансформации​

Вопрос​

Как создать CSS-анимацию?

Ответ​

С помощью правила @keyframes и свойства animation:

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.element {
  animation: slideIn 0.5s ease-out;
}

Вопрос​

В чём разница между transition и animation?

Ответ​

transition — плавное изменение свойства при смене состояния (например, :hover).
animation — независимая последовательность кадров, запускаемая без взаимодействия.
transition требует начального и конечного значения; animation определяет весь путь через @keyframes.

Вопрос​

Какие свойства можно анимировать эффективно?

Ответ​

Наиболее производительные для анимации:

  • transform (translate, scale, rotate)
  • opacity
    Эти свойства не вызывают перерисовку layout и paint, а обрабатываются на уровне композитора GPU.

Вопрос​

Что делает свойство will-change?

Ответ​

will-change сигнализирует браузеру, что элемент скоро изменится, чтобы тот заранее оптимизировал его отрисовку:

.animated {
  will-change: transform;
}

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

Вопрос​

Как приостановить анимацию?

Ответ​

Установить animation-play-state: paused:

.element:hover {
  animation-play-state: paused;
}

Вопрос​

Что такое easing-функции?

Ответ​

Easing-функции определяют скорость анимации во времени. Примеры:

  • ease — медленно в начале и конце
  • linear — равномерная скорость
  • ease-in-out — плавный старт и завершение
  • cubic-bezier(x1, y1, x2, y2) — кастомная кривая

Вопрос​

Можно ли анимировать градиенты?

Ответ​

Напрямую — нет, так как градиенты не являются анимируемыми свойствами. Но можно имитировать анимацию через background-size, background-position или использование псевдоэлементов.

Вопрос​

Как сделать бесконечную анимацию?

Ответ​

Указать animation-iteration-count: infinite:

.spinner {
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  to { transform: rotate(360deg); }
}

Вопрос​

Что такое transform-origin?

Ответ​

transform-origin задаёт точку, относительно которой применяется трансформация:

.box {
  transform: rotate(45deg);
  transform-origin: top left;
}

Вопрос​

Можно ли комбинировать несколько трансформаций?

Ответ​

Да, в одном свойстве transform:

.element {
  transform: translateX(100px) rotate(30deg) scale(1.2);
}

Порядок важен: трансформации применяются справа налево.

Производительность и современные возможности​

Вопрос​

Как уменьшить repaint и reflow?

Ответ​

  • Избегать изменения layout-свойств (width, height, top, left) в анимациях
  • Использовать transform и opacity
  • Группировать изменения через requestAnimationFrame (в JS)
  • Минимизировать DOM-манипуляции
  • Использовать contain: layout style paint для изоляции элементов

Вопрос​

Что делает contain: layout?

Ответ​

contain: layout гарантирует, что изменения внутри элемента не повлияют на layout внешних элементов. Это позволяет браузеру оптимизировать пересчёт.

Вопрос​

Как работают CSS-переменные с calc()?

Ответ​

CSS-переменные можно использовать внутри calc():

:root {
  --base-size: 16px;
}
.text {
  font-size: calc(var(--base-size) + 2px);
}

Вопрос​

Что такое clamp()?

Ответ​

clamp() ограничивает значение между минимумом и максимумом, используя предпочтительное значение:

font-size: clamp(1rem, 2.5vw, 2rem);

Здесь шрифт будет не меньше 1rem, не больше 2rem, но стремиться к 2.5vw.

Вопрос​

Как использовать prefers-reduced-motion?

Ответ​

Этот медиазапрос уважает настройки пользователя, отключающие анимации:

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

Вопрос​

Как реализовать тёмную тему?

Ответ​

С помощью prefers-color-scheme и CSS-переменных:

:root {
  --bg: white;
  --text: black;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: black;
    --text: white;
  }
}
body {
  background: var(--bg);
  color: var(--text);
}

Вопрос​

Что такое backdrop-filter?

Ответ​

backdrop-filter применяет графический эффект (размытие, яркость и т.д.) к области за элементом:

.modal {
  backdrop-filter: blur(10px);
}

Часто используется для модальных окон с эффектом frosted glass.

Вопрос​

Как работает clip-path?

Ответ​

clip-path обрезает элемент по заданной форме:

.circle {
  clip-path: circle(50% at 50% 50%);
}
.polygon {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

Вопрос​

Можно ли анимировать clip-path?

Ответ​

Да, если обе формы имеют одинаковое количество точек:

.element {
  clip-path: circle(30% at 50% 50%);
  transition: clip-path 0.3s;
}
.element:hover {
  clip-path: circle(80% at 50% 50%);
}

Вопрос​

Что такое CSS Houdini?

Ответ​

CSS Houdini — набор API, позволяющих разработчикам напрямую взаимодействовать с CSS-движком браузера:

  • CSS Properties and Values API — регистрировать кастомные свойства с типами и начальными значениями
  • Paint API — рисовать собственные фоновые изображения
  • Animation Worklet — создавать высокопроизводительные анимации
    Это даёт контроль, сравнимый с нативным CSS.

Типографика и текст​

Вопрос​

Как контролировать межбуквенный интервал?

Ответ​

Свойство letter-spacing задаёт расстояние между символами:

.tight {
  letter-spacing: -0.5px;
}
.loose {
  letter-spacing: 2px;
}

Вопрос​

Как ограничить количество строк текста?

Ответ​

Использовать -webkit-line-clamp вместе с display: -webkit-box:

.multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Это нестандартное, но широко поддерживаемое решение. Стандартный аналог пока находится в разработке.

Вопрос​

В чём разница между word-break и overflow-wrap?

Ответ​

  • word-break: break-all — разрывает слова в любом месте, даже внутри слова.
  • overflow-wrap: break-word (устаревшее word-wrap) — разрывает слова только при необходимости и старается сохранить целостность слов.
    Рекомендуется использовать overflow-wrap: anywhere или overflow-wrap: break-word для лучшей читаемости.

Вопрос​

Как управлять переносами слов?

Ответ​

Свойство hyphens:

.hyphenated {
  hyphens: auto; /* браузер сам ставит дефисы */
}

Требует указания языка через атрибут lang в HTML.

Вопрос​

Что делает text-transform?

Ответ​

Изменяет регистр текста:

  • uppercase — все заглавные
  • lowercase — все строчные
  • capitalize — первая буква каждого слова заглавная

Вопрос​

Как выровнять последнюю строку абзаца?

Ответ​

Свойство text-align-last:

.justified {
  text-align: justify;
  text-align-last: center;
}

Вопрос​

Можно ли стилизовать первую букву абзаца?

Ответ​

Да, с помощью псевдоэлемента ::first-letter:

p::first-letter {
  font-size: 2em;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

Вопрос​

Как задать отступ для первой строки?

Ответ​

Свойство text-indent:

.paragraph {
  text-indent: 20px;
}

Вопрос​

Что такое переменные шрифты (variable fonts)?

Ответ​

Переменные шрифты — это один файл шрифта, содержащий множество вариаций (жирность, ширина, наклон и т.д.). Управляются через font-variation-settings или стандартные свойства:

.variable {
  font-weight: 300; /* может плавно меняться от 100 до 900 */
  font-stretch: 75%; /* ширина */
}

Вопрос​

Как ускорить загрузку шрифтов?

Ответ​

Использовать font-display: swap в @font-face:

@font-face {
  font-family: 'Custom';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

Это показывает запасной шрифт сразу, а кастомный — после загрузки, избегая FOIT (невидимый текст).

Архитектура и методологии CSS​

Вопрос​

Что такое BEM?

Ответ​

BEM (Block, Element, Modifier) — методология именования классов для повышения читаемости и изоляции компонентов:

  • Блок: .button
  • Элемент: .button__icon
  • Модификатор: .button--primary, .button--large

Вопрос​

Почему BEM использует двойное подчёркивание и дефис?

Ответ​

Это соглашение:

  • __ отделяет элемент от блока
  • -- отделяет модификатор от блока или элемента
    Это предотвращает коллизии имён и делает структуру явной.

Вопрос​

Что такое CSS Modules?

Ответ​

CSS Modules — подход, при котором классы локализуются в рамках одного файла. Имена автоматически хешируются, чтобы избежать конфликтов:

/* button.module.css */
.primary { background: blue; }
import styles from './button.module.css';
// styles.primary → 'button_primary__abc123'

Вопрос​

Что такое Shadow DOM и как он влияет на CSS?

Ответ​

Shadow DOM создаёт инкапсулированное поддерево DOM, изолированное от основного документа. Стили извне не проникают внутрь, и наоборот. Для стилизации используются:

  • :host — стилизация хост-элемента
  • ::slotted() — стилизация слотов
  • ::part() и exportparts — кросс-компонентная стилизация

Вопрос​

Что такое @layer?

Ответ​

@layer позволяет группировать стили в слои каскада с предсказуемым порядком применения:

@layer reset, base, components, utilities;
@layer reset {
  * { margin: 0; }
}
@layer utilities {
  .hidden { display: none; }
}

Слои с более поздним объявлением имеют больший приоритет, даже если их правила объявлены раньше.

Вопрос​

Зачем нужен @scope?

Ответ​

@scope (экспериментальная функция) ограничивает применение стилей определённым поддеревом DOM, без полной изоляции Shadow DOM:

@scope (.card) {
  h2 { color: red; } /* применяется только внутри .card */
}

Вопрос​

Что делает :has()?

Ответ​

:has() — родительский селектор, позволяющий выбирать элемент на основе его потомков:

/* Кнопка, содержащая иконку */
.button:has(.icon) {
  padding-right: 30px;
}

Поддерживается в современных браузерах (Chrome 105+, Safari 15.4+, Firefox 121+).

Вопрос​

В чём разница между :is() и :where()?

Ответ​

Оба сокращают повторение селекторов, но:

  • :is() сохраняет специфичность самого специфичного селектора внутри
  • :where() всегда имеет специфичность 0
    Пример:
/* Специфичность: 0 + 10 = 10 */
:where(header, main, footer) p { color: red; }

/* Специфичность: max(1, 1, 1) + 1 = 2 */
:is(header, main, footer) p { color: blue; }

Вопрос​

Как избежать конфликтов стилей в крупных проектах?

Ответ​

  • Использовать методологии (BEM, SUIT)
  • Применять CSS Modules или scoped styles (в Vue/Svelte)
  • Разделять стили по слоям (@layer)
  • Минимизировать глобальные селекторы
  • Проводить код-ревью и использовать линтеры (Stylelint)

Вопрос​

Что такое ITCSS?

Ответ​

ITCSS (Inverted Triangle CSS) — архитектурный подход, организующий стили в слои от общего к конкретному:

  1. Settings (переменные)
  2. Tools (миксины, функции)
  3. Generic (ресеты)
  4. Elements (теговые стили)
  5. Objects (абстрактные компоненты)
  6. Components (конкретные UI-блоки)
  7. Utilities (служебные классы)
    Каждый слой переопределяет предыдущий, минимизируя специфичность.

Логические свойства и интернационализация​

Вопрос​

Что такое логические свойства?

Ответ​

Логические свойства заменяют физические (left, right, top, bottom) на потоково-зависимые:

  • margin-inline-start вместо margin-left (в LTR)
  • padding-block-end вместо padding-bottom
    Они автоматически адаптируются под writing-mode и direction.

Вопрос​

Как поддерживать RTL-языки (например, арабский)?

Ответ​

  • Использовать логические свойства (inline-start, block-end)
  • Указать dir="rtl" в корне или компоненте
  • Избегать жёсткой привязки к left/right
  • Тестировать макет в обоих направлениях

Вопрос​

Что делает writing-mode?

Ответ​

Определяет направление строк и блоков:

  • horizontal-tb — горизонтальные строки, сверху вниз (по умолчанию)
  • vertical-rl — вертикальные строки, справа налево (для китайского, японского)
  • vertical-lr — вертикальные строки, слева направо

Вопрос​

Как работает direction?

Ответ​

direction: ltr (по умолчанию) или rtl задаёт базовое направление текста и inline-элементов. Влияет на выравнивание, порядок таблиц и поведение text-align: start/end.

Вопрос​

Что означает text-align: start?

Ответ​

Выравнивание по началу строки в зависимости от direction:

  • ltr → left
  • rtl → right
    Аналогично end → противоположный край.

Вопрос​

Можно ли использовать float в RTL?

Ответ​

Да, но float: left в RTL будет вести себя как right. Лучше использовать логические альтернативы (float: inline-start) или избегать float в пользу Flexbox/Grid.

Вопрос​

Что такое text-combine-upright?

Ответ​

Позволяет размещать несколько символов (например, цифры) в одной ячейке вертикального текста:

.tcy {
  writing-mode: vertical-rl;
  text-combine-upright: all;
}

Вопрос​

Как управлять переносом длинных URL или кода?

Ответ​

.code {
  overflow-wrap: break-word;
  word-break: break-all; /* или break-word */
  white-space: pre-wrap;
}

Вопрос​

Что делает white-space: pre-line?

Ответ​

Сохраняет переносы строк из исходного текста, но игнорирует лишние пробелы. Аналогично <pre>, но с нормальным поведением пробелов.

Вопрос​

Как предотвратить разрыв слова на двух строках?

Ответ​

Обернуть слово в <span> с white-space: nowrap:

<span class="nobreak">JavaScript</span>
.nobreak {
  white-space: nowrap;
}

Многостолбцовая вёрстка и продвинутые макеты​

Вопрос​

Как создать многостолбцовый текст?

Ответ​

С помощью свойств column-count или column-width:

.columns {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

Вопрос​

Можно ли управлять разрывами между колонками?

Ответ​

Да. Свойство break-inside: avoid предотвращает разрыв элемента между колонками:

.card {
  break-inside: avoid;
}

Вопрос​

Что такое субгрид (subgrid)?

Ответ​

Subgrid позволяет дочерним элементам grid-контейнера наследовать треки родительской сетки, обеспечивая выравнивание между уровнями вложенности:

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.child {
  display: grid;
  grid-template-columns: subgrid; /* наследует колонки от .parent */
}

Вопрос​

Поддерживается ли subgrid в браузерах?

Ответ​

Subgrid поддерживается в Firefox (с версии 71) и Safari (с версии 16). В Chrome — с версии 117 (октябрь 2023). Для старых браузеров требуется fallback через повторное определение треков.

Вопрос​

Что такое CSS Exclusions?

Ответ​

Exclusions — экспериментальная технология, позволяющая обтекать контент вокруг произвольных фигур (не только float). На данный момент не реализована в основных браузерах и считается устаревшей.

Вопрос​

Что такое CSS Shapes?

Ответ​

CSS Shapes (shape-outside) позволяет задавать не прямоугольную форму для обтекания текстом:

.circle {
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
}

Вопрос​

Как работает shape-outside?

Ответ​

shape-outside определяет геометрическую область, вокруг которой будет обтекать inline-контент. Работает только с floated-элементами. Поддерживает circle(), ellipse(), polygon(), inset() и изображения с альфа-каналом.

Вопрос​

Что такое Popover API?

Ответ​

Popover API — нативный способ создания всплывающих окон без JavaScript:

<button popovertarget="menu">Открыть</button>
<div id="menu" popover>Меню</div>

Элемент с атрибутом popover скрыт по умолчанию и показывается при активации через popovertarget.

Вопрос​

Как стилизовать backdrop для popover?

Ответ​

Используется псевдоэлемент ::backdrop:

#menu::backdrop {
  background: rgba(0,0,0,0.5);
}

Вопрос​

Что такое <dialog> и как его использовать?

Ответ​

<dialog> — семантический элемент для модальных и немодальных окон. Управляется через JS:

const dialog = document.querySelector('dialog');
dialog.showModal(); // модальное
dialog.close();

Стилизуется через ::backdrop.

Современные возможности и анимации​

Вопрос​

Что такое View Transitions API?

Ответ​

View Transitions API позволяет создавать плавные переходы между состояниями DOM (например, при SPA-навигации):

document.startViewTransition(() => {
  // обновление DOM
});

CSS предоставляет псевдоэлементы ::view-transition-old() и ::view-transition-new() для стилизации.

Вопрос​

Как работают scroll-driven animations?

Ответ​

Анимации, привязанные к прокрутке, управляются через @scroll-timeline или animation-timeline: scroll():

@scroll-timeline slide {
  source: selector(#scroller);
  orientation: block;
}
.box {
  animation: fade 1s linear;
  animation-timeline: slide;
}

Вопрос​

Что такое anchor positioning?

Ответ​

Anchor positioning (экспериментальная функция) позволяет позиционировать элемент относительно другого, даже если они не связаны иерархией DOM:

.tooltip {
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(center);
}

Вопрос​

Как объявить anchor?

Ответ​

Через CSS-переменную с типом <anchor>:

.button {
  anchor-name: --my-anchor;
}

Вопрос​

Что такое CSS nesting?

Ответ​

CSS nesting позволяет вкладывать правила внутрь селекторов, как в препроцессорах:

.card {
  padding: 1rem;
  & .title { font-weight: bold; }
  &:hover { background: #f0f0f0; }
}

Поддерживается в современных браузерах (Chrome 120+, Safari 17+, Firefox 123+).

Цвет, шрифты и переменные​

Вопрос​

Что делает color-mix()?

Ответ​

color-mix() смешивает два цвета в заданном цветовом пространстве:

.text {
  color: color-mix(in srgb, red 30%, blue);
}

Вопрос​

Что такое relative color syntax?

Ответ​

Позволяет модифицировать существующий цвет, ссылаясь на его компоненты:

:root {
  --base: #3498db;
}
.lighter {
  --light: rgb(from var(--base) r g b / 0.8);
  background: var(--light);
}

Вопрос​

Как использовать light-dark()?

Ответ​

light-dark() автоматически выбирает цвет в зависимости от схемы:

.icon {
  fill: light-dark(black, white);
}

Эквивалентно медиазапросу prefers-color-scheme, но короче.

Вопрос​

Что такое font-tech()?

Ответ​

font-tech() используется внутри @supports для проверки поддержки технологий шрифтов:

@supports (font-tech(color-COLRv1)) {
  .emoji { font-family: "ColorFont"; }
}

Вопрос​

Зачем нужно size-adjust в @font-face?

Ответ​

size-adjust корректирует размер шрифта, чтобы он визуально соответствовал системному шрифту, уменьшая FOUT/FOIT:

@font-face {
  font-family: 'Custom';
  src: url('...');
  size-adjust: 90%;
}

Доступность и пользовательские предпочтения​

Вопрос​

Что такое forced-colors?

Ответ​

Медиазапрос forced-colors: active активируется, когда ОС применяет ограниченную палитру (например, Windows High Contrast Mode). Стили должны адаптироваться:

@media (forced-colors: active) {
  .button {
    border: 2px solid ButtonText;
    background: ButtonFace;
  }
}

Вопрос​

Как использовать prefers-contrast?

Ответ​

Определяет предпочтение пользователя к контрастности:

@media (prefers-contrast: high) {
  body { contrast: 1.5; }
}
@media (prefers-contrast: low) {
  body { contrast: 0.8; }
}

Вопрос​

Что делает prefers-reduced-transparency?

Ответ​

Указывает, что пользователь предпочитает избегать полупрозрачных элементов. Используется для отключения backdrop-filter: blur() или opacity < 1.

Вопрос​

Как реагировать на prefers-reduced-data?

Ответ​

Пользователь просит минимизировать трафик. Можно отключить тяжёлые фоновые изображения или анимации:

@media (prefers-reduced-data: reduce) {
  .hero { background-image: none; }
}

Вопрос​

Можно ли определить объём памяти устройства через CSS?

Ответ​

Нет, но можно через JavaScript (navigator.deviceMemory). Однако в CSS можно использовать медиазапрос device-memory (экспериментальный, не стандартизирован). На практике — редко используется.

Безопасность, производительность и инструменты​

Вопрос​

Как CSP влияет на CSS?

Ответ​

Content Security Policy может блокировать:

  • инлайновые стили (style="..."), если не разрешены через unsafe-inline или nonce/hash
  • @import из внешних источников
  • загрузку шрифтов из недоверенных доменов
    Решение — использовать внешние файлы и указывать хеши или nonce в заголовках.

Вопрос​

Что такое SRI и как он связан с CSS?

Ответ​

Subresource Integrity (SRI) гарантирует, что внешний CSS-файл не был изменён. Добавляется через атрибут integrity:

<link rel="stylesheet"
      href="https://cdn.example.com/style.css"
      integrity="sha384-...">

Вопрос​

Нужны ли автопрефиксы в 2026 году?

Ответ​

В большинстве случаев — нет. Современные браузеры поддерживают стандартные свойства. Но для некоторых функций (например, -webkit-line-clamp) префиксы всё ещё необходимы. Использование PostCSS с плагином autoprefixer остаётся рекомендованной практикой.

Вопрос​

Что делает PostCSS?

Ответ​

PostCSS — инструмент для обработки CSS с помощью плагинов. Позволяет:

  • добавлять автопрефиксы
  • использовать будущие стандарты (nesting, custom media)
  • линтить код (Stylelint)
  • минифицировать
    Интегрируется в сборщики (Vite, Webpack).

Вопрос​

Как проверить поддержку CSS-функции в браузере?

Ответ​

Через @supports в CSS или CSS.supports() в JavaScript:

@supports (display: grid) {
  .container { display: grid; }
}
if (CSS.supports('display', 'grid')) { /* ... */ }

Каскад, наследование и глобальные ключевые слова​

Вопрос​

Что делает ключевое слово initial?

Ответ​

initial устанавливает свойству его начальное (initial) значение, определённое в спецификации CSS, независимо от каскада или наследования. Например:

p {
  color: initial; /* обычно black, даже если родитель красный */
}

Вопрос​

Что делает inherit?

Ответ​

inherit заставляет свойство наследовать вычисленное значение от родительского элемента, даже если свойство по умолчанию не наследуется:

div {
  border: inherit; /* наследует border от родителя */
}

Вопрос​

В чём разница между unset и initial?

Ответ​

unset действует как inherit, если свойство наследуемое, и как initial, если нет. initial всегда сбрасывает к начальному значению.

Вопрос​

Что делает revert?

Ответ​

revert отменяет авторские стили и возвращает значение из предыдущего источника каскада: пользовательских стилей или user-agent (браузерных). Полезно для сброса к «естественному» поведению без потери семантики.

Вопрос​

Что такое revert-layer?

Ответ​

revert-layer отменяет стили только внутри текущего каскадного слоя (@layer) и возвращает значение из предыдущего слоя или источника. Позволяет делать частичный сброс в архитектуре с @layer.

Вопрос​

Что делает свойство all?

Ответ​

all сбрасывает все анимируемые CSS-свойства сразу:

.reset {
  all: initial; /* или unset, revert, revert-layer */
}

Исключает: direction, unicode-bidi, CSS custom properties.

Вопрос​

Как определяется порядок применения стилей при равной специфичности?

Ответ​

При равной специфичности и отсутствии !important побеждает правило, объявленное позже в источнике (source order).

Вопрос​

Где находятся браузерные стили по умолчанию?

Ответ​

Браузеры применяют user-agent stylesheet — встроенный CSS, задающий базовые стили (например, h1 { font-size: 2em; }). Его можно просмотреть в DevTools в разделе «User Agent Stylesheet».

Вопрос​

Что лучше: reset или normalize?

Ответ​

Normalize (например, modern-normalize) сохраняет полезные браузерные стили и делает поведение единообразным. Reset (например, Eric Meyer Reset) обнуляет всё. Normalize предпочтительнее для большинства проектов.

Вопрос​

Что такое modern-normalize?

Ответ​

modern-normalize — современная замена normalize.css, ориентированная на evergreen-браузеры. Устраняет различия в поведении, сохраняя семантически корректные значения по умолчанию.

Состояния элементов и формы​

Вопрос​

В чём разница между :valid и :user-valid?

Ответ​

:valid применяется сразу, если поле соответствует ограничениям. :user-valid активируется только после взаимодействия пользователя (например, после потери фокуса), что улучшает UX.

Вопрос​

Как стилизовать placeholder?

Ответ​

Через псевдоэлемент ::placeholder:

input::placeholder {
  color: #999;
  font-style: italic;
}

Вопрос​

Как определить, показан ли placeholder?

Ответ​

С помощью псевдокласса :placeholder-shown:

input:placeholder-shown {
  border-color: gray;
}

Вопрос​

Как стилизовать checkbox/radio без замены на div?

Ответ​

Использовать accent-color для изменения цвета выделения:

input[type="checkbox"] {
  accent-color: #3498db;
}

Вопрос​

Что такое :indeterminate?

Ответ​

:indeterminate применяется к checkbox или radio, когда их состояние не определено (например, «частично выбрано» у родительского чекбокса):

checkbox.indeterminate = true;

Вопрос​

Как стилизовать фокус только при клавиатурной навигации?

Ответ​

Использовать :focus-visible:

.button:focus-visible {
  outline: 2px solid blue;
}

Скрывает outline при клике мышью, но показывает при Tab.

Вопрос​

Что делает :focus-within?

Ответ​

Применяется к элементу, если он сам или любой из его потомков находится в фокусе:

.card:focus-within {
  box-shadow: 0 0 0 2px blue;
}

Вопрос​

Как скрыть стандартный outline?

Ответ​

.element {
  outline: none;
}

Но обязательно обеспечить альтернативную индикацию фокуса для доступности.

Вопрос​

Что такое caret-color?

Ответ​

caret-color задаёт цвет текстового курсора (каретки):

input {
  caret-color: red;
}

Вопрос​

Как изменить внешний вид нативных элементов (кнопок, селектов)?

Ответ​

С помощью appearance: none, затем стилизовать вручную:

select {
  appearance: none;
  background: white;
  border: 1px solid #ccc;
  padding: 5px;
}

Единицы, безопасные зоны и viewport​

Вопрос​

В чём разница между vh и dvh?

Ответ​

vh — 1% от layout viewport (может меняться при появлении адресной строки).
dvh (dynamic viewport height) — 1% от динамического viewport, включая адресную строку и панель навигации. Гарантирует стабильность на мобильных.

Вопрос​

Как использовать безопасные зоны (safe areas)?

Ответ​

Через переменные окружения env():

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

Вопрос​

Что такое svh и lvh?

Ответ​

  • svh — small viewport height (минимальная высота, например, при развёрнутой адресной строке)
  • lvh — large viewport height (максимальная высота, например, при скрытой панели)
    Полезны для точного контроля над full-height макетами на iOS/Android.

Вопрос​

Как сделать элемент на всю высоту экрана без прокрутки на iOS?

Ответ​

Использовать 100dvh вместо 100vh:

.fullscreen {
  height: 100dvh;
}

Производительность и инструменты​

Вопрос​

Какие CSS-свойства вызывают reflow?

Ответ​

Свойства, влияющие на геометрию: width, height, padding, margin, top, left, font-size, display, position и др. Избегайте их анимации.

Вопрос​

Какие свойства вызывают repaint, но не reflow?

Ответ​

Свойства, не меняющие layout: background, color, box-shadow, visibility. Они всё ещё требуют перерисовки, но дешевле.

Вопрос​

Какие свойства можно анимировать без repaint/reflow?

Ответ​

transform и opacity — они обрабатываются на уровне композитора GPU и не вызывают layout/paint.

Вопрос​

Как проверить, какие стили применяются к элементу?

Ответ​

В DevTools:

  1. Выбрать элемент
  2. Вкладка «Styles» — показывает все применённые правила с источниками
  3. Вкладка «Computed» — итоговые вычисленные значения

Вопрос​

Как отладить каскад и специфичность?

Ответ​

В DevTools:

  • Зачёркнутые свойства — переопределены
  • Порядок правил — от верхнего (менее приоритетного) к нижнему (победившему)
  • Можно временно отключать правила для тестирования

Вопрос​

Что такое CSS Containment?

Ответ​

contain изолирует элемент от остального дерева, позволяя браузеру оптимизировать layout, paint и size. Значения: layout, style, paint, size, content.

Вопрос​

Как работает contain: paint?

Ответ​

Элемент и его потомки не будут отображаться за пределами своей границы, даже если содержимое выходит наружу. Эффективно заменяет overflow: hidden для производительности.

Вопрос​

Что такое content-visibility: auto?

Ответ​

Откладывает рендеринг элемента, пока он не попадёт в область просмотра. Ускоряет загрузку длинных страниц:

.offscreen {
  content-visibility: auto;
  contain-intrinsic-size: 100px; /* резервирует место */
}

Вопрос​

Как измерить производительность CSS-анимаций?

Ответ​

В DevTools → Performance:

  • Запись профиля
  • Анализ фаз: Layout, Paint, Composite
  • Идеально: только Composite при анимации

Вопрос​

Что такое forced synchronous layout?

Ответ​

Происходит, когда JavaScript читает layout-свойство (например, offsetHeight) сразу после изменения другого. Браузер вынужден синхронно пересчитать layout, блокируя поток. Избегайте чередования чтения и записи layout.

Прокрутка, навигация и поведение viewport​

Вопрос​

Что такое scroll snapping?

Ответ​

Scroll snapping — это механизм, при котором прокрутка «защёлкивается» на определённых точках (snap points). Используется для каруселей или секционных макетов:

.container {
  scroll-snap-type: y mandatory;
}
.item {
  scroll-snap-align: start;
}

Вопрос​

В чём разница между mandatory и proximity в scroll-snap-type?

Ответ​

  • mandatory — прокрутка всегда останавливается на snap point, даже при быстром свайпе.
  • proximity — защёлкивание происходит только если пользователь остановился близко к точке.

Вопрос​

Как отключить «отскок» при прокрутке до края на iOS?

Ответ​

С помощью overscroll-behavior: contain:

body {
  overscroll-behavior-y: contain;
}

Предотвращает жесты «потянуть для обновления» и переходы между вкладками.

Вопрос​

Как сохранить позицию прокрутки при возврате по истории?

Ответ​

Браузеры поддерживают bfcache (back/forward cache) автоматически. Для сложных случаев можно управлять вручную:

window.addEventListener('pageshow', (e) => {
  if (e.persisted) {
    // восстановление состояния
  }
});

Вопрос​

Как программно прокручивать плавно?

Ответ​

Использовать scroll-behavior: smooth на контейнере или метод element.scrollIntoView():

element.scrollIntoView({ behavior: 'smooth' });

Современные компоненты и API​

Вопрос​

Как стилизовать backdrop у <dialog>?

Ответ​

Через псевдоэлемент ::backdrop:

dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

Вопрос​

Можно ли закрыть popover по клику вне него?

Ответ​

Да, поведение встроено: popover автоматически закрывается при клике вне его области или при нажатии Escape.

Вопрос​

Как сделать popover модальным?

Ответ​

Добавить атрибут popover="manual" и управлять вручную через JS, или использовать <dialog> для истинно модального поведения.

Вопрос​

Что такое anchor positioning и зачем он нужен?

Ответ​

Anchor positioning позволяет позиционировать элемент (например, тултип) относительно другого элемента, даже если они не связаны в DOM. Упрощает создание сложных всплывающих интерфейсов без JavaScript-расчётов.

Вопрос​

Как объявить anchor в CSS?

Ответ​

Через свойство anchor-name:

.button {
  anchor-name: --my-button;
}
.tooltip {
  position: absolute;
  top: anchor(--my-button bottom);
  left: anchor(--my-button center);
}

Контейнерные запросы и адаптивность​

Вопрос​

Что такое style container queries?

Ответ​

Style container queries позволяют применять стили на основе значений CSS-свойств контейнера, а не только его размеров:

@container style(--theme: dark) {
  .card { background: #111; }
}

Вопрос​

Как объявить стильный контейнер?

Ответ​

Любой элемент с кастомным свойством может быть стильным контейнером. Достаточно использовать @container style(...) — явного объявления container-type не требуется.

Архитектура и поддержка​

Вопрос​

Что такое design tokens в контексте CSS?

Ответ​

Design tokens — именованные переменные (цвета, отступы, радиусы), используемые для обеспечения согласованности дизайна. В CSS реализуются через кастомные свойства:

:root {
  --color-primary: #3498db;
  --space-md: 16px;
}

Вопрос​

Как обеспечить поддержку старых браузеров при использовании новых функций CSS?

Ответ​

  • Использовать @supports для прогрессивного улучшения
  • Предоставлять fallback-стили выше основных правил
  • Применять PostCSS с плагинами для полифилов (ограниченно)
  • Тестировать в целевых браузерах

Вопрос​

Что такое critical CSS?

Ответ​

Critical CSS — это минимальный набор стилей, необходимый для отображения контента «above the fold». Инлайнится в <head> для ускорения LCP (Largest Contentful Paint).

Доступность и производительность​

Вопрос​

Как CSS влияет на доступность?

Ответ​

CSS влияет на:

  • Контрастность текста
  • Размеры интерактивных элементов
  • Видимость фокуса
  • Поведение при масштабировании
  • Поддержку режимов (тёмная тема, сниженная анимация)
    Следует соблюдать WCAG и тестировать с клавиатурой и скринридерами.

Вопрос​

Как избежать layout shift из-за шрифтов?

Ответ​

  • Использовать font-display: swap
  • Задавать size-adjust в @font-face
  • Резервировать пространство с помощью aspect-ratio или min-height
  • Предпочитать системные шрифты для критического текста

Вопрос​

Что такое CLS и как CSS на него влияет?

Ответ​

CLS (Cumulative Layout Shift) — метрика стабильности макета. CSS может вызывать сдвиги через:

  • Позднюю загрузку шрифтов
  • Изображения без width/height
  • Динамическое добавление баннеров
    Решение: резервировать место заранее.

Вопрос​

Как уменьшить объём неиспользуемого CSS?

Ответ​

  • Использовать инструменты вроде PurgeCSS или UnCSS
  • Анализировать покрытие в DevTools (Coverage tab)
  • Разделять стили по маршрутам (code splitting)
  • Удалять неиспользуемые компоненты

Вопрос​

Что будет в будущем CSS?

Ответ​

Активно развиваются:

  • View Transitions API
  • Anchor Positioning
  • Style Container Queries
  • CSS Nesting (уже в браузерах)
  • Houdini (Paint, Layout, Animation Worklets)
  • Relative Color Syntax
  • Light-dark() и color-mix()
    Эти функции делают CSS мощнее и уменьшают зависимость от JavaScript.
Освоение главы0%