segunda-feira, 24 de janeiro de 2011

Servindo HTML & XHTML

Este artigo descreve de maneira sumária alguns aspectos de como os servidores enviam o XHTML para os agentes de usuário (p. ex.: um navegador), bem como a maneira como estes agentes processam a marcação recebida. Trata-se de uma descrição de itens específicos e não de uma norma do W3C.

Os tópicos desse artigo se inspiram na FAQ como declarar codificação de caracteres em um documento HTML ou XHTML. As informações aqui contidas esclarecem também o porquê de certos aspectos da estilização via CSS não surtirem o efeito planejado, ou mesmo sofrer variações de um agente de usuário para outro.

Tipos de MIME


Quando o servidor envia um documento para o navegador, envia também informações adicionais com o documento denominadas de Cabeçalho HTTP.

O campo Content-Type do cabeçalho HTTP descreve o tipo de dado que está sendo enviado. Essa informação é passada em um rótulo definindo o tipo de MIME da mídia. Observe a seguir um cabeçalho HTTP para um arquivo HTML usando o tipo de MIME text/html. Notar que o campo Content-Type pode, também, expressar a codificação de caracteres do documento.

HTTP/1.1 200 OK
Date: Wed, 05 Nov 2003 10:46:04 GMT
Server: Apache/1.3.28 (Unix) PHP/4.2.3
Content-Location: CSS2-REC.en.html
Vary: negotiate,accept-language,accept-charset
TCN: choice
P3P: policyref=http://www.w3.org/2001/05/P3P/p3p.xml
Cache-Control: max-age=21600
Expires: Wed, 05 Nov 2003 16:46:04 GMT
Last-Modified: Tue, 12 May 1998 22:18:49 GMT
ETag: "3558cac9;36f99e2b"
Accept-Ranges: bytes
Content-Length: 10734
Connection: close
Content-Type: text/html; charset=utf-8
Content-Language: en

O tipo de MIME text/html é a escolha natural para documentos HTML. Quando um navegador recebe um arquivo com esse tipo de MIME assume que a marcação segue a sintaxe HTML e usa um parser HTML para interpretar a marcação.

Ao contrário da HTML a XHTML é uma linguagem de marcação baseada na XML. A sintaxe XML é diferente da sintaxe HTML e os processadores XML são bem mais rigorosos no tratamento de erros de marcação. Conteúdos desenvolvidos em conformidade com a XML devem ser bem formados e válidos além de estarem perfeitamente integrados aos mecanismos de leitura das ferramentas de processamento, de transporte de dados e automação existentes no mundo da XML. Muitos desenvolvedores preferem usar XHTML em função do rigor que a XML impõe à edição e processamento dos documentos.

Para servir marcação XHTML, ao navegador, como XML você deve usar um dos seguintes tipos de MIME: application/xhtml+xml, application/xml ou text/xml. O W3C recomenda que para servir XHTML como XML se use o primeiro dos tipos de MIME citados, ou seja, application/xhtml+xml.

O navegador lê XML usando um parser XML e não um parser HTML.

Infelizmente o navegador Internet Explorer nas suas versões 8 e anteriores não suportam arquivos servidos como XML, embora muitos outros navegadores suportem. Para contornar o problema de suporte à XML pelos navegadores a maioria dos arquivos são servidos com uso do tipo de MIME text/html. Nesses casos o agente de usuário trata os arquivos como se fossem HTML e usam um parser HTML.

Se o navegador tratar XML como HTML você deve estar atento às difereças de formato entre as duas marcações quando escrever XHTML para assegurar-se de que as diferenças entre a sintaxe XML e HTML não confundam o navegador. Essa atenção deve estar voltada também para as diferentes maneiras de codificação de caracteres e declaração de idioma no documento.

O Apêndice C da especificação para a XHTML recomenda algumas diretrizes de compatibilidade para servir XHTML como HTML. Elas são particularmente importantes para versões antigas de navegadores. Aquelas diretrizes recomendam, entre outras coisas, que se deixe um espaço em branco antes de '/>' no final de uma tag de fechamento (tais como, img, hr ou br), que se use tanto a o atributo lang da HTML como o atributo xml:lang da XML, que se use os atributos id e name para fragmentos identificadorees (âncoras), etc.


Modo 'Standards' versus modo 'Quirks'

Os navegadores atuais estão aptos a apresentar um arquivo HTML tanto no modo standards com no modo quirks. Isso significa que diferentes regras são aplicadas para apresentar um documento, umas para comportamento segundo as recomendações do W3C e outras para comportamentos não standards para versões antigas de navegadores.

Nas versões mais recentes da maioria dos navegadores o modo standards é acionado pela presença da declaração do DOCTYPE. A ausência de um DOCTYPE pode resultar em diferentes renderizações de um navegador para outro.

As imagens a seguir mostram tais diferenças de renderização

Documento renderizado em modo standards.
Imagem da renderização de um arquivo em modo standards.

O mesmo documento renderizado em modo quirks.
Imagem da renderização do mesmo arquivo em modo quirks.

Clique as imagens para abrir a página HTML correspondente. Se você abrir as páginas no Internet Explorer vai constatar as diferenças mostradas nas imagens.


As duas imagens mostram a renderização de duas páginas com marcação HTML e estilização CSS exatamente iguais. A única diferença entre elas que a página mostrada na figura à esquerda tem no início da sua marcação uma declaração DOCTYPE e a da direita não tem a declaração. Um arquivo marcado com uma declaração de DOCTYPE apropriada normalmente é renderizado em modo standards pela maioria dos navegadores mais recentes. A falta de um DOCTYPE na marcação causa renderização em modo quirks.

As diferenças visuais mostradas nas imagens resultam na adoção de critérios em desacordo com os Padrões Web para implementações de renderização em diferentes navegadores, tais como o Internet Explorer:

  • Em modo quirks a largura definida por regra CSS para o div não considera quaisquer acréscimos de larguras definidas para padding e border e em modo standards essas larguras são somadas – essa é a razão porque o box mostrado na figura à esquerda (modo standars) e mais largo.

  • Em modo quirks a tabela não herda a definição CSS de font size para o elemento body - essa é a razão porque o texto tem fonte maior nesse modo.

A finalidade original do DOCTYPE é fornecer informações sobre a linguagem de marcação do documento. Observe a seguir um exemplo mostrando a declaração de DOCTYPE no início da marcação (destaque com borda na cor vermelha ).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>XHTML document</title> 
    <style type="text/css">
    body { background: white; color: black; font-family: arial, sans-serif; font-size: 12px; }
    p { font-size: 100%; }
    h1 { font-size: 16px; }
    div { margin: 20px; width: 170px; padding: 50px; border: 6px solid teal; }
    table { border: 1px solid teal; }
    </style> 
    </head> 

<body> 
    <h1>Test file for Standards/Quirks</h1> 
    <div>
        A div with CSS width:170px, margin:20px, padding:50px and border:6px.
        </div> 
    <p>Text in a p element.</p>
    <table> 
        <tr><td>Text in a table.</td></tr> 
        </table>
    </body> 
</html> 

Diz-se que navegadores que se comportam de maneira diferente de acordo com o modo processam o chaveamento do DOCTYPE .

A princípio é uma boa ideia servir suas páginas web em modo standards, isto é, declare sempre um DOCTYPE.

Os DOCTYPEs e a declaração XML

Um aspecto relacionado ao uso de DOCTYPEs tem importância decisiva na declaração de caracteres e na correta aplicação de estilos.

Pelo fato que XHTML 1.0 é baseada em XML é possível inserir no início da marcação uma declaração XML ainda que o documento seja servido como HTML. Observe a inserção dessa declaração na marcação mostrada anteriormente (a declaração XML foi destacada em itálico e na cor vermelha.):

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xml‎ns="http://www.w3.org/1999/xhtml">
<head>
...

Em navegadores como os Internet Explorer 7, Firefox, Safari, Opera, Google Chrome e outros a presença ou não da declaração XML em uma marcação contendo um DOCTYPE causa a renderização em modo stanrd.

Contudo, no Internet Explorer 6 qualquer marcação, exceto byte-order mark, inserida antes do DOCTYPE causa a renderização em modo quirks.

O Internet Explorer 6 ainda é muito usado é isso pode ser um problema. Se você quer se assegurar que suas páginas são renderizadas consistentemente nos demais navegadores standards você precisa saber lidar com isso.

É óbvio que se o seu documento foi criado com marcação que não é afetada pelas diferenças de renderização entre os modos standards e quirks isso não é um problema. Mas, se por outro lado a marcação pode causar renderizção inconsistente você precisa lançar mão de artifícios CSS para acabar com as diferenças ou então omitir a declaração XML.

Lembre-se que ao omitir a declaração XML você deverá optar por uma codificação de caracteres em UTF-8 ou UTF-16 para sua página. (Ver Declaração de codificação de caracteres em HTML para esclarecimentos sobre as consequências da declaração de caracteres.)


Fonte: W3C

Nenhum comentário:

Postar um comentário