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

Est-il possible de remplacer la propriété d'affichage par sa valeur par défaut? Par exemple, si je l'ai défini sur aucun dans un style et que je souhaite le remplacer dans un autre avec sa valeur par défaut.

Ou est-ce le seul moyen de savoir quelle est la valeur par défaut de cet élément et de le définir ensuite? Aimerait ne pas avoir à savoir si l'élément est généralement un bloc, en ligne ou n'importe quoi ...

Les styles par défaut d'un navigateur sont définis dans sa feuille de style de l'agent utilisateur, dont vous pouvez trouver les sources ici . Malheureusement, la spécification de niveau 3 en cascade et en héritage ne semble pas proposer un moyen de réinitialiser une propriété de style à son navigateur par défaut. Cependant, il est prévu de réintroduire un mot-clé pour cela au niveau 4 en cascade et en héritage - le groupe de travail n'a tout simplement pas encore défini de nom pour ce mot-clé (le lien dit actuellement revert, mais ce n'est pas définitif). Des informations sur la prise en charge du navigateur pour revertpeuvent être trouvées sur caniuse.com .

Alors que la spécification de niveau 3 introduit un initialmot - clé , la définition d'une propriété à sa valeur initiale la réinitialise à sa valeur par défaut telle que définie par CSS , et non telle que définie par le navigateur . La valeur initiale de displayest inline; ceci est spécifié ici . Le initialmot-clé fait référence à cette valeur, pas à la valeur par défaut du navigateur. La spécification elle-même fait cette note sous la allpropriété :

Par exemple, si un auteur spécifie all: initialsur 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 l'élément racine d'un "widget" inclus dans une page, qui ne souhaite pas hériter des styles de la page externe. Notez, cependant, que tout style "par défaut" appliqué à cet élément (comme, par exemple, à display: blockpartir de la feuille de style UA sur des éléments de bloc tels que <div>) sera également époustouflé.

Donc, je suppose que le seul moyen actuellement d'utiliser du CSS pur est de rechercher la valeur par défaut du navigateur et de la définir manuellement:

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

(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 que de remplacer.)

Si l'utilisation de javascript est autorisée , vous pouvez définir la displaypropriété sur une chaîne vide. Cela l'amènera à utiliser la valeur par défaut pour cet élément particulier.

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 fichier jsbin .

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

Mais, cela nécessite JavaScript, donc si vous recherchez une solution css uniquement, ce n'est pas la solution pour vous.

Remarque: Cela remplace les styles en ligne, mais pas les styles définis dans css

Non défini display :

Vous pouvez utiliser la valeur unsetqui fonctionne à la fois dans Firefox et Chrome .

display: unset;

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

Non, ce n'est généralement pas possible. Une fois qu'un certain code CSS (ou HTML) définit 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é d' une valeur que vous attendez d'être la valeur par défaut. Cela peut fonctionner assez largement si vous vérifiez le rendu section de HTML5 CR, reflétant principalement ce que font réellement les navigateurs.

Pourtant, la réponse est «Non», car les navigateurs peuvent avoir les valeurs par défaut qu'ils aiment. Vous devez analyser la raison pour laquelle vous souhaitez réinitialiser les valeurs par défaut; le problème d' origine peut encore être résolu.

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'

Concernant la réponse de BoltClock et John, j'ai personnellement eu des problèmes avec le mot-clé initial lors de l'utilisation d'IE11. Cela fonctionne bien dans Chrome, mais dans IE, cela semble n'avoir aucun effet.

Selon cette réponse, IE ne prend pas en charge le mot-clé initial: Affichage div: initial ne fonctionne pas comme prévu dans ie10 et chrome 29

J'ai essayé de le définir vide à la place comme suggéré ici: comment revenir à la normale après l'affichage: aucun pour la ligne du tableau

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