От автора: по своему определению разработка стилей включает в себя установку CSS свойствам новых значений. Сложные стили, в конечном счете, доходят до такой точки, когда необходимо «потереть» CSS значения, т.е. сбросить их на начальные. В отдельных случаях первоначальные значения известны, их легко запомнить. У других же свойств все не так. К счастью, современный CSS дает нам простой способ сброса свойств.
Дави на кнопку
Скажем, вы задали изображениям свойство float: left по умолчанию:
|
1 |
img { float: left; } |
И потом вам нужно сбросить обтекание изображений с определенными условиями (изображения с классом .recall)… а вы не помните, стоит ли float: none или что-то еще.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееДругими словами, вы знаете, что по умолчанию обтеканий быть не должно, но вы не помните, как это сделать. И чтобы не искать способы, лучше добавьте следующую строчку кода:
|
1 |
img.recall { float: initial; } |
Распространенное заблуждение, что значение initial сбрасывает свойство к значению, которое впервые было задано в стилях, или к значению по умолчанию, прописанному в спецификации CSS. Неверно ни то ни другое: значение initial сбрасывает свойство к значению по умолчанию в браузере пользователя.
В большинстве случаев начальное значение будет одинаковым во всех браузерах. Значение initial в частности полезно в ряде случаев.
Способы использования
Значение initial можно использовать для сброса цвета. В подавляющем большинстве браузеров начальный цвет основного текста черный. Код ниже сбрасывает цвет для заголовков:
|
1 2 |
body { color: hsl(333, 50%, 25%); } h1, h2, h3 { color: initial; } |
Черный не всегда является цветом по умолчанию, это зависит от конкретных разработчиков браузеров (и пользователей). То есть код ниже:
|
1 |
aside { font-family: initial; } |
… по-разному будет работать в браузерах. Шрифт по умолчанию не всегда будет Times New Roman, так как во всех браузерах разные настройки по умолчанию.
Для значения initial есть еще несколько способов применения:
сброс z-index к значению по умолчанию;
сброс margin и transform к значениям по умолчанию.
Ограничения
Одна из основных причин редкого использования initial в CSS – полное отсутствие поддержки в IE, хотя в остальных браузерах значение работает уже много лет. В MS Edge недавно появилась поддержка данного значения… а значит, initial все чаще будет встречаться в стилях в будущем.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
