Redefinir / remover estilos CSS apenas para elementos

Tenho certeza que isso deve ter sido mencionado / perguntado antes, mas tenho procurado por uma idade sem sorte, minha terminologia deve estar errada!

Eu me lembro vagamente de um tweet que vi há pouco tempo que sugeria que havia uma regra css disponível que removeria todos os estilos previamente definidos na folha de estilo de um elemento em particular.

Um bom exemplo de uso pode estar em um site de RWD primeiro em dispositivos móveis, em que grande parte do estilo usado para um determinado elemento nas exibições de canvas pequena precisa ser “redefinido” ou removido para o mesmo elemento na exibição da área de trabalho.

Uma regra de CSS que poderia alcançar algo como:

.element { all: none; } 

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

Assim, podemos remover ou redefinir rapidamente o estilo sem ter que declarar todas as propriedades.

Faz sentido?

A palavra-chave CSS3 initial define a propriedade CSS3 como o valor inicial, conforme definido na especificação . A palavra-chave initial tem amplo suporte a navegadores, exceto para as famílias IE e Opera Mini.

Como a falta de suporte do IE pode causar problemas, aqui estão algumas maneiras de redefinir algumas propriedades CSS para seus valores iniciais:

 .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; } } 
  • Fonte de propriedades
  • Relacionado
  • Relacionado de MDN
  • Especificações relacionadas ao W3C

Como mencionado em um comentário por @ user566245:

isso está correto em princípio, mas a quilometragem individual pode variar. Por exemplo, certos elementos, como textarea, por padrão, têm uma borda, aplicar essa redefinição fará com que a borda da textarea seja menor.

[POST EDIT FEB 4, ’17] Upvoted para se tornar uma norma moderna, o usuário Joost

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

EXEMPLO DO W3

Por exemplo, se um autor especificar todos: inicial em um elemento, ele bloqueará toda a inheritance e redefinirá todas as propriedades, como se nenhuma regra aparecesse nos níveis de autor, usuário ou agente de usuário da cascata.

Isso pode ser útil para o elemento raiz de um “widget” incluído em uma página, que não deseja herdar os estilos da página externa. Observe, no entanto, que qualquer estilo “padrão” aplicado a esse elemento (como, por exemplo, display: block da folha de estilo UA em elementos de bloco como) também será perdido.


JAVASCRIPT?

Ninguém pensou em outro senão css para redefinir o css? Sim?

Há esse recorte totalmente relevante: https://stackoverflow.com/a/14791113/845310

getElementsByTagName (“*”) retornará todos os elementos do DOM. Então você pode definir estilos para cada elemento da coleção:

respondeu 09 de fevereiro ’13 às 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 = ... } 

Com tudo isso dito; Eu não acho que uma redefinição de CSS é algo viável a menos que acabamos com apenas um navegador da web .. se o 'padrão' é definido pelo navegador no final.

Para comparação, aqui está a lista de valores do Firefox 40.0 para um

onde font-style: oblique aciona a operação 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 leitores. Eu acho que isso é o que queria dizer, mas atualmente não é muito suportado (veja abaixo):

 #someselector { all: initial; * { all: unset; } } 
  • Suportado em ( fonte ): Chrome 37, Firefox 27, IE 11, Opera 24
  • Não suportado: Safari

Deixe-me responder a esta pergunta completamente, porque tem sido uma fonte de dor para mim por vários anos e muito poucas pessoas realmente entendem o problema e porque é importante que ele seja resolvido. Se eu fosse o responsável pela especificação do CSS, ficaria constrangido, francamente, por não ter abordado isso na última década.

O problema

Você precisa inserir uma marcação em um documento HTML e ele precisa ter uma aparência específica. Além disso, você não é o proprietário deste documento, portanto, não é possível alterar as regras de estilo existentes. Você não tem idéia do que as folhas de estilo poderiam ser ou para o que elas podem mudar.

Casos de uso para isso são quando você está fornecendo um componente exibível para sites de terceiros desconhecidos usar. Exemplos disso seria:

  1. Uma tag de anúncio
  2. Construindo uma extensão do navegador que insere conteúdo
  3. Qualquer tipo de widget

Correção Mais Simples

Coloque tudo em um iframe. Isto tem seu próprio conjunto de limitações:

  1. Limitações de Cross Domain: Seu conteúdo não terá access ao documento original. Você não pode sobrepor conteúdo, modificar o DOM, etc.
  2. Limitações de exibição: seu conteúdo está bloqueado dentro de um retângulo.

Se seu conteúdo puder caber em uma checkbox, você poderá contornar o problema número 1 fazendo com que seu conteúdo escreva um iframe e defina explicitamente o conteúdo, contornando o problema, pois o iframe e o documento compartilharão o mesmo domínio.

Solução CSS

Eu pesquisei por toda a solução, mas infelizmente não há nenhuma. O melhor que você pode fazer é explicitamente replace todas as propriedades possíveis que podem ser substituídas e substituí-las pelo que você acha que seu valor padrão deveria ser.

Mesmo quando você sobrescreve, não há como garantir que uma regra de CSS mais segmentada não substitua a sua . O melhor que você pode fazer aqui é fazer com que suas regras de substituição sejam o mais específicas possível e esperar que o documento pai acidentalmente não seja o melhor: use um ID obscuro ou random no elemento pai de seu conteúdo e use! Importante em todas as definições de valor de propriedade .

Há uma nova solução encontrada para esse problema.

Você precisa de “Uma regra css disponível que removeria todos os estilos previamente definidos na folha de estilo de um elemento em particular.”

Então, se o elemento tiver um nome de class como remove-all-styles :

Por exemplo:

HTML:

 

My text

Com CSS:

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

Redefinirá todos os estilos aplicados por other-class , another-class e todos os outros estilos herdados e aplicados a essa div .

Ou no seu 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; } } 

Vai fazer.

Aqui, usamos uma propriedade CSS legal com outro valor interessante de CSS.

  1. revert

Na verdade, revert é, como o nome diz, reverte essa propriedade para seu estilo de usuário ou agente de usuário.

  1. all

E quando usamos revert com a propriedade all , todas as propriedades CSS aplicadas a esse elemento serão revertidas para estilos user / user-agent.

Clique aqui para saber a diferença entre estilos de autor, usuário e agente de usuário.

Por ex: se quisermos isolar widgets / componentes incorporados dos estilos da página que os contém , poderíamos escrever:

 .isolated-component { all: revert; } 

O qual reverterá todos os author styles (por exemplo, CSS de desenvolvedor) para user styles (estilos que um usuário de nosso site definirá – menos cenário de chance) ou para estilos de user-agent , se nenhum estilo de usuário for definido.

Mais detalhes aqui: https://developer.mozilla.org/pt-BR/docs/Web/CSS/revert

E o único problema é o suporte : somente o Safari 9.1 e o iOS Safari 9.3 têm suporte para revert valor no momento da gravação.

Então, eu vou dizer usar esse estilo e fallback para outras respostas.

outras formas:

1) inclua o código css (arquivo) do reset do Yahoo CSS e coloque tudo dentro deste DIV:

 

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

Eu não recomendo usar a resposta que foi marcada como correta aqui. É uma enorme bolha de CSS que tenta cobrir tudo.

Sugiro que você avalie como remover o estilo de um elemento em uma base por caso.

Vamos dizer que para fins de SEO você precisa include um H1 em uma página que não tenha header real no design. Você pode querer tornar o link de navegação dessa página um H1, mas é claro que você não quer que o link de navegação seja exibido como um H1 gigante na página.

O que você deve fazer é envolver esse elemento em uma tag h1 e inspecioná-lo. Veja quais estilos CSS estão sendo aplicados especificamente ao elemento h1.

Digamos que eu veja os seguintes estilos aplicados ao elemento.

 //bootstrap.min.css:1 h1 { font-size: 65px; font-family: 'rubykbold'!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; } 

Agora você precisa apontar o estilo exato que é aplicado ao H1 e desfazê-los em uma class css. Isso seria algo como o seguinte:

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

Isso é muito mais limpo e não apenas despejar um código random de código em seu css que você não sabe o que está realmente fazendo.

Agora você pode adicionar essa class ao seu h1

 

Title

Se você estiver usando o sass em um sistema de compilation, uma maneira de fazer isso que funcionará em todos os principais navegadores é agrupar todas as suas importações de estilo com um seletor: not () assim …

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

Em seguida, você pode usar a class de desativação em um contêiner e o conteúdo secundário não terá nenhum de seus estilos.

 

Nothing in this div is affected by my sass styles.

É claro que todos os seus estilos agora serão prefixados com o seletor: not (), por isso é um pouco instável, mas funciona bem.

No meu cenário específico, eu queria pular a aplicação de estilos comuns para uma parte específica da página, melhor ilustrada assim:

   
Does NOT want common styles

Depois de mexer com a redefinição de CSS que não trouxe muito sucesso (principalmente por causa da precedência de regras e hierarquia de folha de estilo complexa), trouxe jQuery onipresente para o resgate, que fez o trabalho muito rapidamente e razoavelmente sujo:

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

(Agora diga como é ruim usar JS para lidar com CSS :-))

Você mencionou sites para dispositivos móveis … Para um design responsivo, certamente é possível replace estilos de canvas pequena por estilos de canvas grande. Mas você pode não precisar.

Tente isto:

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

Essas consultas de mídia não se sobrepõem, portanto, as regras não se sobrepõem. Isso facilita a manutenção de cada conjunto de estilos separadamente.

Para aqueles que estão tentando descobrir como remover o estilo do elemento, sem remover o css dos arquivos, esta solução funciona com jquery:

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

Se você definir seu CSS dentro das classs, você pode facilmente removê-los usando o método jQuery removeClass (). O código abaixo remove a class .element:

  
source
destination

Se nenhum parâmetro for especificado, esse método removerá TODOS os nomes de classs dos elementos selecionados.

Alguma chance de você estar procurando a importante regra? Ele não desfaz todas as declarações, mas fornece uma maneira de substituí-las.

“Quando uma regra importante é usada em uma declaração de estilo, esta declaração substitui qualquer outra declaração feita no CSS, onde quer que esteja na lista de declarações. Embora,! Importante não tenha nada a ver com especificidade.”

https://developer.mozilla.org/pt-BR/docs/CSS/Specificity#The_!important_exception

MELHOR SOLUÇÃO

Faça o download da folha de estilo “copiar / colar” para redefinir as propriedades css para o padrão (estilo UA):
https://github.com/monmomo04/resetCss.git

Obrigado @ Milche Patern!
Eu estava realmente procurando por valor de propriedades de estilo reset / default. Minha primeira tentativa foi copiar o valor computado da ferramenta Dev do navegador do elemento raiz (html). Mas, conforme calculado, teria parecido / funcionado diferente em todos os sistemas.
Para aqueles que encontram uma falha no navegador ao tentar usar o asterisco * para redefinir o estilo dos elementos filhos, e como eu sabia que não funcionava para você, substituí o asterisco “*” por todas as tags HTML . O navegador não caiu; Estou no Chrome versão 46.0.2490.71 m.
Por fim, é bom mencionar que essas propriedades reconfigurarão o estilo para o estilo padrão do elemento raiz mais alto, mas não para o valor inicial de cada elemento HTML. Então, para corrigir isso, eu peguei o estilo “user-agent” do navegador baseado em webkit e o implementei sob a class “reset-this”.

Link útil:

Faça o download da folha de estilo “copiar / colar” para redefinir as propriedades css para o padrão (estilo UA):
https://github.com/monmomo04/resetCss.git

Estilo do agente do usuário:
CSS padrão dos navegadores para elementos HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Especificidade CSS (preste atenção à especificidade):
https://css-tricks.com/specifics-on-css-specificity/

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

Não, isso é apenas uma questão de gerenciar melhor sua estrutura de CSS.

No seu caso eu iria pedir o meu css algo assim:

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

Apenas experimente.