Restablecer la propiedad de visualización CSS al valor predeterminado

¿Es posible anular la propiedad de visualización con su valor predeterminado? Por ejemplo, si lo configuré en none en un estilo, y quiero anularlo de manera diferente con su valor predeterminado.

¿O es la única forma de averiguar cuál es el valor predeterminado de ese elemento y luego configurarlo? Me gustaría no tener que saber si el elemento suele ser bloque, en línea o lo que sea ...

Los estilos predeterminados de un navegador se definen en su hoja de estilo de agente de usuario, cuyas fuentes puede encontrar aquí . Desafortunadamente, la especificación de nivel 3 en cascada y herencia no parece proponer una forma de restablecer una propiedad de estilo a su valor predeterminado del navegador. Sin embargo, hay planes para reintroducir una palabra clave para esto en Cascading and Inheritance level 4 : el grupo de trabajo simplemente no se ha decidido por un nombre para esta palabra clave todavía (el enlace dice actualmente revert, pero no es definitivo). revertPuede encontrar información sobre el soporte del navegador para caniuse.com .

Si bien la especificación de nivel 3 introduce una initialpalabra clave , establecer una propiedad en su valor inicial la restablece a su valor predeterminado según lo define CSS , no según lo define el navegador . El valor inicial de displayes inline; Esto se especifica aquí . La initialpalabra clave se refiere a ese valor, no al valor predeterminado del navegador. La especificación en sí misma hace esta nota debajo de la allpropiedad :

Por ejemplo, si un autor especifica all: initialun elemento, bloqueará toda la herencia y restablecerá todas las propiedades, como si no aparecieran reglas en los niveles de autor, usuario o agente de usuario de la cascada.

Esto puede ser útil para el elemento raíz de un "widget" incluido en una página, que no desea heredar los estilos de la página externa. Sin embargo, tenga en cuenta que cualquier estilo "predeterminado" aplicado a ese elemento (como, por ejemplo, display: blockdesde la hoja de estilo UA en elementos de bloque como <div>) también quedará impresionado.

Así que supongo que la única forma en este momento usando CSS puro es buscar el valor predeterminado del navegador y configurarlo manualmente para eso:

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

(Sería una alternativa a lo anterior div.foo:not(.bar) { display: inline-block; }, pero eso implica modificar el selector original en lugar de una anulación).

Si se permite el uso de JavaScript , puede establecer la displaypropiedad en una cadena vacía. Esto hará que use el valor predeterminado para ese elemento en particular.

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

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

Aquí hay un enlace a un jsbin .

Esto es bueno porque usted no tiene que preocuparse acerca de los diferentes tipos de pantalla para volver a ( block, inline, inline-block, table-cell, etc).

Pero, requiere javascript, por lo que si está buscando una solución solo para CSS, entonces esta no es la solución para usted.

Nota: esto anula los estilos en línea, pero no los estilos establecidos en CSS

Desarmado display:

Puede usar el valor unsetque funciona tanto en Firefox como en Chrome .

display: unset;

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

No, generalmente no es posible. Una vez que un código CSS (o HTML) establece un valor para una propiedad en un elemento, no hay forma de deshacerlo y decirle al navegador que use su valor predeterminado.

Por supuesto, es posible establecer un valor de propiedad que espera que sea el valor predeterminado. Esto puede funcionar bastante ampliamente si revisa la sección Representación de HTML5 CR, que refleja principalmente lo que los navegadores realmente hacen.

Aún así, la respuesta es "No", porque los navegadores pueden tener los valores predeterminados que deseen. Debe analizar cuál fue el motivo por el que desea restablecer los valores predeterminados; El problema original aún puede resolverse.

Si tiene acceso a JavaScript , puede crear un elemento y leer su 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'

Con respecto a la respuesta de BoltClock y John, personalmente tuve problemas con la palabra clave inicial al usar IE11. Funciona bien en Chrome, pero en IE parece no tener efecto.

De acuerdo con esta respuesta, IE no admite la palabra clave inicial: Pantalla div: inicial no funciona según lo previsto en ie10 y chrome 29

Intenté configurarlo en blanco como se sugiere aquí: cómo volver a la normalidad después de la visualización: ninguno para la fila de la tabla

Esto funcionó y fue lo suficientemente bueno para mi escenario. Por supuesto, para establecer el valor inicial real, la respuesta anterior es la única buena que pude encontrar.