Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

C18: Utilizar as regras de preenchimento e margem CSS, em vez de imagens separadoras para o design da disposição da página

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

Na plataforma do Microsoft Windows, o Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6.0 em "modo quirks" e o Internet Explorer 7 em "modo quirks" utilizam um modelo de caixa diferente da especificação W3C CSS: nestas versões de browsers, o preenchimento à esquerda e à direita, e as margens direita e esquerda não aumentam a largura total de um elemento, por isso o espaço para o conteúdo dentro desse elemento será mais estreito. (Este comportamento é conhecido por "bug do modelo de caixa".) O Internet Explorer 5.5 no SO Mac, e o Internet Explorer 6 e 7 no Windows, no "modo de acordo com as normas", utilizam o modelo de caixa definido na especificação W3C CSS.

Descrição

Por vezes, os programadores da Web utilizam imagens separadoras (normalmente GIFs transparentes com 1x1 pixel) para controlarem melhor a disposição, por exemplo, em tabelas ou para avançar um parágrafo. Contudo, as Folhas de Estilo em Cascata (CSS) permitem um controlo suficiente da disposição para substituir as imagens separadoras. As propriedades de preenchimento e margem CSS podem ser utilizadas isoladamente ou em combinação para controlar a disposição. As propriedades de margem ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' e 'margin' abreviada) podem ser utilizadas em qualquer elemento apresentado como um bloco; estas propriedades adicionam espaços fora do elemento. As propriedades de preenchimento ('padding-top', 'padding-right', 'padding-bottom', 'padding-left' e 'padding' abreviado) podem ser utilizadas em qualquer elemento; adicionam espaços dentro do elemento.

Exemplos

Exemplo 1

O exemplo seguinte consiste em duas partes: o código CSS, que especifica uma margem em todos os lados da tabela e o preenchimento para as células da tabela; e o código HTML para a tabela, que não contém imagens separadoras e não está encaixado noutra tabela.

Código Exemplo:

                           
              table { margin: .5em; border-collapse: collapse; } 
              td, th { padding: .4em; border: 1px solid #000; }
            
            ...
            
              <table summary="Titles, authors and publication dates of books in Web development category">
                <caption>Books in the category 'Web development'</caption>
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>How to Think Straight About Web Standards</td>
                    <td>Andrew Stanovich</td>
                    <td>1 April 2007</td>
                  </tr>
                </tbody>
              </table> 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Não existem testes disponíveis para esta técnica.