style remove body all css

remove - reset css html5



Restablecer/eliminar estilos CSS solo para elementos (14)

¿Alguna posibilidad de que estés buscando la regla importante? No deshace todas las declaraciones, pero proporciona una manera de anularlas.

"Cuando se usa una regla importante en una declaración de estilo, esta declaración invalida cualquier otra declaración hecha en el CSS, dondequiera que esté en la lista de declaración. Aunque, importante no tiene nada que ver con la especificidad".

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

Estoy seguro de que esto debe haber sido 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 establecido previamente 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 donde gran parte del estilo utilizado para un elemento en particular en las vistas de pantalla pequeña necesita ''reiniciar'' o eliminar el mismo elemento en la vista de escritorio.

Una regla 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; } }

Así que podríamos eliminar o restablecer rápidamente el estilo sin tener que declarar cada propiedad.

¿Tiene sentido?

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:

<body class=''common-styles''> <div id=''header''>Wants common styles</div> <div id=''container''>Does NOT want common styles</div> <div id=''footer''>Wants common styles</div> </body>

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), salió al rescate jQuery ubicuo, que hizo el trabajo muy rápido y razonablemente sucio:

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

(Ahora diga lo malo que es usar JS para tratar con CSS :-))

Hay una nueva solución encontrada para este problema.

Necesita "Una regla de css disponible que eliminaría cualquier estilo previamente establecido 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:

<div class="remove-all-styles other-classe another-class"> <!-- content --> <p class="text-red other-some-styles"> My text </p> </div>

Con CSS:

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

Se restablecerán todos los estilos aplicados por other-class , another-class y todos los otros 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; } }

Lo haré

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

  1. revert

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

  1. all

Y cuando usamos revert con la propiedad all , todas las propiedades CSS aplicadas a ese elemento se revertirán a los estilos de usuario / agente de usuario.

Haga clic aquí para conocer la diferencia entre los estilos de autor, usuario, 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 que revertirá todos los author styles (es decir, desarrollador de CSS) a user styles (estilos que un usuario de nuestro sitio web configura, sin posibilidad de escenario) o al estilo user-agent sí mismo si no se establece un estilo de usuario.

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

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

Así que voy a decir usar este estilo y retroceder a cualquier otra respuesta.

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.

Dado que la falta de soporte de IE puede causar problemas, aquí hay algunas de las formas en que puede restablecer algunas propiedades 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 (e.g 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; } }

Como se menciona en un comentario por @ user566245:

Esto es correcto en principio, pero el kilometraje individual puede variar. Por ejemplo, ciertos elementos como textarea por defecto tienen un borde, la aplicación de este restablecimiento hará que el borde de ese área de texturas sea menor.

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

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

EJEMPLO DE W3

Por ejemplo, si un autor especifica all: initial en un 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, pantalla: bloque de la hoja de estilo UA en elementos de bloque como) también se eliminará.

¿JAVASCRIPT?

¿Nadie pensó en otra cosa que no sea css para reiniciar css? ¿Sí?

Hay un recorte totalmente relevante: https://.com/a/14791113/845310

getElementsByTagName ("*") devolverá todos los elementos de DOM. Luego puedes establecer estilos para cada elemento de la colección:

contestó el 9 ''13 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 reinicio de CSS sea algo factible a menos que terminemos con un solo navegador web ... si el navegador configura el "predeterminado" al final.

A modo de comparación, aquí está la lista de valores de Firefox 40.0 para un <blockquote style="all: unset;font-style: oblique"> donde font-style: oblique activa 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;

Mencionó los sitios móviles primero ... Para un diseño sensible, ciertamente es posible anular los estilos de pantalla pequeña con los de pantalla grande. Pero puede que no necesites hacerlo.

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

No recomiendo usar la respuesta que se ha marcado como correcta aquí. Es un gran blob de CSS que trata de cubrir todo.

Le sugeriría que evalúe cómo eliminar el estilo de un elemento para cada caso.

Digamos que para fines de SEO necesita incluir un H1 en una página que no tiene un encabezado real en el diseño. Es posible que desee convertir el enlace de navegación de esa página en un H1 pero, por supuesto, no desea que el 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 de CSS se aplican 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 desarmarlos en una clase css. Esto se vería algo como 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 descarga un blob aleatorio de código en tu css que no sabes lo que realmente está haciendo.

Ahora puedes agregar esta clase a tu h1

<h1 class="no-style-h1"> Title </h1>

No, esto es solo una cuestión de administrar mejor su estructura css.

En tu caso yo ordenaría mi css algo como esto:

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

Sólo experimenta.

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

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

Para futuros lectores. Creo que esto es lo que se quería decir, pero actualmente no es realmente compatible (vea a continuación):

#someselector { all: initial; * { all: unset; } }

  • Compatible con ( source ): Chrome 37, Firefox 27, IE 11, Opera 24
  • No soportado: Safari

Permítame 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 resolverlo. Si fuera responsable de la especificación de CSS, me sentiría avergonzado, francamente, por no haber abordado esto en la última década.

El problema

Debe insertar el marcado 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 tienes idea de lo que podrían ser las hojas de estilo o de a qué pueden cambiar.

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

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

Arreglo más simple

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 visualización: su contenido está bloqueado dentro de un rectángulo.

Si su contenido puede caber en un cuadro, puede solucionar el problema # 1 haciendo que su contenido escriba un iframe 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 todas partes la solución a esto, pero desafortunadamente no hay ninguna. Lo mejor que puede hacer es anular explícitamente todas las propiedades posibles que se pueden anular, y anularlas a lo que crea que debería ser su valor predeterminado.

Incluso cuando reemplaza, no hay manera de garantizar que una regla CSS más específica no anule la suya . Lo mejor que puede hacer aquí es hacer que sus reglas de anulación se dirijan de la manera más específica posible y esperar que el documento principal no lo haga mejor accidentalmente: use una identificación oscura o aleatoria en el elemento primario de su contenido, y use! Important en todas las definiciones de valor de propiedad .

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:

<div class="element">source</div> <div class="destination">destination</div>   <script> $(".element").removeClass(); </script>

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

Si está utilizando Sass en un sistema de compilación, una forma de hacerlo que funcionará en todos los navegadores principales es envolver todas las importaciones de su estilo con un selector: no () como ese ...

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

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

<div class="disable-all-styles"> <p>Nothing in this div is affected by my sass styles.</p> </div>

Por supuesto, todos sus estilos ahora se incluirán con el selector: no (), por lo que es un poco feo, pero funciona bien.

otras formas:

1) incluya el código css (archivo) de Yahoo CSS reset y luego coloque todo dentro de este DIV:

<div class="yui3-cssreset"> <!-- Anything here would be reset--> </div>

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

Mejor solucion

Descargue la hoja de estilo "copiar / pegar" para restablecer las propiedades de css a las predeterminadas (estilo UA):
https://github.com/monmomo04/resetCss.git

Gracias @ Milche Patern!
Realmente estaba buscando valor de propiedades de estilo de restablecimiento / predeterminado. Mi primer intento fue copiar el valor calculado desde la herramienta Dev del navegador del elemento raíz (html). Pero como se calculó, se habría visto / trabajado diferente en cada sistema.
Para aquellos que encuentran una falla en el navegador cuando intentan usar el asterisco * para restablecer el estilo de los elementos secundarios, y como sabía que no funcionaba para usted, reemplazé el asterisco "*" con el nombre de todas las etiquetas 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 más alto, pero no al valor inicial de cada elemento HTML. Así que para corregir esto, he tomado los estilos de "usuario-agente" del navegador webkit y lo he implementado bajo la clase "reset-this"

Enlace útil:


Descargue la hoja de estilo "copiar / pegar" para restablecer las propiedades de css a las predeterminadas (estilo UA):
https://github.com/monmomo04/resetCss.git

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

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

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