Свойство CSS all

Свойство CSS all — это сокращённое свойство, которое сбрасывает все свойства элемента одновременно, за исключением unicode-bidi и direction, управляющих направлением текста и намеренно оставленных без изменений.

Оно не принимает список значений свойств. Вместо этого ему передаётся одно общее ключевое слово CSS (initial, inherit, unset, revert или revert-layer), которое применяется ко всем свойствам элемента. Это удобный способ отменить унаследованные или ранее объявленные стили в одну строку.

На этой странице рассматриваются синтаксис, все допустимые значения, интерактивные примеры и ситуации, в которых использование all действительно оправдано.

Зачем и когда использовать

Наиболее распространённая причина применения all — создание чистой базовой стилизации. Например, при встраивании виджета или стороннего компонента в страницу могут проникать унаследованные стили (шрифт, цвет, межстрочный интервал). Установка all: initial или all: revert на обёртке убирает это наследование, чтобы компонент начинал работу из предсказуемого состояния.

Имейте в виду следующее:

Это тяжёлое свойство. all затрагивает каждое свойство, поэтому применяйте его к небольшим, изолированным поддеревьям, а не к body или крупным контейнерам.
Оно не сбрасывает direction и unicode-bidi. Это сделано намеренно, чтобы направление текста никогда не нарушалось случайно.
Дочерние элементы не сбрасываются автоматически. all сбрасывает только целевой элемент. Наследуемые свойства (например, color) по-прежнему каскадируются на дочерние элементы, если те тоже не выполняют сброс.

Данное свойство считается сокращением для сброса стилей. В отличие от многозначных сокращений, таких как margin или background, оно не имеет развёрнутой версии и подсвойств.

Начальное значение	normal
Применяется к	Всем элементам.
Наследуется	Нет.
Анимируемо	Нет.
Версия	CSS3
DOM-синтаксис	object.style.all = "inherit";

Синтаксис

Синтаксис свойства CSS all

all: initial | inherit | unset | revert | revert-layer;

Пример свойства all со значением revert:

Пример свойства CSS all со значением revert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        color: #666;
        all: revert;
      }
    </style>
  </head>
  <body>
    <h2>All property example</h2>
    <p>Here the all: revert; is set.</p>
    <div class="example"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства all со значениями inherit, initial и unset:

Пример свойства CSS all со значениями inherit, initial и unset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-size: 15px;
        color: #1c87c9;
      }
      .example1 {
        background-color: #8ebf42;
        color: #666;
      }
      .example2 {
        background-color: #8ebf42;
        color: #666;
        all: inherit;
      }
      .example3 {
        background-color: #8ebf42;
        color: #666;
        all: initial;
      }
      .example4 {
        background-color: #8ebf42;
        color: #666;
        all: unset;
      }
    </style>
  </head>
  <body>
    <h2>All property example</h2>
    <hr />
    <p>No all property:</p>
    <div class="example1"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: inherit:</p>
    <div class="example2"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: initial:</p>
    <div class="example3"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: unset:</p>
    <div class="example4"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr /> 
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание
initial	Устанавливает каждое свойство в его начальное значение, определённое спецификацией, игнорируя наследование.
inherit	Заставляет каждое свойство принимать вычисленное значение от родительского элемента.
unset	Действует как `inherit` для наследуемых свойств (например, `color`) и как `initial` для ненаследуемых (например, `border`).
revert	Откатывает каждое свойство к значению, которое оно имело бы согласно таблице стилей браузера или пользователя, игнорируя авторские стили, объявленные ранее.
revert-layer	Откатывает каждое свойство к значению, установленному в предыдущем каскадном слое.

`unset` и `revert`

Эти два значения легко перепутать:

unset удаляет авторское значение и возвращается к наследованию или начальному значению по спецификации — оно ничего не знает о таблице стилей браузера по умолчанию.
revert активно откатывается к стилизации браузера по умолчанию. Таким образом, all: revert для <h2> сохранит его вид как обычного жирного заголовка, тогда как all: unset сведёт его к обычному тексту с поведением инлайн-элемента.

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

all поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge). Ключевое слово revert появилось позже, чем initial/inherit/unset, а revert-layer требует поддержки каскадных слоёв, поэтому проверьте совместимость, если необходимо поддерживать старые версии браузеров.

Практика

Какие утверждения о свойстве CSS all верны?

all сбрасывает все свойства элемента, кроме direction и unicode-bidi.all принимает разделённый запятыми список значений отдельных свойств.all: revert откатывает свойства к стилизации браузера по умолчанию.all имеет развёрнутые подсвойства, как у margin.all: unset использует inherit для наследуемых свойств и initial для остальных.