Restablecer la propiedad de visualización CSS al valor predeterminado

172

¿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 ...

Svish
fuente
55
Ahora es posible usarlo unset.
minutos
1
Sé que esta pregunta solo se refiere a que la pantalla se restablezca a los valores predeterminados del navegador, pero para las muchas personas que visitarán esta página que buscan restablecer todos los atributos a los valores predeterminados del navegador, use: .myclass {all: unset; } div {all: unset; } etc.
user1254723

Respuestas:

155

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).

BoltClock
fuente
55
Ah, ¿por qué los navegadores siempre deben ser tan lentos para obtener las cosas buenas y útiles? P ¿Y por qué los usuarios deben ser tan lentos para actualizar ... de todos modos, eso es exactamente lo que quería!
Svish
1
@Svish: Resulta que interpreté mal lo que initialrealmente hace. He actualizado mi respuesta.
BoltClock
14
@Svish: CSS define los valores iniciales en el nivel de propiedad, no por elemento como originalmente pensé. En este ejemplo, el valor inicial de displaysiempre es inline( w3.org/TR/CSS21/visuren.html#display-prop ), independientemente de si está en a divo a span. Un divelemento es display: blockpor defecto según HTML , y no CSS, por lo que depende de la hoja de estilo UA del navegador div { display: block; }.
BoltClock
1
"CSS define los valores iniciales en el nivel de propiedad, no por elemento como originalmente pensé". - De hecho, tuve que releerlo varias veces para creerlo. (Dado que el CSS parece aplicarse siempre en (algún tipo de) contexto de elementos, no admitirlo aquí sugiere algo no trivial para aprender, ¿alguien sabe la razón?)
Sz.
1
defaultfue renombrado a revert.
Oriol
29

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

thetallweeks
fuente
11
Tenga en cuenta que esto solo funciona si el estilo se estableció usando JavaScript o un styleatributo en línea en primer lugar. No puede anular ni eliminar una declaración de una hoja de estilo con este método.
BoltClock
1
@BoltClock no estoy de acuerdo. Aquí hay un jsfiddle que creo que refuta lo que estás diciendo. jsfiddle.net/g45qagt3
thetallweeks
8
Lo siento, mi uso de la palabra anulación fue confuso. Quiero decir que establecer un estilo en la cadena vacía solo eliminará un estilo que se aplicó a través del styleatributo o el configurador de JavaScript. Todavía puede anular una declaración de hoja de estilo si establece un valor específico a través de JS, pero establecerlo en vacío es equivalente a no configurarlo en absoluto; la declaración de hoja de estilo permanecerá intacta. Vea el violín modificado: jsfiddle.net/BoltClock/g45qagt3/1
BoltClock
1
Vale la pena señalar que la cadena vacía funciona para cualquier propiedad, no solo para "mostrar"
Artur Beljajev
11

Desarmado display:

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

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }
Sheharyar
fuente
55
unsettiene los mismos problemas que initial. El valor de displayse convertirá inline. Ver codepen.io/Gidgidonihah/pen/mwWxEq
Gidgidonihah
El OP claramente quiere restablecer el valor predeterminado por elemento, por ejemplo, restablecer el intervalo en línea y un div para bloquear. unsetno ayudará con eso ya que es por propiedad y siempre restablecerá la pantalla a inline. Por favor considere actualizar su respuesta.
Krulik
6

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.

Jukka K. Korpela
fuente
5

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'
Frederik Krautwald
fuente
1
Aparentemente, debe agregar el elemento generado a la etiqueta <body> para obtener el estilo calculado, al menos en Chrome.
dimplex
4

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.

Søren Ullidtz
fuente