Удаление нативных стилей элементов с помощью CSS all: unset

Вы наверняка сталкивались с этим: вам нужна кнопка с кастомным оформлением, и вы начинаете переопределять браузерные значения по умолчанию одно за другим. border: none. background: none. padding: 0. cursor: pointer. Это работает, но ощущается неправильно — словно вы играете в «прибей крота» с user agent stylesheet.

Существует более чистый подход: CSS-свойство all. А именно — all: unset. В этой статье подробно разбирается, что оно делает, когда его использовать и что оно тихо ломает — включая стили фокуса, от которых зависят пользователи клавиатуры.

Что all: unset на самом деле делает в каскаде CSS

Свойство all — это шорткат, который одновременно задаёт каждое CSS-свойство, за исключением unicode-bidi, direction и CSS custom properties. Согласно MDN, all: unset применяет к каждому свойству следующее правило:

• Если свойство наследуемое (например, color, font-size, line-height), оно наследуется от родителя.
• Если свойство ненаследуемое (например, display, border, background, padding), оно возвращается к начальному значению из спецификации CSS.

Это принципиально важное различие. all: unset не восстанавливает браузерные значения по умолчанию. Оно сбрасывает ненаследуемые свойства к значениям по умолчанию из спецификации — а это не одно и то же. <button> со стилем all: unset не будет выглядеть как обычная браузерная кнопка. Он полностью лишится своих display, appearance, рамки, padding и кольца фокуса.

Четыре значения свойства all

Для кастомных UI-компонентов обычно подходит all: unset. Если же нужно отменить собственные переопределения стилей, сохранив браузерные значения по умолчанию, лучше использовать all: revert.

Правильный сброс стилей кнопки

Вот практический шаблон сброса для кнопки, который убирает нативные стили элемента, не нарушая доступности:

.button-reset {
  all: unset;

  /* Restore safe defaults */
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;

  /* Your custom styles */
  padding: 0.5rem 1rem;
  background: #0070f3;
  color: white;
  border-radius: 4px;
}

/* Always restore focus visibility for keyboard users */
.button-reset:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
}

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

all: unset vs. appearance: none — это не одно и то же

Это распространённый источник путаницы. appearance: none лишь удаляет нативный рендеринг элементов форм на уровне ОС — платформозависимое оформление, благодаря которому <select> выглядит как выпадающий список macOS или combo box в Windows. Оно не затрагивает разметку, отступы, цвет или какое-либо другое CSS-свойство.

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

Для нативных элементов форм, таких как <select>, <input> и <textarea>, часто нужны оба:

select {
  all: unset;
  appearance: none; /* Removes OS-level control rendering */
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

select:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
}

Учтите, что некоторые браузеры также требуют префикс -webkit-appearance: none для полной кросс-браузерной поддержки в старых версиях Safari и iOS. Поддержка all и appearance в современных браузерах надёжная.

Когда не стоит использовать all: unset

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

Также избегайте его на контейнерных элементах. Сброс display у родителя с flex или grid тихо сломает вашу разметку.

Заключение

all: unset — мощный шорткат для удаления нативных стилей у кнопок, ссылок и элементов форм, но он сбрасывает всё, включая свойства, которые вы, вероятно, хотели сохранить. Всегда восстанавливайте display, box-sizing, cursor и особенно :focus-visible после его использования. Сочетайте его с appearance: none при работе с нативными элементами форм, у которых есть рендеринг на уровне ОС. При аккуратном использовании это один из самых чистых инструментов современного CSS для создания кастомных UI-компонентов с нуля.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..