Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование значения по умолчанию CSS для сброса настроек

17 августа 2017 | Опубликовано в css | Нет комментариев »

По определению разработка файла стилей предполагает задание свойствам CSS новых значений. Сложные файлы стилей со временем дорастают до того момента, когда значения CSS нужно удалить полностью, т. е., сбросить на их значения по умолчанию. В некоторых случаях эти значения по умолчанию хорошо известны и легко запоминаются, но не для всех свойств это верно. К счастью, современные возможности CSS предоставляют нам простой путь для сброса значений свойств.

Сброс настроек

Предположим, что Вы задали изображениям свойство всплытия влево:

img { float: left; }

После этого для изображений в особых случаях, например, для тех, у которых есть класс .recall, нужно задать отсутствие всплытия, но Вы не можете вспомнить, как именно записывается это свойство.

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

img.recall { float: initial; }

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

В большинстве случаев значение по умолчанию будет одним и тем же или близким для всех браузеров. Это значение особенно полезно в следующих ситуациях:

Примеры использования

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

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

Обратите внимание, что черный цвет не обязательно будет цветом по умолчанию, так как это значение зависит от браузеров и, в конечном счете, от самих пользователей. Подобным образом следующая запись:

aside { font-family: initial; }

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

Есть несколько других вариантов применения для значения по умолчанию:

• Сброс значения z-index у элемента на значение по умолчанию.

• Сброс значений внешних отступов и трансформаций на их значения по умолчанию.

Ограничения использования

Одна из основных причин довольно редкого использования значения по умолчанию CSS – полное отсутствие его поддержки в браузере Internet Explorer, хотя в других браузерах оно поддерживается уже много лет. Однако браузер Edge поддерживает это значение, так что, вероятно, значение по умолчанию будет чаще появляться в файлах стилей в будущем.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:




Коментарии запрещены.

[an error occurred while processing the directive]


[an error occurred while processing the directive]