Restablecer / eliminar estilos CSS solo para elementos

Estoy seguro de que esto debe haber sido mencionado / preguntado antes, pero he estado buscando una época 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 RWD móvil primero, donde gran parte del estilo utilizado para un elemento en particular en las vistas de pantalla pequeña necesita 'restablecerse' o eliminarse para 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;
  }
}

Por lo tanto, podríamos eliminar o restablecer rápidamente el estilo sin tener que declarar cada propiedad.

¿Tiene sentido?

La palabra clave CSS3 initialestablece la propiedad CSS3 en el valor inicial como se define en la especificación . La initialpalabra clave 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, estas son 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;
    }
}

• Relevante repositorio de github con una lista más exhaustiva de diciembre de 2017
• Relacionado
• Relacionado desde MDN
• Especificaciones relacionadas del 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 por defecto tienen un borde, la aplicación de este restablecimiento hará que ese borde de textarea sea menos.

[POST EDIT FEB 4, '17] Votado por convertirse en una norma moderna, el 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, display: bloque de la hoja de estilo UA en elementos de bloque como) también quedará impresionado.

JAVASCRIPT?

Nadie pensó en otra cosa que CSS para restablecer CSS? ¿Si?

Existe ese recorte totalmente relevante: https://stackoverflow.com/a/14791113/845310

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

respondido Feb 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 restablecimiento de css sea algo factible a menos que terminemos con un solo navegador web ... si el 'predeterminado' lo establece el navegador al final.

A modo de comparación, aquí está la lista de valores de Firefox 40.0 para <blockquote style="all: unset;font-style: oblique">donde se font-style: obliquedesencadena 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 quiso decir, pero actualmente no es realmente compatible (ver a continuación):

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

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

Hay una nueva solución para este problema.

Use all: reverto all: unset.

De MDN:

La palabra clave revertir funciona exactamente igual que unset en muchos casos. La única diferencia es para las propiedades que tienen valores establecidos por el navegador o por hojas de estilo personalizadas creadas por los usuarios (establecidas en el lado del navegador).

Necesita "Una regla css disponible que elimine cualquier estilo establecido 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:

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

Restablecerá todos los estilos aplicados por other-class, another-classy todos los demás estilos heredados y aplicados a eso 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, como su nombre lo dice, revierte esa propiedad a su estilo de usuario o agente de usuario.

2. all

Y cuando lo usemos revertcon la allpropiedad, todas las propiedades CSS aplicadas a ese elemento se revertirán a estilos de usuario / agente de usuario.

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 que revertirá todo author styles(es decir, CSS del desarrollador) a user styles(estilos que un usuario de nuestro sitio web estableció - escenario menos probable) o user-agentestilos propios si no se configuraron 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 y iOS Safari 9.3 tienen soporte para el revertvalor al momento de escribir.

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

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 responsable de la especificación 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 verse de una manera específica. Además, no es propietario de este documento, por lo que no puede cambiar las reglas de estilo existentes. No tiene idea de cuáles podrían ser las hojas de estilo o a qué pueden cambiar.

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

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

La solución más simple

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

1. Limitaciones entre dominios: su contenido no tendrá acceso al documento original en absoluto. No puede 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 evitar el problema n. ° 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 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 CSS más específica no anule la suya . Lo mejor que puede hacer aquí es hacer que sus reglas de anulación se orienten de la manera más específica posible y esperar que el documento principal no sea el mejor por accidente: use una identificación oscura o aleatoria en el elemento padre de su contenido, y use! Important en todas las definiciones de valores de propiedad .

otras formas:

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

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

2) o usar

• https://cssreset.com/scripts/vanilla-css-un-reset/
• https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
• https://cssreset.com/scripts/eric-meyer-reset-css/
• https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
• https://cssreset.com/scripts/normalize-css/

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

Te sugiero que evalúes cómo eliminar el estilo de un elemento por caso.

Digamos que para fines de SEO debe incluir un H1 en una página que no tiene un encabezado real en el diseño. Es posible que desee hacer que el enlace de navegación de esa página sea un 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 con precisión el estilo exacto que se aplica al H1 y desarmarlos 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 descarga un blob aleatorio de código en su CSS que no sabe lo que realmente está haciendo.

Ahora puedes agregar esta clase a tu h1

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

Si está utilizando sass en un sistema de compilación, una forma de hacerlo que funcionará en todos los principales navegadores es envolver todas sus importaciones de estilo con un selector: not () así ...

: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 subcontenido 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 estarán antepuestos con el selector: not (), por lo que es un poco desagradable, pero funciona bien.

Usted mencionó los sitios móviles primero ... Para un diseño receptivo, ciertamente es posible anular los estilos de pantalla pequeña con los estilos de pantalla grande. 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 facilita el mantenimiento de cada conjunto de estilos por separado.

MEJOR SOLUCIÓN

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

Gracias @ Milche Patern!
Realmente estaba buscando el valor de propiedades de estilo de reinicio / predeterminado. Mi primer intento fue copiar el valor calculado de la herramienta de desarrollo del navegador del elemento raíz (html). Pero como se calculó, se habría visto / trabajado diferente en cada sistema.
Para aquellos que encuentran un bloqueo 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 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 topest pero no al valor inicial para cada elemento HTML. Entonces, para corregir esto, tomé los estilos de "agente de usuario" del navegador basado en webkit y lo implementé bajo la clase "reset-this".

Descargue la hoja de estilo "copiar / pegar" para restablecer las propiedades 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

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

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

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 así:

<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 trajo mucho éxito (principalmente debido a la precedencia de las reglas y la compleja jerarquía de la hoja de estilo), saqué al mercado jQuery ubicuo al rescate, lo que hizo el trabajo muy rápido y razonablemente sucio:

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

(Ahora diga lo mal que es usar JS para lidiar con CSS :-))

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

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.

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

En su caso, 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}
}

Solo experimenta.

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

"Cuando se utiliza una regla! Important en una declaración de estilo, esta declaración anula cualquier otra declaración realizada en el CSS, donde sea que esté en la lista de declaraciones. Aunque, important no tiene nada que ver con la especificidad".

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