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

Ответ 1

Стили браузера по умолчанию определены в его таблице стилей агента пользователя, источники которой вы можете найти здесь. К сожалению, спецификация 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; }, но это включает в себя изменение исходного селектора, а не переопределение.)

Ответ 2

Если использование 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

Ответ 3

Unset display:

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

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }

Ответ 4

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

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

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

Ответ 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'

Ответ 6

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

В соответствии с этим ответом IE не поддерживает начальное ключевое слово: Дисплей Div: начальный не работает, как предполагалось, в ie10 и chrome 29

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

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