Redefinir a propriedade de exibição CSS para o valor padrão

É possível substituir a propriedade display pelo seu valor padrão? Por exemplo, se eu defini-lo como none em um estilo e quero substituí-lo de um modo diferente pelo seu padrão.

Ou é a única maneira de descobrir qual é o padrão desse elemento e configurá-lo para isso? Gostaria de não precisar saber se o elemento geralmente é bloco, em linha ou o que for ...

Os estilos padrão de um navegador são definidos em sua folha de estilo do agente do usuário, cujas fontes você pode encontrar aqui . Infelizmente, as especificações de nível 3 em cascata e herança não parecem propor uma maneira de redefinir uma propriedade de estilo para o padrão do navegador. No entanto, há planos de reintroduzir uma palavra-chave para isso no nível 4 em cascata e herança - o grupo de trabalho simplesmente ainda não definiu um nome para essa palavra-chave (o link diz atualmente revert, mas não é final). Informações sobre o suporte ao navegador revertpodem ser encontradas em caniuse.com .

Embora a especificação do nível 3 introduza uma initialpalavra - chave , a configuração de uma propriedade como seu valor inicial redefine-a para seu valor padrão, conforme definido pelo CSS , não como definido pelo navegador . O valor inicial de displayé inline; isso é especificado aqui . A initialpalavra-chave refere-se a esse valor, não ao padrão do navegador. A própria especificação faz esta anotação sob a allpropriedade :

Por exemplo, se um autor especificar all: initialum elemento, ele bloqueará toda a herança e redefinirá todas as propriedades, como se nenhuma regra aparecesse nos níveis de autor, usuário ou agente de usuário da cascata.

Isso pode ser útil para o elemento raiz de um "widget" incluído em uma página, que não deseja herdar os estilos da página externa. Observe, no entanto, que qualquer estilo "padrão" aplicado a esse elemento (como, por exemplo, display: blockda folha de estilos do UA em elementos de bloco como <div>) também será deslumbrado.

Então, acho que a única maneira agora de usar CSS puro é procurar o valor padrão do navegador e configurá-lo manualmente para isso:

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

(Uma alternativa ao acima seria div.foo:not(.bar) { display: inline-block; }, mas isso envolve modificar o seletor original em vez de substituir.)

Se o uso de javascript for permitido , você poderá definir a displaypropriedade como uma sequência vazia. Isso fará com que ele use o padrão para esse elemento específico.

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

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

Aqui está um link para um jsbin .

Isso é bom porque você não precisa se preocupar com os diferentes tipos de exibição para reverter para ( block, inline, inline-block, table-cell, etc).

Porém, ele requer javascript, portanto, se você estiver procurando uma solução apenas para css, essa não é a solução para você.

Nota: Isso substitui estilos embutidos, mas não estilos definidos em css

Desativar display:

Você pode usar o valor unsetque funciona no Firefox e no Chrome .

display: unset;

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

Não, geralmente não é possível. Depois que algum código CSS (ou HTML) define um valor para uma propriedade em um elemento, não há como desfazê-lo e dizer ao navegador para usar seu valor padrão.

É claro que é possível definir uma propriedade com um valor que você espera que seja o valor padrão. Isso pode funcionar bastante se você verificar a seção Renderização do HTML5 CR, refletindo principalmente o que os navegadores realmente fazem.

Ainda assim, a resposta é "Não", porque os navegadores podem ter os valores padrão que quiserem. Você deve analisar qual foi o motivo para querer redefinir os padrões; o problema original ainda pode ser solucionado.

Se você tiver acesso ao JavaScript , poderá criar um elemento e ler seu estilo calculado.

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'

Em relação à resposta de BoltClock e John, eu pessoalmente tive problemas com a palavra-chave inicial ao usar o IE11. Funciona bem no Chrome, mas no IE parece não ter efeito.

De acordo com esta resposta, o IE não suporta a palavra-chave inicial: Display div: inicial não está funcionando como pretendido no ie10 e chrome 29

Tentei configurá-lo em branco, como sugerido aqui: como voltar ao normal após a exibição: nenhum para a linha da tabela

Isso funcionou e foi bom o suficiente para o meu cenário. Obviamente, para definir o valor inicial real, a resposta acima é a única boa que eu poderia encontrar.