Скиньте властивість відображення CSS до значення за замовчуванням

Чи можливо замінити властивість відображення за замовчуванням? Наприклад, якщо я встановив його "жоден" в одному стилі, і я хочу його замінити на інший за замовчуванням.

Або це єдиний спосіб дізнатися, що таке елемент за замовчуванням, а потім встановити його для цього? Не хотілося б знати, чи елемент зазвичай блокується, вбудовується чи залежно від того, що ...

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

Якщо використання 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

Видалити display:

Ви можете використовувати значення, unsetяке працює як у Firefox, так і в Chrome .

display: unset;

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

Ні, це взагалі неможливо. Після того, як якийсь код CSS (або HTML) встановлює значення властивості для елемента, немає можливості скасувати його та наказати браузеру використовувати його значення за замовчуванням.

Звичайно, можна встановити для властивості значення, яке, як ви очікуєте, буде значенням за замовчуванням. Це може працювати досить широко, якщо ви переглянете розділ Візуалізація HTML5 CR, в основному відображаючи, що браузери насправді роблять.

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

Якщо у вас є доступ до 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'

Щодо відповіді BoltClock та Джона, у мене особисто були проблеми з початковим ключовим словом під час використання IE11. Це добре працює в Chrome, але в IE, здається, це не має ефекту.

Відповідно до цієї відповіді IE не підтримує початкове ключове слово: Div-дисплей: початковий не працює за призначенням у ie10 та chrome 29

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

Це спрацювало і було досить добре для мого сценарію. Звичайно, щоб встановити реальне початкове значення, вищевказана відповідь - єдине добре, що я міг знайти.