Restablecer / eliminar estilos CSS solo para elemento

Estoy seguro de que esto debe haberse mencionado / preguntado antes, pero he estado buscando una edad sin suerte, ¡mi terminología debe estar equivocada!

Recuerdo vagamente un tweet que vi hace un tiempo que sugería que había una regla CSS disponible que eliminaría cualquier estilo previamente establecido en la hoja de estilo para un elemento en particular.

Un buen ejemplo de uso podría ser en un sitio de RWD para dispositivos móviles en el que gran parte del estilo utilizado para un elemento en particular en las vistas de pantallas pequeñas necesita ‘reiniciarse’ o eliminarse para el mismo elemento en la vista de escritorio.

Una regla de CSS que podría lograr algo como:

.element { all: none; } 

Ejemplo de uso:

 /* mobile first */ .element { margin: 0 10; transform: translate3d(0, 0, 0); z-index: 50; display: block; etc.. etc.. } @media only screen and (min-width: 980px) { .element { all: none; } } 

Por lo tanto, podríamos eliminar o restablecer el diseño rápidamente sin tener que declarar todas las propiedades.

¿Tiene sentido?

La palabra clave CSS3 initial establece la propiedad CSS3 en el valor inicial como se define en la especificación . La palabra clave initial tiene un amplio soporte de navegador, excepto para las familias IE y Opera Mini.

Como la falta de soporte de IE puede causar problemas, aquí están algunas de las formas en que puede restablecer algunas propiedades de CSS a sus valores iniciales:

 .reset-this { animation : none; animation-delay : 0; animation-direction : normal; animation-duration : 0; animation-fill-mode : none; animation-iteration-count : 1; animation-name : none; animation-play-state : running; animation-timing-function : ease; backface-visibility : visible; background : 0; background-attachment : scroll; background-clip : border-box; background-color : transparent; background-image : none; background-origin : padding-box; background-position : 0 0; background-position-x : 0; background-position-y : 0; background-repeat : repeat; background-size : auto auto; border : 0; border-style : none; border-width : medium; border-color : inherit; border-bottom : 0; border-bottom-color : inherit; border-bottom-left-radius : 0; border-bottom-right-radius : 0; border-bottom-style : none; border-bottom-width : medium; border-collapse : separate; border-image : none; border-left : 0; border-left-color : inherit; border-left-style : none; border-left-width : medium; border-radius : 0; border-right : 0; border-right-color : inherit; border-right-style : none; border-right-width : medium; border-spacing : 0; border-top : 0; border-top-color : inherit; border-top-left-radius : 0; border-top-right-radius : 0; border-top-style : none; border-top-width : medium; bottom : auto; box-shadow : none; box-sizing : content-box; caption-side : top; clear : none; clip : auto; color : inherit; columns : auto; column-count : auto; column-fill : balance; column-gap : normal; column-rule : medium none currentColor; column-rule-color : currentColor; column-rule-style : none; column-rule-width : none; column-span : 1; column-width : auto; content : normal; counter-increment : none; counter-reset : none; cursor : auto; direction : ltr; display : inline; empty-cells : show; float : none; font : normal; font-family : inherit; font-size : medium; font-style : normal; font-variant : normal; font-weight : normal; height : auto; hyphens : none; left : auto; letter-spacing : normal; line-height : normal; list-style : none; list-style-image : none; list-style-position : outside; list-style-type : disc; margin : 0; margin-bottom : 0; margin-left : 0; margin-right : 0; margin-top : 0; max-height : none; max-width : none; min-height : 0; min-width : 0; opacity : 1; orphans : 0; outline : 0; outline-color : invert; outline-style : none; outline-width : medium; overflow : visible; overflow-x : visible; overflow-y : visible; padding : 0; padding-bottom : 0; padding-left : 0; padding-right : 0; padding-top : 0; page-break-after : auto; page-break-before : auto; page-break-inside : auto; perspective : none; perspective-origin : 50% 50%; position : static; /* May need to alter quotes for different locales (eg fr) */ quotes : '\201C' '\201D' '\2018' '\2019'; right : auto; tab-size : 8; table-layout : auto; text-align : inherit; text-align-last : auto; text-decoration : none; text-decoration-color : inherit; text-decoration-line : none; text-decoration-style : solid; text-indent : 0; text-shadow : none; text-transform : none; top : auto; transform : none; transform-style : flat; transition : none; transition-delay : 0s; transition-duration : 0s; transition-property : none; transition-timing-function : ease; unicode-bidi : normal; vertical-align : baseline; visibility : visible; white-space : normal; widows : 0; width : auto; word-spacing : normal; z-index : auto; /* basic modern patch */ all: initial; all: unset; } /* basic modern patch */ #reset-this-root { all: initial; * { all: unset; } } 
  • Fuente de propiedades
  • Relacionado
  • Relacionado desde MDN
  • Especificaciones relacionadas de W3C

Como se menciona en un comentario de @ user566245:

esto es correcto en principio, pero el kilometraje individual puede variar. Por ejemplo, ciertos elementos, como textarea, tienen un borde por defecto, al aplicar este restablecimiento los bordes de esos textarea quedarán menos.

[POST EDIT FEB 4, ’17] Upvoted para convertirse en una norma moderna, el usuario Joost

 #reset-this-parent { all: initial; * { all: unset; } } 

EJEMPLO DE W3

Por ejemplo, si un autor especifica todo: inicial 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, mostrar: bloquear desde la hoja de estilos de UA en elementos de bloque como) también se volará.


JAVASCRIPT?

¿Nadie pensó en otra cosa que CSS para restablecer css? ¿Sí?

Hay ese recorte completamente relevante: https://stackoverflow.com/a/14791113/845310

getElementsByTagName (“*”) devolverá todos los elementos de DOM. Luego puede establecer estilos para cada elemento en la colección:

respondió el 9 de febrero de 2013 a las 20:15 por VisioN

 var allElements = document.getElementsByTagName("*"); for (var i = 0, len = allElements.length; i < len; i++) { var element = allElements[i]; // element.style.border = ... } 

Con todo esto dicho; No creo que un restablecimiento de CSS sea factible a menos que terminemos con un solo navegador web ... si al final el navegador establece 'predeterminado'.

A modo de comparación, aquí está la lista de valores de Firefox 40.0 para un

donde font-style: oblique desencadena la operación DOM.

 align-content: unset; align-items: unset; align-self: unset; animation: unset; appearance: unset; backface-visibility: unset; background-blend-mode: unset; background: unset; binding: unset; block-size: unset; border-block-end: unset; border-block-start: unset; border-collapse: unset; border-inline-end: unset; border-inline-start: unset; border-radius: unset; border-spacing: unset; border: unset; bottom: unset; box-align: unset; box-decoration-break: unset; box-direction: unset; box-flex: unset; box-ordinal-group: unset; box-orient: unset; box-pack: unset; box-shadow: unset; box-sizing: unset; caption-side: unset; clear: unset; clip-path: unset; clip-rule: unset; clip: unset; color-adjust: unset; color-interpolation-filters: unset; color-interpolation: unset; color: unset; column-fill: unset; column-gap: unset; column-rule: unset; columns: unset; content: unset; control-character-visibility: unset; counter-increment: unset; counter-reset: unset; cursor: unset; display: unset; dominant-baseline: unset; empty-cells: unset; fill-opacity: unset; fill-rule: unset; fill: unset; filter: unset; flex-flow: unset; flex: unset; float-edge: unset; float: unset; flood-color: unset; flood-opacity: unset; font-family: unset; font-feature-settings: unset; font-kerning: unset; font-language-override: unset; font-size-adjust: unset; font-size: unset; font-stretch: unset; font-style: oblique; font-synthesis: unset; font-variant: unset; font-weight: unset; font: ; force-broken-image-icon: unset; height: unset; hyphens: unset; image-orientation: unset; image-region: unset; image-rendering: unset; ime-mode: unset; inline-size: unset; isolation: unset; justify-content: unset; justify-items: unset; justify-self: unset; left: unset; letter-spacing: unset; lighting-color: unset; line-height: unset; list-style: unset; margin-block-end: unset; margin-block-start: unset; margin-inline-end: unset; margin-inline-start: unset; margin: unset; marker-offset: unset; marker: unset; mask-type: unset; mask: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; offset-block-end: unset; offset-block-start: unset; offset-inline-end: unset; offset-inline-start: unset; opacity: unset; order: unset; orient: unset; outline-offset: unset; outline-radius: unset; outline: unset; overflow: unset; padding-block-end: unset; padding-block-start: unset; padding-inline-end: unset; padding-inline-start: unset; padding: unset; page-break-after: unset; page-break-before: unset; page-break-inside: unset; paint-order: unset; perspective-origin: unset; perspective: unset; pointer-events: unset; position: unset; quotes: unset; resize: unset; right: unset; ruby-align: unset; ruby-position: unset; scroll-behavior: unset; scroll-snap-coordinate: unset; scroll-snap-destination: unset; scroll-snap-points-x: unset; scroll-snap-points-y: unset; scroll-snap-type: unset; shape-rendering: unset; stack-sizing: unset; stop-color: unset; stop-opacity: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; stroke: unset; tab-size: unset; table-layout: unset; text-align-last: unset; text-align: unset; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-emphasis-position: unset; text-emphasis: unset; text-indent: unset; text-orientation: unset; text-overflow: unset; text-rendering: unset; text-shadow: unset; text-size-adjust: unset; text-transform: unset; top: unset; transform-origin: unset; transform-style: unset; transform: unset; transition: unset; user-focus: unset; user-input: unset; user-modify: unset; user-select: unset; vector-effect: unset; vertical-align: unset; visibility: unset; white-space: unset; width: unset; will-change: unset; window-dragging: unset; word-break: unset; word-spacing: unset; word-wrap: unset; writing-mode: unset; z-index: unset; 

Para futuros lectores. Creo que esto es lo que se quería decir, pero actualmente no es muy compatible (ver más abajo):

 #someselector { all: initial; * { all: unset; } } 
  • Compatible con ( fuente ): Chrome 37, Firefox 27, IE 11, Opera 24
  • No compatible: Safari

Permítanme responder esta pregunta a fondo, porque ha sido una fuente de dolor para mí durante varios años y muy pocas personas realmente entienden el problema y por qué es importante que se resuelva. Si fuera en absoluto responsable de las especificaciones de CSS me avergonzaría, francamente, por no haber abordado esto en la última década.

El problema

Debe insertar marcas en un documento HTML y debe tener un aspecto específico. Además, no posee este documento, por lo que no puede cambiar las reglas de estilo existentes. No tiene idea de lo que podrían ser las hojas de estilo, o a qué pueden cambiar.

Los casos de uso para esto son cuando está proporcionando un componente visualizable para sitios web de terceros desconocidos. Ejemplos de esto serían:

  1. Una etiqueta publicitaria
  2. Construyendo una extensión de navegador que inserta contenido
  3. Cualquier tipo de widget

Simplest Fix

Pon todo en un iframe Esto tiene su propio conjunto de limitaciones:

  1. Limitaciones de Cross Domain: su contenido no tendrá acceso al documento original en absoluto. No puedes superponer contenido, modificar el DOM, etc.
  2. Limitaciones de pantalla: su contenido está bloqueado dentro de un rectángulo.

Si su contenido puede caber en un cuadro, puede evitar el problema n. ° 1 haciendo que su contenido escriba un marco flotante y establezca explícitamente el contenido, evitando así el problema, ya que el iframe y el documento compartirán el mismo dominio.

Solución CSS

He buscado por todos lados la solución a esto, pero desafortunadamente no hay ninguno. Lo mejor que puede hacer es anular explícitamente todas las propiedades posibles que pueden anularse, y anularlas a lo que cree que debería ser su valor predeterminado.

Incluso cuando anula, no hay forma de garantizar que una regla de CSS más específica no anule la suya . Lo mejor que puede hacer aquí es anular sus reglas de anulación tan específicamente como sea posible y esperar que el documento primario no lo supere accidentalmente: use un identificador oscuro o aleatorio en el elemento principal de su contenido y use! Important en todas las definiciones de valores de propiedad .

Hay una nueva solución encontrada para este problema.

Necesita “Una regla CSS disponible que elimine los estilos establecidos previamente en la hoja de estilo para un elemento en particular”.

Entonces, si el elemento tiene un nombre de clase como remove-all-styles :

P.ej:

HTML:

 

My text

Con CSS:

  .remove-all-styles { all: revert; } 

Restablecerá todos los estilos aplicados por other-class , another-class y todos los demás estilos heredados y aplicados a ese div .

O en tu caso:

 /* mobile first */ .element { margin: 0 10; transform: translate3d(0, 0, 0); z-index: 50; display: block; etc.. etc.. } @media only screen and (min-width: 980px) { .element { all: revert; } } 

Hará.

Aquí usamos una propiedad CSS genial con otro valor de CSS interesante.

  1. revert

En realidad, revert es, como su nombre indica, revierte esa propiedad a su estilo de usuario o agente de usuario.

  1. all

Y cuando utilizamos revert con la propiedad all , todas las propiedades de CSS aplicadas a ese elemento se revertirán a estilos user / user-agent.

Haga clic aquí para conocer la diferencia entre los estilos de autor, usuario y agente de usuario.

Por ejemplo: si queremos aislar widgets / componentes incrustados de los estilos de la página que los contiene , podríamos escribir:

 .isolated-component { all: revert; } 

Lo cual revertirá todos los author styles (es decir, el desarrollador de CSS) a user styles (estilos que un usuario de nuestro sitio web estableció – escenario menos probable) o a user-agent estilos de usuario mismo si no se configuran los estilos de usuario.

Más detalles aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

Y el único problema es el soporte : solo Safari 9.1 e iOS Safari 9.3 tienen soporte para revert valor en el momento de la escritura.

Así que diré que use este estilo y recurra a cualquier otra respuesta.

otras formas:

1) incluye el código CSS (archivo) de reinicio CSS de Yahoo y luego coloca todo dentro de este DIV:

 

2) o use http://www.cssreset.com

No recomiendo usar la respuesta que se ha marcado como correcta aquí. Es una gran cantidad de CSS que intenta cubrir todo.

Sugeriría que evalúes cómo eliminar el estilo de un elemento por caso.

Digamos que con fines de SEO, debe incluir un H1 en una página que no tenga un encabezado real en el diseño. Es posible que desee convertir el enlace de navegación de esa página en H1 pero, por supuesto, no desea que ese enlace de navegación se muestre como un H1 gigante en la página.

Lo que debe hacer es envolver ese elemento en una etiqueta h1 e inspeccionarlo. Vea qué estilos CSS se están aplicando específicamente al elemento h1.

Digamos que veo los siguientes estilos aplicados al elemento.

 //bootstrap.min.css:1 h1 { font-size: 65px; font-family: 'rubikbold'!important; font-weight: normal; font-style: normal; text-transform: uppercase; } //bootstrap.min.css:1 h1, .h1 { font-size: 36px; } //bootstrap.min.css:1 h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; } //bootstrap.min.css:1 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } //bootstrap.min.css:1 h1 { margin: .67em 0; font-size: 2em; } //user agent stylesheet h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67em; -webkit-margin-after: 0.67em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; } 

Ahora necesita señalar el estilo exacto que se aplica al H1 y desarmarlo en una clase css. Esto se parecería a lo siguiente:

 .no-style-h1 { font-size: unset !important; font-family: unset !important; font-weight: unset !important; font-style: unset !important; text-transform: unset !important; margin-top: unset !important; margin-bottom: unset !important; font-family: unset !important; line-height: unset !important; color: unset !important; margin: unset !important; display: unset !important; -webkit-margin-before: unset !important; -webkit-margin-after: unset !important; -webkit-margin-start: unset !important; -webkit-margin-end: unset !important; } 

Esto es mucho más limpio y no solo arroja una cantidad aleatoria de código en su CSS, que no sabe lo que realmente está haciendo.

Ahora puedes agregar esta clase a tu h1

 

Title

Si está usando sass en un sistema de comstackción, una forma de hacerlo funcionará en todos los principales navegadores es envolver todas sus importaciones de estilo con un selector: not () como ese …

 :not(.disable-all-styles) { @import 'my-sass-file'; @import 'my-other-sass-file'; } 

Luego puede usar la clase de desactivación en un contenedor y el sub contenido no tendrá ninguno de sus estilos.

 

Nothing in this div is affected by my sass styles.

Por supuesto, todos sus estilos se antepondrán con el selector: not (), por lo que es un poco fugly, pero funciona bien.

En mi escenario específico, quería omitir la aplicación de estilos comunes a una parte específica de la página, mejor ilustrada de esta manera:

   
Does NOT want common styles

Después de jugar con el restablecimiento de CSS que no tuvo mucho éxito (principalmente debido a la precedencia de las reglas y la compleja jerarquía de hojas de estilo), apareció jQuery ubicuo al rescate, que hizo el trabajo muy rápidamente y bastante sucio:

 $(function() { $('body').removeClass('common-styles'); $('#header,#footer').addClass('common-styles'); }); 

(Ahora dime cuán malo es usar JS para tratar con CSS :-))

Mencionaste sitios para dispositivos móviles … Para un diseño receptivo, es posible anular los estilos de pantallas pequeñas con estilos de pantallas grandes. Pero puede que no sea necesario.

Prueba esto:

 .thisClass { /* Rules for all window sizes. */ } @media all and (max-width: 480px) { .thisClass { /* Rules for only small browser windows. */ } } @media all and (min-width: 481px) and (max-width: 960px) { .thisClass { /* Rules for only medium browser windows. */ } } @media all and (min-width: 961px) { .thisClass { /* Rules for only large browser windows. */ } } 

Esas consultas de medios no se superponen, por lo que sus reglas no se anulan entre sí. Esto hace que sea más fácil mantener cada conjunto de estilos por separado.

Para aquellos de ustedes que intentan descubrir cómo eliminar el estilo del elemento solamente, sin eliminar el CSS de los archivos, esta solución funciona con jquery:

 $('.selector').removeAttr('style'); 

si configura su CSS dentro de las clases, puede eliminarlas fácilmente utilizando el método jQuery removeClass (). El siguiente código elimina la clase .element:

  
source
destination

Si no se especifica ningún parámetro, este método eliminará TODOS los nombres de clase de los elementos seleccionados.

¿Hay alguna posibilidad de que estés buscando la regla importante? No deshace todas las declaraciones pero proporciona una forma de anularlas.

“Cuando se usa una regla! Importante en una statement de estilo, esta statement prevalece sobre cualquier otra statement hecha en el CSS, esté donde esté en la lista de declaraciones. Sin embargo,” importante no tiene nada que ver con la especificidad “.

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception

MEJOR SOLUCIÓN

Descargue la hoja de estilo “copiar / pegar” para restablecer las propiedades de CSS a la configuración predeterminada (estilo UA):
https://github.com/monmomo04/resetCss.git

Gracias @ Milche Patern!
Realmente estaba buscando el valor de las propiedades de estilo de restablecimiento / predeterminado. Mi primer bash fue copiar el valor calculado de la herramienta Dev del navegador del elemento raíz (html). Pero a medida que se calcula, habría parecido / trabajado diferente en cada sistema.
Para aquellos que encuentran un locking del navegador cuando intentan usar el asterisco * para restablecer el estilo de los elementos secundarios, y como sabía que no funcionaba para ustedes, he reemplazado el asterisco “*” con todo el nombre de las tags HTML. . El navegador no se bloqueó; Estoy en la versión de Chrome 46.0.2490.71 m.
Por último, es bueno mencionar que esas propiedades restablecerán el estilo al estilo predeterminado del elemento raíz topest pero no al valor inicial para cada elemento HTML. Para corregir esto, tomé los estilos de “user-agent” del navegador basado en webkit y lo implementé en la clase “reset-this”.

Enlace útil:

Descargue la hoja de estilo “copiar / pegar” para restablecer las propiedades de CSS a la configuración predeterminada (estilo UA):
https://github.com/monmomo04/resetCss.git

Estilo de agente de usuario:
CSS por defecto de los navegadores para elementos HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Especificidad de CSS (preste atención a la especificidad):
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

No, esto es solo cuestión de administrar mejor tu estructura CSS.

En tu caso, ordenaría mi CSS algo así:

 .element, .element1, .element2 p{z-index: 50; display: block} .element, .element1{margin: 0 10} .element2 p{transform: translate3d(0, 0, 0)} @media only screen and (min-width: 980px) { .element, .element1, .element2 p{display: none} } 

Solo experimenta.