posted by Marcio Rosa in
CSS
Introdução
Este documento é focado no XHTML 1.0 Strict para estrutura, CSS Níveis 1 e 2 para apresentação e ECMAScript 262 para scripts.
Quando é dito que uma página é compatível com os web standards, significa dizer que o documento, além de usar as tecnologias acima:
consiste de HTML ou XHTML válido;
*usa CSS ao invés de tabelas para layout;
é bem-estruturado e semanticamente marcado;
funciona em qualquer browser.
Por que usar os web standards?
Manutenção e desenvolvimento simplificados: usar HTML mais semântico e bem-estruturado torna mais fácil a compreensão do código criado por outros desenvolvedores.
Compatível com browsers do amanhã: quando você usa padrões definidos e código válido, você torna seu documento resistente ao tempo, reduzindo o risco de novos browsers serem incapazes de entender o código que você usou.
Download e renderização mais rápidos: menos HTML resulta em arquivos de tamanho menor e download mais rápido. Os browsers modernos renderizam as páginas mais rapidamente quando elas estão no modo de leitura de web standards do que no modo de compatibilidade antigo.
Melhor acessibilidade: HTML semântico, onde estrutura é separada de conteúdo, torna fácil para narradores de tela e dispositivos de acesso à internet alternativos acessar e interpretar o conteúdo.
Melhor posicionamento em mecanismos de busca: a separação de conteúdo e apresentação faz o conteúdo representar uma parte maior do arquivo final. Combinada com marcação semântica ( semantic markup ), isso promove seus resultados nos mecanismos de busca.
Adaptação simplificada: um documento semanticamente marcado pode ser facilmente adaptado para impressoras ou dispositivos alternativos, como computadores de mão e telefones celulares, apenas por vincular a um arquivo CSS diferente. Você pode fazer alterações na camada visual de um site inteiro apenas por fazer edição em um único arquivo.
Estrutura e Apresentação
Separe estrutura da apresentação o quanto puder. O ideal é que você tenha um HTML que contenha apenas a estrutura e conteúdo, e controle sua apresentação inteiramente pelo CSS. Separação de estrutura da apresentação não é muito comum na web de hoje. Em muitos sites, o código HTML não tem estrutura e semântica adequadas.
Títulos
Para marcar os títulos, use <h1>, <h2>, <h3>, <h4>, <h5>ou <h6>, dependendo do nível deste título. <h1>é o nível mais alto.
Exemplos:
<h1>Brand</h1>
<h2>Título do documento </h2>
<h3>Subtítulo</h3>
<p>Parágrafos</p>
Título do documento
Subtítulo
Parágrafos
Use o elemento <p>para marcar os parágrafos. Não use o elemento <br /> para criar espaços entre os parágrafos. Margens e espaços entre parágrafos são suportadas pelo CSS, e devem ser marcadas corretamente.
Exemplo:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec risus. Ed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla.</p>
Listas
Uma lista de coisas deve ser marcada como uma lista. Há três tipos diferentes de listas em HTML: listas sem ordenação, listas com numeração, e listas de definições.
Listas sem ordenação ( unordered lists ), também conhecidas como listas de bullets ( marcadores, em inglês ), começam com <ul> e finalizam <ul>. Cada item da lista é contido em um elemento <li>.
Listas ordenadas ( ordered lists ) começam com <ol> e terminam com </ol>.
Listas de definição <dl> ( definition lists ) são um pouco diferentes, e podem ser usadas para marcar uma lista de termos e descrições. Listas de definição começam com <dl> e terminam com </dl>. Cada termo de definição ( definition term ) é descrito em um <dt>e a respectiva descrição da definição ( definition description ) é contida em um ou mais elementos <dd>.
Exemplos:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Resultado:
*Item 1
*Item 2
*Item 3
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Resultado:
1.Item 1
2.Item 2
3.Item 3
<dl>
<dt>website</dt>
<dd>A collection of linked web pages that represent a company
or an individual.</dd>
<dt>web page</dt>
<dd>The basic unit of information on the Web, containing text,
graphics and other media.</dd>
</dl>
Resultado:
website
A collection of linked web pages that represent a company or an individual.
web page
The basic unit of information on the Web, containing text, graphics and other media.
CSS torna possível usar listas mesmo quando você não quer que o conteúdo seja apresentado visualmente como uma lista tradicional. Uma barra de navegação, que é uma lista de links, é um bom exemplo disso. A vantagem de usar uma lista para menu é que o sentido será preservado para browsers que não suportam o CSS.
Doctype
Todos documentos HTML e XHTML devem ter uma declaração de tipo de documento ( DTD, doctype ) para serem válidos. O doctype diz qual é a versão de HTML ou XHTML que está sendo usada pelo documento, e é usada pelo validador quando validar e para os browsers determinarem de que forma o conteúdo será renderizado.
Se um doctype correto e completo estiver presente no documento, vários browsers adotarão o modo de standards ( standards mode ), o que significa que eles seguirão o CSS o mais fiel possível. O documento também será renderizado mais rapidamente, pois o browser não terá de interpretar e tentar compensar o HTML inválido. Isso também reduz a diferença de renderização entre os browsers.
O doctype a seguir declara que o document é um XHTML 1.0 Strict, e fará os browsers trocarem o modo de interpretação de doctype ( doctype switching ) para o standards mode.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Aqui está uma lista das coisas que são mais importantes a considerar quando estiver usando XHTML 1.0 Strict, ao invés de HTML 4.01 Transitional.
Sempre use caixa baixa, e aspas em todos atribudos:Todos os elementos e atributos devem ser em caixa baixa, e todos atributos devem estar sempre “entre aspas duplas”.
Incorreto: <A href=”index.html” CLASS=internal>
Correto: <a href=”index.html” class=”internal”>
Feche todos os elementos:em HTML, alguns elementos não precisam ser fechados. Tais elementos são fechados automaticamente quando o próximo elemento começa. O XHTML não permite isso. Todos os elementos devem ser fechados, mesmo aqueles que não tem tag de fechamento, como <img>.
Incorreto:< li>Item 1
Correto: <li>Item 1</li>
Incorreto: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Correto: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
Incorreto: <br>
Correto: <br />
Incorreto: <img src=”image.jpg” alt=”">
Correct: <img src=”image.jpg” alt=”" />
Atributos não podem ser minimizados: em HTML, alguns atributos podiam ser minimizados. XHTML não permite isso.
Incorreto: <input type=”checkbox” id=”checkbox1″ name=”checkbox1″ checked>
Correto: <input type=”checkbox” id=”checkbox1″ name=”checkbox1″ checked=”checked” />
Não use elementos obsoletos ou proibidos para o doctype: alguns elementos e atributos que são permitidos no HTML 4.01 Transitional e XHTML 1.0 Transitional são obsoletos no XHTML 1.0 Strict ( e no HTML 4.01 Strict ). Exemplos: <font>, <center>, alink, align, width, height (para alguns elementos), e background.
Codificação de caracteres – character encoding
Todos os documentos XHTML deveriam especificar a codificação de caracteres.
A melhor maneira de especificar a codificação de caracteres ( character encoding ) é configurar o servidor web para enviar um cabeçalho de HTTP content-type com o código de character encoding. Para informações detalhadas sobre como fazer isso, cheque a documentação do software do seu servidor web que está em uso.
Para servir suas páginas como HTML, mude application/xhtml+xml para text/html. Se você, por qualquer razão, for incapaz de configurar seu servidor web e especificar o character encoding corretamente, use um elemento <meta>dentro do cabeçalho <head>do seu documento. É uma boa idéia especificar o character encoding desta maneira mesmo se o seu servidor estiver configurado corretamente.
Por exemplo, o seguinte elemento <meta>diz ao browser que o documento usa o character encoding de ISO-8859-1:
<meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1″ />
CSS
Tendo sido costumeiramente usado mais para especificar propriedades e tamanhos de fontes, o CSS pode agora ser usado para controlar inteiramente o layout de um documento.
Semântica e boa estrutura do XHTML são necessárias para o CSS ser capaz de controlar o layout de uma maneira eficiente.
Suporte de browser
Como mencionado acima, o suporte dos browsers ao CSS tem sofrido um grande avanço recentemente. Infelizmente, todos os fabricantes de browsers não parecem estar interessados em implementar os padrões abertos do web standards, logo, o nível do suporte ao CSS varia de browser a browser. Há alguns bugs que fazer o browser agir de modos que não era previsto.
Atualmente ( 2004 ), os browsers que tem melhor suporte ao CSS são Mozilla ( e outros browsers baseados em Gecko: Firefox, Camino, Netscape6+), Opera e Safari ( e outros browsers baseados em WebCore ). O Internet Explorer 6/Win não possui o mesmo nível de suporte ao CSS, mas ainda assim é possível fazer muita coisa nele. Internet Explorer 5/Mac possui um suporte muito bom para CSS 1, mas não suporta muita coisa de CSS 2. As versões do IE 5.* suporta razoavelmente bem, mas há alguns problemas que você precisa estar atento. Versões mais antigas do Internet Explorar não possuem suporte que valha a menção. O mesmo vale para Netscape, nas versões anteriores
à 6.
Elementos e classes supérfluas
Quando se é iniciante do CSS, é comum cometer o erro de usar elementos XHTML desnecessários, classes supérfluas e <div> extras. Isso não significa necessariamente que o código está inválido, mas é uma contradição a uma das razões de separar estrutura da apresentação: código mais simples, enxuto e limpo.
Um exemplo de uso desnecessário de elementos XHTML:
<h3><em>Headline</em></h3>
Se era a sua intenção deixar o texto em itálico, use o CSS para estilizar os <h3>:
h3 {
font-style:italic;
}
Uso supérfluo de classes pode se parecer com isso:
<div id=”main”>
<div class=”maincontent”>
<p class=”maincontenttext”>
Lorem ipsum dolor
</p>
</div>
</div>
O trecho a seguir faz melhor uso:
<div id=”main”>
<div>
<p>
Lorem ipsum dolor
</p>
</div>
</div>
Para controlar elementos dentro do div#main, você pode usar seletores contextuais no código do CSS. Nesse caso seria assim:
div#main p {
/* regras */
}
Na maioria dos casos, o CSS pode ser usado para estilizar logicamente o XHTML de uma maneira que você não precisará adicionar nenhuma tag extra. No entanto, há casos que adicionar um código extra é a única solução.
Dicas de CSS
Valide o código antes: quanto estiver debugando o código, comece por validar o HTML e o CSS. Muitos problemas são causados por código inválido.
Teste no browser mais avançado, depois, teste nos outros: se você tem um browser muito antigo, cheio de problemas na interpretação do CSS e você o usa para testar o CSS durante o desenvolvimento, seu CSS estará adaptado àquele browser. Quando você testa em um browser mais avançado, as chances de que as coisas não saiam como planejado são reduzidas. É melhor começar pelo browser com suporte ao CSS mais avançado, daí então adaptar para os browsers menos aptos ao CSS.
CSS Box Model
Entenda o modelo de caixa de CSS ( CSS Box Model ): para achar a largura ou altura real de um elemento, você adiciona a ele padding e border para seu width or height. No Internet Explorer 5.*/Win, diferentemente, padding e border são incluídos diretamente no width or height.
Suponha o seguinte trecho de CSS:
div.box {
width:300px;
padding:20px;
border:10px solid;
}
A largura total deste div é de 360px.
10px + 20px + 300px + 20px + 10px = 360px
No Internet Explorer 5.*/Win, a largura total é 300px, e a largura do documento é 240px.
300px - 10px - 20px - 20px - 10px = 240px
Para contornar esse problema, você pode tanto adicionar um hack de CSS para fornecer valores diferentes aos browsers e corrigir isso, ou você pode evitar especificar tanto width e padding ou border for para um mesmo elemento.
Para mais explicações no CSS Box Model, veja o documento Box model.
Especifique unidades para valores númericos diferentes de zero: o CSS requer que as unidades sejam claramente especificadas para propriedades como width, height, e font-size. Uma exceção a isso é quando o valor for 0 ( zero ) Neste caso, nenhuma unidade é necessária, sendo que zero é zero, não importa a unidade.
Nomeie as classes e IDs pela sua função, não pela apresentação: se você chamar uma classe de.smallblue, e mais tarde decidir que aquele texto deverá ser grande e vermelho, o nome da classe cairá em contradição. É melhor usar nomes descritivos e funcionais sobre a estrutura, como por exemplo .copyright ou .important.
Maiúsculas/minúsculas diferenciadas: os valores de atributos HTML como class e id são diferentes em maíusculas ou minúsculas no CSS (veja CSS2 syntax and basic data types).
Os nomes dos elementos são sensíveis à variação de maiúsculas/minúsculas quando usados com XHTML servido com application/xhtml-xml, mas não em HTML ou XHTML servido como text/html.
Cheque os IDs: apenas um elemento em um documento pode conter determiinado valor para o atributo id, enquanto um numero ilimitado de elementos pode compartilhar do mesmo valor de class.
Use apenas caracteres permitidos para classe id: os nomes de classe id podem consistir apenas de caracteres alfanuméricos [A-Za-z0-9] e hifenação (-), e não podem começar com um caracter ou hífen. (veja CSS2 syntax and basic data types).
Comentários corretos: em CSS, os comentários começam com /* e terminam com */
/* Este é um comentário */
