Folha de estilos default do W3C
Muitos desenvolvedores desconhecem que existe no W3C uma folha de estilos padrão para o HTML4 com base em uma análise em User Agents para ser usada como referência para desenvolvedores, até eu desconhecia sua existência, descobri apouco em uma de minhas insessantes buscas por conhecimento. Ela se resume nas seguintes especificações:
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 }
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 { 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" }
:before, :after { 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 }
}
Teoricamente falando então essa folha de estilos então é para ser usada como base no desenvolvimento de browsers. Se todos os fabricantes de browsers utilizassem esse padrão, com certeza não teríamos mais que quebrar a cabeça para consertar erros bizarros em alguns browsers.
Para vocês verem a diferença que a entre as folhas de estilo, dêem uma olhada na folha de estilo padrão do Firefox 2 e Firefox 3. Não consegui achar a folha de estilos padrão do Internet Explorer para efetuar uma comparação, mas se alguém souber onde conseguí-la, eu agradeceria.
Pedro, isso serve como um “reset css” então?
Acho que é mais do que um reset.css, né? Seria mais correto assumir que é um default.css; ele não reseta todas as bordas, margens, etc… mas seta o que deveria ser o padrão.
E eu sempre quis saber quais eram esses valores padrão, mto bom o post!
Boa pergunta,
pois está parecendo mais um padrão que os browsers deveriam seguir do que um reset css.
@S,
Não, isso seria uma folha de estilo base padrão que todo browser deveria seguir.
Não tive paciência de ler as duas folhas de estilo.
Isso quer dizer que se eu alterar essas folhas de estilo, posso manipular a aparência dos sites no meu navegador. Hummm interessante.
Tenho observados que alguns sites colocam as propriedades em um única linha, talvez para que o css não fique com muitas linhas, outros porém, colocam cada propriedade um uma linha, e dando um espaço de tab,
Existe algum padrão para isto ?
Eu recomendo esse texto pro amigo aqui de cima: http://www.tableless.com.br/nao-otimize-seu-codigo
Colocar em uma linha tem uma pseudo-vantagem de diminuir o peso do arquivo, mas perde-se muita legibilidade.
Você pode ter 2 versões, a de edição e a compacta…
Mas isso depende muito da quantidade de pessoas que visitam seu site.
Se tiver poucos acessos, nem perca tempo fazendo a versão mais compacta.
Igor, certa vez escrevi esse post aqui: http://www.andafter.org/blogs/odesenvolvedor/publicacoes/diminuindo-o-consumo-de-banda-com-html-css-e-javascript_674.html
sobre compactação de arquivos feita pelo webserver no envio ao browser. Usando isso, não é necessário nem ter duas versões, pois a compactação por gzip é tão – ou mais – eficiente.
Realmente, se todos os browsers seguisse tão css, seria muito mais fácil a vida dos desenvolvedores.
Éeee muito interessante esse post eu tbm não sabia que o w3c tinha esse recurso, pena que não é seguido… enquanto isso vamos sofrendo com as versões.
t+
eu achei muito interessante com certeza
Legal, será q deveríamos colocar isso no início do nosso css pra forçar o padrão default?
Mais oq eu keria mesmo era o tamanho default de cada um dos headers h1 h2 até h7, além de p, etc