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

Оно доступно в браузерах с 15 июля 2022 года (Baseline: «Widely Available»), так что его можно использовать без оглядки на поддержку.

Что затрагивает all

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

all охватывает почти всё: цвета, отступы, шрифты, рамки, фон, размеры, display, position, visibility, animation — за одним исключением:
all не влияет на direction и unicode-bidi, потому что эти свойства отвечают за направление текста и могут повлиять на чтение контента.

Когда это может быть полезно

1. Сброс стилей

Если вы встраиваете блок в окружение с неизвестными стилями (например, на сторонний сайт, или внутри CMS), и хотите, чтобы он выглядел «с нуля», используйте:

all: initial;

Пример:

<div style="all: initial;">
  Этот блок сбрасывает все стили по умолчанию.
</div>

В результате исчезнут внешние отступы, цвет, фон, шрифт и т. д. — поведение будет как у «чистого» тега.

2. Наследование или переопределение

Можно использовать all с другими ключевыми словами:

  • inherit — применяет значение родителя для всех наследуемых свойств;
  • unset — сбрасывает значение к inherit или initial в зависимости от свойства;
  • revert — отменяет пользовательские стили, возвращая значение, заданное браузером по умолчанию или стилями из user-agent stylesheet.

Пример:

.my-block {
  all: unset;
}

Это приведёт к «обнулению» почти всех стилей, включая display, что может сильно повлиять на поведение элемента (например, блочный div станет строчным).

Осторожно: последствия

  • all может сломать верстку, если используется бездумно. Например, сброс display: block у <div> превращает его в inline, и может нарушить расположение элементов.
  • Не переусердствуйте — чаще всего нужно сбросить только часть свойств (margin, padding, font, background), а не всё.
  • Подходит для изолированных компонентов, но не для повсеместного использования.

Заключение

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

Но применять его стоит с осторожностью: всегда понимайте, какие свойства вы обнуляете и зачем. Лучше использовать all точечно — там, где действительно нужно очистить всё.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.