CSS

Полный сброс: использование начальных значений CSS

От автора: по своему определению разработка стилей включает в себя установку CSS свойствам новых значений. Сложные стили, в конечном счете, доходят до такой точки, когда необходимо «потереть» CSS значения, т.е. сбросить их на начальные. В отдельных случаях первоначальные значения известны, их легко запомнить. У других же свойств все не так. К счастью, современный CSS дает нам простой способ сброса свойств.

Дави на кнопку

Скажем, вы задали изображениям свойство float: left по умолчанию:

И потом вам нужно сбросить обтекание изображений с определенными условиями (изображения с классом .recall)… а вы не помните, стоит ли float: none или что-то еще.

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

img.recall{
  float:initial;
}

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

В большинстве случаев начальное значение будет одинаковым во всех браузерах. Значение initial в частности полезно в ряде случаев.

Способы использования

Значение initial можно использовать для сброса цвета. В подавляющем большинстве браузеров начальный цвет основного текста черный. Код ниже сбрасывает цвет для заголовков:

body{
  color:hsl(333,50%,25%);
}
h1,h2,h3{
  color:initial;}

Черный не всегда является цветом по умолчанию, это зависит от конкретных разработчиков браузеров (и пользователей). То есть код ниже:

aside{
  font-family:initial;
}

… по-разному будет работать в браузерах. Шрифт по умолчанию не всегда будет Times New Roman, так как во всех браузерах разные настройки по умолчанию.

Для значения initial есть еще несколько способов применения:

сброс z-index к значению по умолчанию;

сброс margin и transform к значениям по умолчанию.

Ограничения

Одна из основных причин редкого использования initial в CSS – полное отсутствие поддержки в IE, хотя в остальных браузерах значение работает уже много лет. В MS Edge недавно появилась поддержка данного значения… а значит, initial все чаще будет встречаться в стилях в будущем.

Источник: http://thenewcode.com/