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

Все выглядело идеально — пока один вложенный элемент div не оказался совершенно неуместным: неожиданный шрифт, фоновый цвет, отступы... Полный хаос. После тридцати минут изучения унаследованных стилей я понял, что виновником была глубоко вложенная наследуемая CSS-стилизация сразу нескольких уровней вверх.

Я мечтал просто «стереть» все унаследованные стили.

Оказалось, это возможно.

Знакомьтесь: свойство all

Да, существует буквально CSS-свойство под названием all, которое способно сбросить практически все стили элемента всего одной строчкой.

Что такое свойство CSS all?

Свойство all является мощным сокращенным вариантом в CSS, сбрасывающим абсолютно все свойства элемента, кроме direction и unicode-bidi.

Примеры использования:

  • Сброс унаследованных стилей на глубоко вложенных элементах;
  • Создание чистого холста для компонентов;
  • Избежание специфичности («specificity hell»);
  • Быстрое изолирование стилей при отладке.

Синтаксис

селектор {
  all: initial | inherit | unset;
}

Пример

Допустим, у вас есть блок div, собирающий кучу стилей:

 {
  background-color: yellow;
  color: red;
  font-size: 24px;
}

Но теперь вы хотите полностью удалить эти стили для конкретного экземпляра блока:

.special {
  all: initial;
}

Это правило all: initial сбросит каждый стиль обратно к исходному значению браузера по умолчанию.

Значения свойств подробно

Значение Описание
initial Возвращает все свойства к их начальным значениям по умолчанию.
inherit Принуждает все свойства наследоваться от родительского элемента.
unset Восстанавливается либо значение родителя, либо начальное значение (гибкое поведение).

Как работает внутри?

При использовании свойства all это похоже на ручное сброс всех индивидуальных свойств:

all: initial;
/* Эквивалентно следующему: */
color: initial;
background-color: initial;
margin: initial;
padding: initial;
/* …и сотни других */

Однако писать каждое из них вручную не нужно — all делает это за вас!

Исключения:

  • unicode-bidi;
  • direction. Эти два свойства намеренно остаются неизменными ради логического рендеринга страницы.

Поддержка браузерами

Современная поддержка современных браузеров хорошая:

Браузер Версия поддержки
Chrome 37+
Edge 79+
Firefox 27+
Safari 9.1+
Opera 24+

Просто избегайте его использования, если поддерживаете Internet Explorer.

Практические примеры

  1. Сброс стиля компонента:
    .card * {
    all: unset;
    }
    Удобно в дизайн-системах, когда нужен полный контроль над отображением каждого элемента.
  2. Начало с нуля:
    .reset-box {
    all: initial;
    display: block;
    padding: 1rem;
    border: 1px solid #ccc;
    }
    Идеально подходит для шаблонов электронной почты, встроенных виджетов или сторонних фреймов.

Когда лучше избегать использования?

  • Если точно не знаете, какие именно стили затронете — будьте осторожны!
  • Может стереть важные для доступности стили, такие как контуры выделения (focus outline).
  • Оно не анимируется — свойство all нельзя анимировать.

Вопросы фронтенд-интервью по свойству all

  1. Что делает свойство all в CSS?
  2. Какие свойства исключены из сброса с использованием all?
  3. Чем отличается all: unset от all: initial?
  4. Когда бы вы использовали all в продакшен-UI?
  5. Можно ли анимировать свойство all? Почему да или почему нет?
  6. Как влияет использование all на унаследованные и неунаследованные свойства?
  7. Какие потенциальные недостатки несет небрежное использование all?

Заключительные мысли

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