Все - CSS-хитрости

Anonim

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

.module ( all: unset; )

Суть в том, чтобы разрешить сброс стилей на уровне компонентов. Иногда гораздо проще начать создание стиля с нуля, чем бороться со всем, что уже есть.

Значения

  • initial: сбрасывает все свойства выбранного элемента в их начальные значения, как определено в спецификации CSS.
  • inherit: выбранный элемент наследует весь стиль своего родительского элемента, включая стили, которые обычно не наследуются.
  • unset: выбранный элемент наследует любые наследуемые значения, переданные от родительского элемента. Если наследуемое значение недоступно, для каждого свойства используется начальное значение из спецификации CSS.

Некоторые свойства не имеют начального значения, явно определенного в спецификации, и вместо этого позволяют пользовательскому агенту устанавливать начальное значение - colorи font-familyэто два примера. Если применяется all: initial;или all: unset;, в качестве initialзначения для этих свойств используется значение по умолчанию пользовательского агента .

allсчитается «сокращенным» свойством, поскольку позволяет нам управлять значениями каждого свойства CSS одновременно с помощью одного объявления. Однако, в отличие от большинства сокращенных свойств, не существует практической «полной» версии, и у нее нет вложенных свойств.

Демо

См. Вкладку CSS для комментариев, указывающих, какие свойства наследуются. Обратите внимание , что , когда inheritзначение используется, то divнаследует все свойства от своего родителя, в том числе и это width, paddingи border, которые обычно не наследуется.

См. Демонстрацию свойств Pen all от CSS-Tricks (@ css-tricks) на CodePen.

Дополнительная информация

  • all в проекте редактора W3C CSS Cascading and Inheritance Level 4
  • Полная таблица свойств CSS2: показывает наследуемость всех свойств CSS2. Спецификация CSS3 разделена на несколько частей и указана в Таблице спецификаций.
  • Знакомство с Initial: подробнее о initialстоимости.
  • Сброс стиля с помощью 'all: unset' в Firefox 27 (2013 г.) Кэмерон Маккормак

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

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox IE Край Сафари
37 27 Нет 79 9.1

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
88 85 4.4.3-4.4.4 9,3