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

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

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

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

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

img { 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/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree