Réinitialiser la propriété d'affichage CSS à la valeur par défaut

est-il possible d'outrepasser la propriété display avec sa valeur par défaut? Par exemple, si je l'ai défini à none Dans un style, et je veux l'Annuler dans un autre avec son défaut.

ou est-ce le seul moyen de savoir ce qu'est la valeur par défaut de cet élément et de la définir? Vous n'avez pas besoin de savoir si l'élément est habituellement bloc, en ligne ou autre...

146
demandé sur Svish 2011-11-22 19:06:17

6 réponses

les styles par défaut d'un navigateur sont définis dans sa feuille de style agent utilisateur, dont les sources sont ici . Malheureusement, la cascade et héritage niveau 3 spec ne semble pas proposer une façon de réinitialiser une propriété de style à son navigateur par défaut. Toutefois, il est prévu de réintroduire un mot-clé pour cela dans cascade et niveau D'héritage 4 - le groupe de travail n'a tout simplement pas réglé sur un nom pour ce mot-clé encore (le lien dit actuellement revert , mais il n'est pas final).

alors que la spécification de niveau 3 introduit un initial mot-clé , en définissant une propriété à sa valeur initiale la réinitialise à sa valeur par défaut tel que défini par CSS , pas tel que défini par le navigateur . La valeur initiale de display est inline ; elle est spécifiée ici. . Le mot-clé initial renvoie à cette valeur, et non à la valeur par défaut du navigateur. La spec elle-même fait cette note sous le all bien :

par exemple, si un auteur spécifie all: initial sur un élément, il bloquera tout héritage et réinitialisera toutes les propriétés, comme si aucune règle n'apparaissait dans les niveaux auteur, utilisateur, ou utilisateur-agent de la cascade.

Cela peut être utile pour la racine élément d'un "widget" inclus dans une page, ce qui ne souhaitent pas hériter les styles de l'extérieur de la page. Il convient toutefois de noter que tout style "par défaut" appliqué à cet élément (par exemple display: block de la feuille de style UA sur les éléments de bloc tels que <div> ) sera également soufflé.

donc je suppose que la seule façon d'utiliser CSS pur est de rechercher la valeur par défaut du navigateur et de la régler manuellement à cela: 

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

(An une alternative à ce qui précède serait div.foo:not(.bar) { display: inline-block; } , mais cela implique de modifier le sélecteur d'origine plutôt qu'une commande de surpassement.)

138
répondu BoltClock 2017-12-18 02:15:29

si javascript est autorisé , vous pouvez définir la propriété display à une chaîne vide. Cela va faire pour utiliser la valeur par défaut pour cet élément. 

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

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

Voici un lien vers un jsbin .

c'est agréable parce que vous n'avez pas à vous soucier des différents types d'affichage pour revenir à ( block , inline , inline-block , table-cell , etc).

mais, il nécessite javascript, donc si vous êtes à la recherche d'une solution uniquement css, alors ce n'est pas la solution pour vous.

Note: Ceci prévaut sur les styles en ligne, mais pas les styles définis dans css

22
répondu thetallweeks 2015-01-28 17:29:56

Unset display :

vous pouvez utiliser la valeur unset qui fonctionne à la fois Firefox et Chrome . 

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }
7
répondu Sheharyar 2017-03-17 20:47:43

non, ce n'est généralement pas possible. Une fois qu'un code CSS (ou HTML) fixe une valeur pour une propriété sur un élément, il n'y a aucun moyen de l'annuler et de dire au navigateur d'utiliser sa valeur par défaut.

il est bien sûr possible de définir une propriété dont la valeur par défaut est expect . Cela peut fonctionner assez largement si vous consultez la section rendant de HTML5 CR, reflétant principalement ce que les navigateurs font réellement.

toujours, la réponse est" non", parce que les navigateurs peuvent avoir toutes les valeurs par défaut qu'ils aiment. Vous devez analyser quelle était la raison pour laquelle vous vouliez réinitialiser à des valeurs par défaut; le problème original peut encore être résolu.

6
répondu Jukka K. Korpela 2013-10-28 17:02:20

concernant la réponse de BoltClock et John, j'ai personnellement eu des problèmes avec le mot-clé initial en utilisant IE11. Il fonctionne bien dans le Chrome, mais dans IE il semble avoir aucun effet.

selon cette réponse IE ne supporte pas le mot-clé initial: Div d'affichage:initial ne fonctionne pas comme prévu dans ie10 et chrome 29

j'ai essayé de le laisser vide à la place comme suggéré ici: comment revenir à la normale après affichage:Aucun pour la ligne de table

cela a fonctionné et était assez bon pour mon scénario. Bien sûr, pour définir la vraie valeur initiale la réponse ci-dessus est la seule bonne que j'ai pu trouver.

3
répondu Søren Ullidtz 2017-05-23 12:18:24

si vous avez accès à JavaScript , vous pouvez créer un élément et lire son style calculé. 

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'
3
répondu Frederik Krautwald 2017-01-31 00:05:02