Сбросить свойство отображения CSS на значение по умолчанию

172

Можно ли переопределить свойство display значением по умолчанию? Например, если я установил его на none в одном стиле, и я хочу переопределить его в другом по умолчанию.

Или это единственный способ выяснить, что по умолчанию для этого элемента, а затем установить его на это? Хотелось бы не знать, является ли элемент обычно блочным, встроенным или каким бы то ни было ...

Svish
источник
5
Теперь это возможно с помощью unset.
минут
1
Я знаю, что этот вопрос задает только вопрос об отображении сброса настроек браузера по умолчанию, но для многих людей, которые посещают эту страницу и хотят сбросить все атрибуты до значений по умолчанию браузера, используйте: .myclass {all: unset; } div {all: unset; } и т. д.
user1254723

Ответы:

155

Стили браузера по умолчанию определены в его таблице стилей агента пользователя, источники которой вы можете найти здесь . К сожалению, спецификация Cascading and Inheritance level 3 , по-видимому, не предлагает способ сброса свойства стиля в его браузер по умолчанию. Однако есть планы повторно ввести ключевое слово для этого на уровне 4 каскадирования и наследования - рабочая группа просто еще не определилась с именем для этого ключевого слова (в настоящее время ссылка говорит revert, но она не является окончательной). Информацию о поддержке браузера revertможно найти на сайте caniuse.com .

В то время как спецификация уровня 3 вводит initialключевое слово , установка свойства к его начальному значению сбрасывает его к его значению по умолчанию, как определено CSS , а не как определено браузером . Начальное значение displayявляется inline; это указано здесь . initialКлючевое слово относится к этому значению, а не браузер по умолчанию. Сама спецификация делает это примечание под allсвойством :

Например, если автор указывает all: initialна элемент, он блокирует все наследование и сбрасывает все свойства, как если бы на уровне автора, пользователя или агента пользователя не существовало никаких правил каскада.

Это может быть полезно для корневого элемента «виджета», включенного в страницу, который не хочет наследовать стили внешней страницы. Однако обратите внимание, что любой стиль «по умолчанию», применяемый к этому элементу (например, например, display: blockиз таблицы стилей UA для таких элементов блока, как <div>), также будет удален.

Поэтому я думаю, что единственный способ использовать чистый CSS прямо сейчас - это найти значение по умолчанию в браузере и установить его вручную:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(Альтернативой вышеупомянутому может быть div.foo:not(.bar) { display: inline-block; }, но это включает в себя изменение исходного селектора, а не переопределение.)

BoltClock
источник
5
Ах, почему браузеры всегда должны быть такими медленными, чтобы получать полезную и полезную информацию: p И почему пользователи должны так медленно обновляться ... в любом случае, это именно то, что я хотел!
Свиш
1
@Svish: Оказывается, я неправильно понял, что на initialсамом деле. Я обновил свой ответ.
BoltClock
14
@Svish: CSS определяет начальные значения на уровне свойств, а не для каждого элемента, как я изначально думал. В этом примере начальное значение displayвсегда inline( w3.org/TR/CSS21/visuren.html#display-prop ), независимо от того, находится оно на a divили a span. divЭлемент display: blockпо умолчанию в соответствии с HTML , а не CSS, так что до UA таблицы стилей браузера, чтобы сказать div { display: block; }.
BoltClock
1
«CSS определяет начальные значения на уровне свойств, а не для каждого элемента, как я изначально думал». - Я действительно должен был перечитать это несколько раз, чтобы поверить в это. (Поскольку CSS, кажется, всегда применяется в (некотором) элементном контексте, отсутствие поддержки здесь предлагает что-то нетривиальное для изучения - кто-нибудь знает обоснование?)
Sz.
1
defaultбыл переименован в revert.
Oriol
29

Если использование javascript разрешено , вы можете установить для displayсвойства пустую строку. Это заставит его использовать значение по умолчанию для этого конкретного элемента.

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

Вот ссылка на jsbin .

Это хорошо , потому что вам не придется беспокоиться о различных типах дисплея , чтобы вернуться к ( block, inline, inline-block, table-cellи т.д.).

Но для этого требуется javascript, поэтому, если вы ищете решение только для css, то это не решение для вас.

Примечание: это переопределяет встроенные стили, но не стили, установленные в CSS

thetallweeks
источник
11
Обратите внимание, что это работает, только если стиль был установлен с использованием JavaScript или встроенного styleатрибута. С помощью этого метода вы не можете переопределить или удалить объявление из таблицы стилей.
BoltClock
1
@BoltClock Я не согласен. Вот jsfiddle, который, я думаю, опровергает то, что вы говорите. jsfiddle.net/g45qagt3
thetallweeks
8
Извините, мое использование слова override сбило с толку. Я имею в виду, что установка стиля для пустой строки удалит только тот стиль, который был применен через styleатрибут или установщик JavaScript. Вы все еще можете переопределить объявление таблицы стилей, если вы устанавливаете определенное значение с помощью JS, но установка его на пустое значение эквивалентна не установке его вообще - объявление таблицы стилей останется без изменений. Смотрите измененную скрипку: jsfiddle.net/BoltClock/g45qagt3/1
BoltClock
1
Стоит отметить, что пустая строка работает для любого свойства, а не только для «отображения»
Артур Беляев
11

Unset display:

Вы можете использовать значение, unsetкоторое работает как в Firefox, так и в Chrome .

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }
Sheharyar
источник
5
unsetимеет те же проблемы, что и initial. Ценность displayстанет inline. См. Codepen.io/Gidgidonihah/pen/mwWxEq
Гидгидониха
ОП явно хочет сбросить значение по умолчанию для каждого элемента, например, чтобы сбросить span на inline и div на block. unsetне поможет с этим, так как для каждого свойства и всегда сбрасывает отображение на inline. Пожалуйста, рассмотрите возможность обновления своего ответа.
Крулик
6

Нет, это вообще невозможно. Как только некоторый код CSS (или HTML) устанавливает значение для свойства элемента, невозможно отменить его и сказать браузеру использовать его значение по умолчанию.

Конечно, можно установить для свойства значение, которое вы ожидаете использовать в качестве значения по умолчанию. Это может работать довольно широко, если вы проверите раздел « Рендеринг » в HTML5 CR, в основном отражая действия браузеров.

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

Юкка К. Корпела
источник
5

Если у вас есть доступ к JavaScript , вы можете создать элемент и прочитать его вычисленный стиль.

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'
Фредерик Краутвальд
источник
1
Оказалось, что вам нужно добавить сгенерированный элемент к тегу <body>, чтобы получить вычисляемый стиль, по крайней мере, в Chrome.
димплекс
4

Что касается ответа от BoltClock и Джона, у меня лично были проблемы с исходным ключевым словом при использовании IE11. Он отлично работает в Chrome, но в IE, похоже, не имеет никакого эффекта.

Согласно этому ответу IE не поддерживает начальное ключевое слово: Div display: начальное не работает, как задумано в ie10 и chrome 29

Я попытался установить его пустым вместо этого, как предложено здесь: как вернуться к нормальному состоянию после отображения: нет для строки таблицы

Это сработало и было достаточно для моего сценария. Конечно, чтобы установить реальное начальное значение, приведенный выше ответ - единственный хороший, который я смог найти.

Сорен Уллидтц
источник