style - css title tooltip

Restablecer la propiedad de visualización de CSS al valor predeterminado

Question

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

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

Answer 1

Desarmar la display :

Puede usar el valor unset que funciona tanto en Firefox como en Chrome .

display: unset;

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

Answer 2

En cuanto 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 ningún efecto.

De acuerdo con esta respuesta, IE no admite la palabra clave inicial: visualización de Div: la inicial no funciona como se pretendía 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.

Answer 3

Los estilos predeterminados de un navegador se definen en su hoja de estilo de agente de usuario, cuyas fuentes puede encontrar here . Desafortunadamente, la especificación de nivel 3 de Cascading and Heheriversity no parece proponer una manera de restablecer una propiedad de estilo a su navegador predeterminado. Sin embargo, hay planes para reintroducir una palabra clave para esto en Cascading y en el nivel de herencia 4 : el grupo de trabajo simplemente no ha establecido un nombre para esta palabra clave (el enlace actualmente dice revert , pero no es definitivo).

Si bien la especificación de nivel 3 introduce una palabra clave initial , establecer una propiedad en su valor inicial lo restablece a su valor predeterminado definido por CSS , no como lo define el navegador . El valor inicial de la display está en inline ; esto se especifica here . La palabra clave initial refiere a ese valor, no al valor predeterminado del navegador. La especificación hace esta nota debajo de la propiedad all :

Por ejemplo, si un autor especifica all: initial en un elemento, bloqueará toda la herencia y restablecerá todas las propiedades, como si no hubiera 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: block desde la hoja de estilos de UA en elementos de bloque como <div> ) también se volará.

Así que supongo que la única forma de usar CSS puro ahora es buscar el valor predeterminado del navegador y configurarlo manualmente para eso:

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

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

Answer 4

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 manera de deshacerlo y decirle al navegador que use su valor predeterminado.

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

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

Answer 5

Si está permitido usar javascript , puede establecer la propiedad de display 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 no tiene que preocuparse por los diferentes tipos de pantalla a los que revertirá ( block , inline , block inline inline-block , table-cell , etc.).

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

Nota: Esto anula los estilos en línea, pero no los estilos establecidos en css

Answer 6

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''