Tutorial Avançado de CSS: Especificidade

20 07 2008

image

Se você tem duas (ou mais) regras CSS conflitantes que se aplicam ao mesmo elemento, existem algumas regras básicas que o navegador segue para determinar qual é a mais específica e por isso a vencedora.

Isso pode não parecer importante, e na maioria dos casos você não vai encontrar conflito algum, mas à medida que seus arquivos CSS se tornam maiores e mais complexos, ou você passa a lidar com um número maior de arquivos, aumentam as chances de conflitos aparecerem.

Se os seletores são os mesmos o último sempre tem prioridade. Por exemplo, se você tem:

p { color: red; }
p { color: blue; }

Elementos p seriam coloridos de azul porque é a regra que vem por último.

De qualquer forma, você geralmente não vai ter seletores idênticos com declarações conflitantes (porque não faz muito sentido). Conflitos sempre aparecem, no entanto, quando você tem seletores aninhados. No exemplo seguinte:

div p { color: red; }
p { color: blue; }

Pode parecer que um elemento p dentro de uma div vai ser colorida de azul, já que a regra de colorir elementos p de azul vem por último, mas na verdade ele vai ser colorido de vermelho devido a especificade do primeiro seletor. Basicamente, quanto mais específico for um seletor maior prioridade ele vai ter quando aparecerem estilos conflitantes.

A especifidade real de um grupo de seletores aninhados precisa de alguns cálculos. Basicamente, você atribui a cada seletor de id (“#qualquercoisa”) um valor de 100, a cada seletor de classe (“.qualquercoisa”) um valor de 10 e a cada seletor HTML (“qualquercoisa”) um valor de 1. Aí você soma tudo e que rápido!, você tem o valor da especificidade.

  • p tem especifidade de 1 (1 seletor HTML)
  • div p tem especifidade de 2 (2 seletores HTML; 1+1)
  • .tree tem especifidade de 10 (1 seletor de classe)
  • div p.tree tem especifidade de 12 (2 seletores HTML e um seletor de classe; 1+1+10)
  • #obaoba tem especifidade de 100 (1 seletor de id)
  • body #content .alternative p tem especifidade de 112 (seletor HTML, seletor de id, seletor de classe, seletor HTML; 1+100+10+1)

Então de todos os exemplos usados, div p.tree (com especificidade de 10) venceria div p (com especificidade de 2) e body #content .alternative p venceria de todos eles, independente da ordem.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios




Tutorial Avançado de CSS: Pseudo Elementos

20 07 2008

image

Pseudo elementos se ligam a seletores do mesmo jeito das pseudo classes, na forma seletor:pseudoelemento { propriedade: valor; }. Existem quatro pseudo elementos.

Primeira Letra e Primeira Linha

O pseudo elemento first-letter é aplicado à primeira letra de um elemento e first-line à primeira linha. Você pode, por exemplo, criar letras capitulares (drop caps) e parágrafos com a primeira linha em negrito dessa forma:

p:first-letter {
  font-size: 3em;
  float: left;
}

p:first-line {
  font-weight: bold;
}

Before e after

Os pseudo elementos before (antes) e after (depois) são usados em conjunto com a propriedade content pra colocar conteúdo de qualquer lado de um elemento sem tocar no HTML.

O valor da propriedade content pode ser open-quote (aspas de abertura), close-quote (aspas de fechamento), no-open-quote (sem aspas de abertura), no-close-quote (sem aspas de fechamento), qualquer texto delimitado por aspas duplas ou qualquer imagem usando url(nomedaimagem).

blockquote:before {
	content: open-quote;
}

blockquote:after {
	content: close-quote;
}

li:before {
	content: "POW: "
}

p:before {
	content: url(images/jam.jpg)
}

Soa maravilhoso, não é? Bem, assim como tantas outras coisas (-sigh-), a maioria dos usuários não vai ver os efeitos de before ou after porque o IE simplesmente não pode ser incomodado por eles. Preguiçoso preguiçoso preguiçoso.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de CSS: Regras @

20 07 2008

image

Essa aula foi traduzida pelo aluno do curso Ruan Carlos. Obrigado, Ruan!

Regras @ encapsulam um punhado de regras CSS para aplicar a alguma coisa específica. Woo.

Importação

A regra @import adiciona outra folha de estilo. Por exemplo, se você quiser adicionar os estilos de uma outra folha de estilo para a sua existente, você pode adicionar algo como:

@import url(estilosadicionais.css);

Isso é muitas vezes usado no lugar do elemento link para ligar um arquivo CSS a uma página HTML, essencialmente para ter uma folha de estilo interna, algo como isso:

<style type="text/css" media="all">
  @import url(macaco.css);
</style>

O benefício disso é o fato de que navegadores mais antigos, como o Netscape 4.x, por não terem idéia das regras @, não vão ligar a folha de estilos, o que, se você tiver uma marcação bem-estrurada, vai deixar o HTML puro funcional (embora sem estilo).

Tipos de mídia

A regra @media aplica seu conteúdo a um determinado meio de visualização, tal como a impressão. Por exemplo:

@media print {
  body {
    font-size: 10pt;
    font-family: times new roman, times, serif;
  }
  #navegacao {
    display: none;
  }
}

Os meios de visualização são:

  • all – para todos os meios abaixo, acima, ao redor e dentro do sol.
  • aural – Para sintetizadores de fala.
  • handheld – para dispositivos portáteis.
  • print – para impressoras.
  • projection – para projetores.
  • screen – para visualização no computador.

Você também pode usar braille, embossed, tty ou tv.
Nota: De todos esses, os únicos tipos de mídia suportados pelo IE são all, screen e print.

Conjuntos de caracteres

A regra @charset simplesmente estabelece a regra de codificação dos caracteres de uma folha de estilos externa. A codificação aparece no alto da folha de estilos e é algo como @charset “UTF-8”;

Aparência da fonte

A regra @font-face é usada para dar uma descrição detalhada de uma fonte e pode incorporar uma fonte externa em seu CSS.
Ela requer um descritor da família da font (font-family), ao qual a fonte pode ser referenciada, cujo valor pode ser um nome de uma fonte existente (sobrescrevendo essa fonte onde forem encontradas condições) ou pode ser um nome completamente novo. Para incorporar uma fonte, o descritor src é utilizado. Outros descritores adicionados à regra font-face se tornam condições para que a fonte incorporada seja usada. Por exemplo, se você adicionar um estilo font-weight: bold na regra, o src da font-family só vai ser aplicado a seletores com a propriedade font-family se a propriedade font-weight for definida como bold (negrito).
Você pode usar uma regra font-face como essa:

@font-face {
	font-family: umnomequalquer;
	src: url(algumafonte.eot);
	font-weight: bold;
}

p {
	font-family: umnomequalquer;
	font-weight: bold;
}

Isso irá aplicar a fonte algumafonte.eof aos parágrafos (Mais não iria se o seletor p não fosse definido como font-weight:bold).
Suporte para fontes incorporadas na melhor das hipóteses é irregular. O navegador Mozilla não suporta e não tem planos imediatos para o fazer. Apenas IE tem suporte decente. Para incorporar fontes ao IE, você precisa usar o software da Microsoft WEFT, que irá converter os caracteres de uma fonte TrueType em uma fonte OpenType condensada (e isso só pode ser utilizado com a URI que você especificou). Devido a esta limitação (bastante complicada) de compatibilidade, é melhor não usar fontes que não tenham um sistema de fontes alternativo adequado, e evitar usar @font-face.

Páginas

A regra @page é para a visualização da página em mídias de página, e é um método avançado de aplicar estilos para impressão. Ela define um bloco de página que se estende pelo modelo de caixa (veja Margens e Espaçamento) de modo que você define o tamanho e apresentação de uma única página.
Há uma série de convenções que se aplicam na regra @page, como não existirem paddings (espaçamentos) ou bordas e não estarmos falando de uma tela de computador – pixels e em’s como unidades de medidas não são permitidos.
Há uma serie de propriedades específicas que podem ser usadas, tais como size (tamanho), que pode ser definido como portrait (retrato), landscape (paisagem), auto ou um tamanho. A propriedade marks também pode ser usada para definir marcas de corte.

Pseudo classes para mídia de página.

Existem três pseudo classes que são usadas especificamente em conjunto com a regra @page, que assumem a forma @page:pseudo-classe { alguma coisa }.
:first é aplicada a primeira página de uma mídiade página.
:left e :right aplicam-se às páginas da esquerda e da direita, respectivamente. Isto é usado para especificar uma margem esquerda maior em páginas que vão ficar à esquerda e uma margem direita maior para páginas à direita.
Há uma série de outras facetas específicas para a regra @page como quebras de linha e nomes de páginas, mas vendo que esta regra dificilmente funciona em algum navegador, você provavelmente já desperdiçou tempo suficiente lendo esta parte. É uma idéia bem agradável, no entanto…

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.


				




Tutorial Avançado de CSS – Layout da Página

20 07 2008

Exemplo de página dividida em seções

Construir layouts com CSS é fácil. Se você está acostumado a desenhar suas páginas com tabelas, no começo usar CSS pode parecer difícil, mas não é, é apenas diferente e na verdade faz bem mais sentido.

Você precisa ver cada parte da página como um pedaço individual que você pode empurrar em qualquer lugar que você quiser. Você pode posicionar esses pedaços de modo aboluto ou em relação a outro pedaço.

Posicionamento

A propriedade position é usada pra definir se um elemento está posicionado de forma absoluta (valor absolut), relativa (relative), estática (static) ou fixa (fixed).

O valor static é o valor padrão e renderiza os elementos na ordem normal, como eles aparecem no HTML.

relative é bem parecido com static, mas os elementos podem ser deslocados de sua posição original com as propriedades top (topo), right (direita), bottom (inferior) e left (esquerda).

absolute empurra um elemento pra fora do fluxo normal do HTML e o coloca em seu próprio mundo. Em seu pequeno e louco mundo, o elemento absoluto pode ser colocado em qualquer lugar na  página usando top, right, bottom e left pra definir a distância de cada lado.

fixed funciona como absolute, mas o elemento vai ser posicionado em relação à janela e não em relação à página, então, teoricamente, um elemento fixado deve ficar exatamente onde ele está na tela mesmo quando a página é rolada. Por que teoricamente? Pelo motivo de sempre – isso funciona perfeitamente em navegadores como Mozilla e Opera, mas no IE não funciona de jeito nenhum.

Layout usando posicionamento absoluto

Você pode criar um layout tradicional com duas colunas usando posicionamento absoluto se você tem algo como o HTML seguinte:

<div id="navegacao">
  <ul>
    <li><a href="esse.html">Esse</a></li>
    <li><a href="aquele.html">Aquele</a></li>
    <li><a href="oOutro.html">O Outro</a></li>
  </ul>
</div>

<div id="conteudo">
  <h1>Ra ra banjo banjo</h1>
  <p>Bem-vindo à página Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
  <p>(Ra ra banjo banjo)</p>
</div>

E se você aplicar o CSS abaixo:

#navegacao {
	position: absolute;
	top: 0;
	left: 0;
	width: 10em;
}

#conteudo {
	margin-left: 10em;
}

Você vai ver que isso vai levar a barra de navegação pra esquerda e modificar a largura pra 10 em’s. Porque a navegação está posicionada absolutamente, ela não tem nada a ver com o fluxo do resto da página, e por isso é necessário definir a margem esquerda da área de conteúdo como sendo igual a largura da barra de navegação.

Fácil até demais. E você não está limitado a essa abordagem de duas colunas. Com um posicionamento mais engenhoso, você pode dispor de quantos blocos você quiser. Se você quisesse adicionar uma terceira coluna, por exemplo, você poderia adicionar o pedaço ‘navegacao2’ no seu HTML e mudar seu CSS para:

#navegacao {
  position: absolute;
  top: 0;
  left: 0;
  width: 10em;
}

#navegacao2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 10em;
}

#conteudo {
  margin: 0 10em; /* definindo as margens superior e inferior pra 0 e a esquerda e direita pra 10em */
}

A única desvantagem de elementos posicionados absolutamente é que eles vivem num mundo próprio, não existe nenhum jeito preciso de determinar aonde eles vão parar. Se você for usar os exemplos acima e todas as suas páginas têm barras de navegação pequenas e áreas de conteúdo grandes, tudo bem. Mas, especialmente quando usar valores relativos para larguras e tamanhos, você geralmente tem que abandonar qualquer esperança de posicionar qualquer coisa, como um rodapé, embaixo desses elementos. Se você quiser fazer algo assim vai ser necessário flutuar todos os seus pedaços, ao invés de posicioná-los absolutamente.

Flutuando

Flutuar um elemento vai deslocá-lo para a direita ou esquerda de uma linha, com o conteúdo fluindo ao seu redor.

Flutuar normalmente é usado para posicionar elementos menores em uma página (Veja o exemplo :first-letter na página sobre Pseudo Elementos), mas também pode ser usada para porções maiores, como colunas de navegação.

Usando o HTML do exemplo acima, você pode aplicar o CSS seguinte:

#navegacao {
  float: left;
  width: 10em;
}

#navegacao2 {
  float: right;
  width: 10em;
}

#conteudo {
  margin: 0 10em;
}

Se você não quer que o póximo elemento envolva os elementos flutuando, você pode aplicar a propriedade clear (limpar). clear: left vai limpar elementos flutuados para a esquerda, clear:right vai limpar elementos flutuados para a direita e clear: both vai limpar elementos flutuados para a esquerda e direita. Então se, por exemplo, você quiser um rodapé na sua página, você pode usar um pedaço de HTML com a id ‘rodape’ e adicionar o CSS seguinte:

#rodape {
	clear: both;
}

E aí está. Um rodapé que vai aparecer debaixo de todas as colunas, independente do tamanho de qualquer uma delas.

Essa foi uma introdução geral sobre posicionamento e flutação, com ênfase nos ‘pedaços’ maiores de uma página, mas lembre-se que esses métodos podem ser aplicados também em qualquer elemento dentro desses pedaços. Com uma combinação de posicionamento, flutuação, margens, paddings (enchimentos) e bordas, você pode representar QUALQUER design web.

Qualquer coisa que puder ser feita com tabelas pode ser feita melhor com CSS. A ÚNICA razão para usar tabelas na construção do layout é se você está tentando acomodar navegadores anciãos, que não suportam CSS.

Para se aprofundar na construção de layouts com CSS, é altamente recomendado que você acompanhe o tutorial “Criando um Layout com CSS a partir do zero“, feito pelo Subcide e traduzido pelo Café com Gelo. E não esqueça de conferir o código-fonte dos exemplos dessa página – é importante!

É aqui que CSS mostra mesmo suas vantagens – ele resulta numa página altamente acessível com apenas uma pequena fração do peso de uma página equivalente baseada em tabelas.

Páginas Relacionadas

Exemplos

Referência

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de CSS: A propriedade Display

20 07 2008

image

Um truque chave na manipulação de elementos HTML é entender que não existe absolutamente nada especial no modo como a maioria deles funciona. A maioria das páginas pode ser feita com apenas algumas tags que podem ser estilizadas do jeito que você quiser. A representação visual padrão do navegador da maioria dos elementos HTML consiste apenas de diversos estilos de fontes, margens, espaçamentos e, principalmente, tipo de exibição (display type).

Os tipos de exibição mais básicos são inline, block-line e none e eles podem ser manipulados com a propriedade CSS display e os valores inline, block e none.

inline significa “na linha” e faz só o que diz – elementos do tipo inline seguem o fluxo de uma linha. Os elementos ênfase forte ( <strong> ), âncora ( <a> ) e ênfase ( <em> ) geralmente são exibidos inline.

block coloca uma quebra de linha antes e depois do elemento. Os elementos cabeçalho ( <h1> até <h6> ) e parágrafo ( <p> ) geralmente são mostrados em blocos. São os chamados “elementos de bloco”.

none, bem, não mostra o elemento. Pode soar meio inútil mas pode ser usado para bons efeitos relacionados à acessibilidade (veja Links Acessíveis), folhas de estilo alternativas ou efeitos avançados de hover ( = mouse sobre o elemento).

A folha de estilos original para o site HTML Dog, por exemplo, manipula alguns elementos tradicionalmente inline e de bloco para se ajustar ao design.

h1 {
  display: inline;
  font-size: 2em;
}

#cabecalho p {
  display: inline;
  font-size: 0.9em;
  padding-left: 2em;
}

O código abaixo é usado em folhas de estilo apenas para impressão e basicamente “desliga” esses elementos, como navegação, que são insignificantes em páginas impressas.

#navegacao, #vejaTambem, #comentarios {
display: none;
}

A diferença entre display: none e visibility:hidden é que display: none retira completamente o elemento da jogada, enquanto visibility: hidden mantém o elemento e o espaço que ele ocupa na página, sem representar visualmente seu conteúdo. Por exemplo, se o segundo parágrafo numa página com três fosse definido como display: none, o terceiro parágrafo ia subir pra perto do primeiro, mas se o segundo parágrafo fosse definido como visibility: hidden, existiria um espaço vazio entre o primeiro e o terceiro, onde o parágrafo ia estar.

Tabelas

Talvez o melhor jeito de entender os valores da propriedade display relacionadas a tabelas é pensar em tabelas HTML. Os valores table, table-row e table-cell imitam os elementos table, tr e td, respectivamente.

A propriedade display vai além, oferecendo os valores table-column (coluna de tabela), table-row-group (grupo de linhas), table-column-group (grupo de colunas), table-header-group (grupo de cabeçalhos da tabela), table-caption (legenda da tabela), todos auto-explicativos. Usar esses valores permite fazer com que qualquer conjunto de elementos HTML seja visualizado como uma tabela. O benefício mais óbvio desses valores é que você pode construir uma tabela através de suas colunas, ao invés do método baseado em linhas do HTML.

Por último, o valor inline-table basicamente faz com que a tabela não tenha quebras de linha antes e depois.

Ficar fascinado por tabelas com CSS pode prejudicar seriamente sua acessibilidade. HTML deve ser usado pra comunicar significado, então se você tem dados tabulares eles devem ser organizados em tabelas HTML. Usar apenas tabelas CSS pode resultar numa mistura de dados completamente ilegível sem CSS. Mal, muito mal.

Outros tipos de exibição

list-item (“item de lista”) é auto explicativo, e é mostrado do jeito que você geralmente espera que um elemento li seja. Pra funcionar direito, elementos com esse tipo de exibição devem ser aninhados em um elemento ul ou ol.

run-in faz com que um elemento seja inline ou de bloco dependendo do tipo de exibição de seu elemento pai. Ele não funciona no IE nem em navegadores baseados no Mozilla. Muito útil, não é?

compact também faz com que um elemento seja inline ou de bloco dependendo do contexto. Também não funciona tão bem…

marker é usado exclusivamente com os pseudo elementos :before e :after pra definir o display do valor da propriedade content. O display padrão para a propriedade content já é marker, então isso só é útil se você estiver sobrescrevendo a propriedade display para um pseudo elemento.

Páginas Relacionadas

Exemplos

Referência

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de CSS

20 07 2008

image

O Tutorial Avançado de CSS é pra quem quer levar CSS ao extremo, explorando métodos que podem não ser imediatamente óbvios para um desenvolvedor intermediário.

Conteúdos

  • A Propriedade Display – Definindo o modo de exibição de um elemento.
  • Layout de Página – Construindo uma página sem tabelas.
  • Regras @ – Importando folhas de estilo, estilos para tipos de mídia diferentes especificando o conjunto de caracteres de uma folha de estilos e incorporando fontes.
  • Pseudo Elementos – Estilizando primeiras letras, primeiras linhas e colocando conteúdo antes e depois de elementos.
  • Especificidade – Como um navegador lida com regras CSS conflitantes.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de HTML: Declarações

7 07 2008

image

Essa página trata de como definir um documento XHTML válido.

Declaração do tipo do documento

Lá no topo de suas páginas você precisa de uma declaração do tipo do documento. Isso mesmo, você precisa.

Sem especificar um doctype (tipo do documento), seu HTML simplesmente não é HTML válido e a maioria dos navegadores vão usar o ‘modo sujo’ pra visualizá-lo, o que quer dizer que eles vão achar que você não sabe que diabos você está fazendo e vão fazer o que eles acharem melhor com o seu código. Você pode ser o maior ninja de HTML que já andou sobre a Terra. Seu HTML pode não ter falha nenhuma e seu CSS pode ser simplesmente perfeito, mas sem uma declaração do documento, ou uma declaração errada, vai parecer que suas páginas foram coladas por um filhote de gibão míope de um olho só com dificuldades de aprendizado.

Essa é a declaração para um documento XHTML 1.0 Strict (XHTML 1.0 Estrito):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

A declaração seguinte é de um documento XHTML 1.1. Ela pode parecer preferível, por ser a última versão do XHTML, mas existem alguns problemas que serão explicados num minuto…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>

Se você simplesmente não consegue deixar o HTML 4 ir embora ou se você tem algum fetiche pelo Netscape 4, você pode usar o XHTML 1.0 Transitional (XHTML 1.0 de Transição):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Você só deve usar esse tipo de documento se você tem uma necessidade incomum de acomodar navegadores mais velhos, raramente usados, ou se você está convertendo pros padrões páginas antigas, feitas usando HTML 4 ou anterior. XHTML 1.0 de transição permite velhos elementos de apresentação do HTML 4, que podem resultar numa apresentação melhor em navegadores como Netscape 4. No entanto, usar esses elementos vai prejudicar a eficiência e possivelmente a acessibilidade de suas páginas web.

Finalmente, se você é um daqueles caras meio loucos que usam frames, a declaração de um documento XHTML 1.0 Frameset é assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Note que a tag DOCTYPE é meio rebelde e exige ser escrita em letras maiúsculas e enfeitada com um ponto de exclamação. Ela também quebra as regras por ser a única tag que não precisa ser fechada.

Declarando Linguagens

Você deve identificar a linguagem principal de um documento através de um cabeçalho HTTP ou com o atributo xml:lang dentro da tag html de abertura. Embora isso não seja necessário para produzir um documento XHTML válido, é uma preocupação com a acessibilidade. O valor é uma abreviação, como ‘en’ (English – Inglês), ‘fr’ (Francês), ‘de’ (Alemão) ou ‘pt-BR’ (Português do Brasil).

A declaração de um documento com conteúdo principalmente em português é assim:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR">

Depois de declarar uma linguagem principal, se você usar outra linguagem no seu conteúdo, você deve usar o atributo xml:lang in-line (como em <span xml:lang="de">HTML Hund</span>).

Tipos de Conteúdo

O típo de mídia e o conjunto de caracteres de um documento HTML também precisam ser especificados, e isso é feito com um cabeçalho HTTP como:


Content-Type: text/html; charset=UTF-8

A primeira parte (nesse exemplo, o pedaço text/html) é o Tipo MIME (MIME Type) do arquivo, e isso faz com que o navegador saiba qual o tipo de mídia de um arquivo e então o que fazer com ele. Todos os arquivos têm algum MIME Type. Uma imagem JPEG é image/jpeg, um arquivo CSS é text/css e o tipo geralmente usado pra HTML é text/html.

A segunda parte do cabeçalho HTTP (no exemplo, o pedaço UTF-8) é o conjunto de caracteres.

Talvez o jeito mais fácil de modificar um cabeçalho HTML (ou imitar um) é usar uma tag meta ‘HTTP-equivalent’ no HTML, que vai ser algo assim:


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Levemente mais complicado, mas preferível (por ser um cabeçalho HTTP propriamente dito e ainda reduzir o HTML), é enviar o cabeçalho usando uma linguagem de programação no lado do servidor (server side). Com PHP, você poderia usar algo assim:

<?php header("Content-Type: text/html; charset= UTF-8"); ?>

Se você não quer ou não pode usar uma linguagem, você possivelmente pode ir direto pro servidor com um arquivo ‘.htaccess’. A maioria dos servidores (compatíveis com Apache) pode ter um pequeno arquivo de texto com o nome ‘.htaccess’ no diretório raíz, e com a seguinte linha nele você pode associar todo arquivo com extensão ‘.html’ com um MIME type e um conjunto de caracteres:


AddType text/html;charset=UTF-8 html

No entanto, nem todas as hospedagens permitem que você altere as configurações do servidor com um arquivo como esse.

Conjuntos de caracteres incluem ‘ISO-8859-1’ para muitas linguagem ocidentais, baseadas no Latim, que não usem caracteres especiais como ‘ç’ ou ‘ã’; ‘SHIFT_JIS’ para Japonês; ‘UTF-8’, uma versão do Formato de Transformação Unicode (Unicode Transformation Format), que fornece um grande número de caracteres usados na maioria das linguagens, entre outros. Basicamente, você deve usar um conjunto de caracteres que você sabe que vai ser reconhecido por sua audiência. A menos que você esteja usando uma linguagem baseada no Latim que não use acentos, como o Inglês, onde ISO-8859-1 pode ser usado e é praticamente universalmente compreendido, você deve usar UTF-8 porque ele pode mostrar a maioria dos caracteres da maioria das linguagem e é o código mais seguro de se usar porque vai funcionar no computador da grande maioria das pessoas.

Você pode ler mais sobre conjuntos de caracteres em outros lugares pela web.

XHTML deve ser enviado com o MIME type application/xhtml+xml. Isso é o que ele é – uma aplicação XML. Infelizmente, a maioria dos navegadores não tem idéia do que é isso. Então é geralmente aceito que não faz mal usar o MIME type text/html. De acordo com o W3C, e depois reforçado pelo Web Standards Project (Projeto Padrões Web), alguns sabores de XHTML 1.0 podem ser enviados com o tipo text/html, mas XHTML 1.1 não deve, e é por isso que os exemplos no site usam XHTML 1.0 Strict, assumindo um MIME Type text/html. Mas você pode (e talvez até deva) enviar o tipo correto para os navegadores que o aceitam com um pouco de “trapaça” no servidor.

Esse site usa PHP para enviar XHTML 1.1 com um MIME Type application/xhtml+xml para os navegadores que entendem e renderizam esse tipo (como o Mozilla) e XHTML 1.0 Strict com o tipo text/html para outros navegadores (como o IE). O script, colocado no topo de cada página parece com isso:


<?php
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
header("Content-Type: application/xhtml+xml; charset=UTF-8");
echo('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">');
} else {
header("Content-Type: text/html; charset=UTF-8");
echo ('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
}
?>

Se você não conhece PHP, não se preocupe com o código acima. Ele checa se o o navegador aceita o MIME Type application/xhtml+xml e, se sim, esse tipo é enviado e o tipo de documento XHTML 1.1 é escrito no HTML. Se o MIME Type não é reconhecido então o tipo text/html é enviado e o tipo de documento XHTML 1.0 Strict é escrito no HTML.

Além da paz de espírito que você vai sentir por saber que está fazendo a coisa certa e se preparando para o futuro, o benefício imediato de usar esse método é que Mozilla vai tratar seus arquivos como aplicações XML e simplesmente não vai funcionar se seu XHTML não estiver de acordo com o padrão, por exemplo, se não estiver bem formado. Você vai poder testar sua aplicação sem ter que passar o documento por um validador.

Páginas Relacionadas

Referência