CSS padrão dos navegadores para elementos HTML

146

Onde posso encontrar o CSS padrão de um navegador para elementos HTML?

Muitos elementos HTML vêm com algumas propriedades CSS padrão que às vezes podem resultar em comportamento desconhecido / indesejado. Por exemplo, as caixas de entrada são exibidas de maneira diferente em diferentes navegadores. Estou procurando um lugar que cubra as novas propriedades CSS3 e os novos elementos HTML5.

Já vi em outras perguntas (muito mais antigas) (como as folhas de estilo CSS padrão dos navegadores ) respostas que sugerem uma solução de redefinição de CSS. Às vezes, essa solução não é desejada, geralmente eu gostaria de manter algumas das propriedades básicas (como o destaque das caixas de entrada no Chrome). Em outras palavras: não quero me livrar das coisas só porque não sei o que elas fazem .

Então, existe um site que possa me fornecer todas essas informações (ou talvez a maioria)?

Nachshon Schwartz
fonte
3
Não é um site, mas nas ferramentas do Chrome Devleoper, ele mostra as regras CSS herdadas e as marcadas "folha de estilo do agente do usuário" mostrarão as regras do Chrome. Desculpe, não pude ajudar mais. também: sitesdowdecolaborarexatamente o
James Khoury
2
Ótima pergunta! Eu concordo, deve haver um lugar onde toda essa informação esteja disponível.
Apenas uma observação, o reset.css não interrompe as coisas básicas. Suas caixas de entrada ainda serão destacadas no Chrome. Você apenas perderá as diferenças aleatórias de preenchimento entre os navegadores. Assim, você pode começar com o mesmo comportamento em todos os navegadores (preenchimento / margem / ... sábio).
Jules
1
@ James Khoury - Também é verdade no Firebug.
29411 Rob
@ Rob, é claro! Esqueci-me sobre Firebug
James Khoury

Respostas:

93

Um repositório GitHub de todas as especificações HTML do W3C e folhas de estilo CSS padrão do fornecedor pode ser encontrado aqui

1. Estilos padrão para Firefox

2. Estilos padrão para o Internet Explorer

3. Estilos padrão para Chrome / Webkit

4. Estilos padrão para o Opera

5. Estilos padrão para HTML4 (especificação W3C)

6. Estilos padrão para HTML5 (especificação W3C)

Amostra, de acordo com a especificação HTML3 padrão do W3C:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}
SW4
fonte
Em uma nota lateral, é interessante ver coisas como a nobrtag infame na folha de estilo HTML5 do W3C.
precisa saber é o seguinte
ainda atualizado?
Webwoman 18/06/19
O link para o Firefox não contém todos os padrões. Por exemplo, ele não contém o css padrão para a área de texto. Você pode encontrar isso em resource: //gre-resources/forms.css. Em geral, navegue pelos arquivos em resource: // gre-resources para encontrar todas as informações padrão. Ou para todos os navegadores, consulte html.spec.whatwg.org/multipage/rendering.html .
David Spector
117

É diferente para cada navegador, portanto:

Você também pode olhar para a folha de estilo HTML5 Boilerplate , que "normaliza a exibição de muitas coisas sem ser redefinida no sentido tradicional". Também corrige alguns bugs / inconsistências.

Também vale a pena olhar: https://github.com/necolas/normalize.css/blob/master/normalize.css

trinta dias
fonte
2
O que, curiosamente, é basicamente o mesmo material a que vinculei na minha resposta à pergunta acima, que aparentemente está "desatualizada". Embora eu apenas tenha adicionado o link do IE a isso há 2 dias.
22611 robertc
1
@nayish O que mais você acha que existe além dos padrões do navegador?
22611 robertc
1
@nayish Não existe uma definição separada do CSS padrão para elementos HTML fora do que navegadores implementaram em suas folhas de estilo padrão
robertc
1
@nayish Isso está especificado contra cada propriedade individual na especificação , embora note que a opacidade não é herdado no sentido CSS
robertc
2
Apenas uma observação, o clichê HTML5 é muito mais do que normalizar CSS. Para normalizar o CSS, eles usam a ferramenta Normalize: necolas.github.com/normalize.css
Aguardando Dev ...
0

Embora esse seja um problema antigo entre navegadores, já que cada navegador tem sua própria renderização e comportamento com alguns elementos html, como elementos de mídia e entradas, agora em 2017 podemos usar com bastante segurança os filtros css proprety sobre eles.

Isso permite fornecer uma paleta de cores com o filtro de rotação de matiz que renderizará muito bem os navegadores.

Os trechos a seguir mostram uma maneira de usar uma cor do tipo de entrada para renderizar esse efeito em tempo real em um elemento de vídeo com javascript.

Para usar apenas css, é obrigatório usar cada um destes filtros: sépia não em 0, alta saturação, escala de cinza em 0, alto contraste e, em seguida, dar uma cor com a propriedade hue-rotate, seguindo meus testes. O filtro invertido não é obrigatório, mas está dando alguns efeitos profundos.

Além disso, o filtro de sombra projetada está funcionando muito bem entre navegadores. Para ser usado assim: filter: drop-shadow (2px 20px 50px vermelho) [X, Y, RAIO, COR]

function styloElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  
  media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"

}
styloElem()
body {
  text-align:center;
  background:#001;
  color: white
}
video {
  width:500px;max-width:500px
}
Colors: 
<input 
       type="color"
       id="stylo"
       oninput="styloElem()"
       class="media"
       data-hue="0" />

<br><br> 

<video 
       controls
       id="media"        
       onplay="this.removeAttribute('controls');this.style.all='unset'"     
       onpause="this.controls='controls';styloElem()"
       src="https://ia600206.us.archive.org/7/items/MysteresDarchives-Saison04/1944%2c%20Dans%20le%20maquis%20du%20Vercors.ogv"></video>

Posso usar filtros css:

http://caniuse.com/#feat=css-filters

Uma barra de ferramentas que fiz em torno dos filtros css, de onde estão vindo estas notas:

https://github.com/webdev23/ponyFilters

Um exemplo mais completo de codepen:

http://codepen.io/Nico_KraZhtest/pen/bWExEB/

NVRM
fonte
Parece ser um pouco à parte, você está certo! Este foi o meu trabalho duro nesta data. Como este é apenas css, isso não altera o comportamento do elemento do navegador, mas pode dar uma maneira de renderizar esse tipo de elemento com uma cor / brilho idêntico, em qualquer navegador, sem escrever um código especial para cada um deles. Isso não era possível no momento da pergunta. Obrigado.
NVRM 22/07