Dicas para desenvolver CSS

Introdução

Certamente você deve ter-se deparado com várias questões e detalhes ao criar um layout baseado em CSS. E por vezes, até teve vontade de bater a cabeça contra a parede durante o processo de busca de soluções para os problemas surgidos. Esta matéria visa a oferecer umas dicas para tornar o processo mais fácil e é uma referência rápida para checagem do seu trabalho quando aparecerem problemas.

Se você tiver uma colaboração, sinta-se a vontade para comentários neste link.

Traduções estão disponíveis em [ Français ] [ Deutsch] [ Español] [ Italiano] [ Magyar] [ Finnish] [ Norwegian] [ Russian] [ Japanese ] [ Simplified Chinese] Fique a vontade para fazer traduções para outras línguas.

Se tiver dúvida, valide .

Ao proceder o "debug", você será poupado de muita dor de cabeça simplesmente validadando seu código. XHTML/CSS impropriamente escrito causará a ruína do seu layout.

Construa e teste seu CSS no browser mais avançado disponível antes de testar em outro, não depois.

Se você construir e testar em um browser "quebrado" (não conforme as Web Standards) seu código estará voltado para o modo quebrado de renderização daquele browser. Quando for testá-lo em um browser padrão (em conformidade com as Web Standards) , você se frustrará com uma renderização imprópria. Assim, comece com o perfeito e então insira seus "hacks" para servir browsers "quebrados". Seu código será conforme as Web Standards desde o início e você não precisará de uma quantidade muito grande de "hacks" para ajustar-se aos browsers não conformes. Atualmente são browsers conformes os Mozilla, Safari, e Opera.

Certifique-se de que o efeito desejado realmente existe.

Existem extensões CSS específicas para determinados browsers que não fazem parte das especificações oficiais. Ao aplicar filtros ou formatar a barra de rolagem, você estará se utilizando de codificações proprietárias que só funcionam no Internet Explorer. Se o validador lhe disser que o código é indefinido, é muito provável que você tenha utilizado extensões proprietárias que não funcionam em browsers padrão.

Ao utilizar floats para layouts, certifique-se de associá-los convenientemente com a propriedade clear.

Floats são complicados, e nem sempre se comportam como você espera. Se um float se estende além das bordas do elemento que o contém ou mesmo não se comporta como você espera, certifique-se de que o que está pretendendo é possível. Confira um tutorial de Eric Meyer's a respeito.

Para evitar sobreposição de margens aplique padding ou border.

Você precisa "jogar" com a existência de espaços extra em branco onde você não os quer, ou a inexistência deles onde você os quer. Se você estiver usando margens, a sobreposição das margens provavelmente será a responsável. Andy Budd explica como "jogar".

Tente evitar a aplicação de padding/borders e uma largura fixa a um elemento.

IE5 interpreta o box model erroneamente, trazendo uma confusão generalizada. Existem maneiras de contornar, mas o melhor é a técnica de aplicar um padding ao elemento pai em lugar de aplicá-lo ao elemento filho que tenha uma largura fixa.

Evite o "flash" do conteúdo sem estilos que aparece ao carregar a página no IE.

Se você usou @import para uma folha de estilos externa, cedo ou tarde você saberá que o IE ao carregar a página provoca um "flash" do conteúdo HTML sem formatação antes de a CSS ser aplicada à página. Isto pode ser evitado .

Não conte com min-width para o IE.

IE não oferece suporte para esta propriedade. Ele considera width como min-width, no entanto, com utilização de filtros CSS para o IE você poderá simular esta propriedade.

Na dúvida, diminua a largura.

As vezes erros de arredondamento acabam por produzir algo como 50% + 50% igual a 100.1%, o que acaba arruinando um layout em determinados browsers. Experimente adotar 49% no lugar de 50% ou mesmo 49.9%.

Conteúdo mostrado impropriamente no IE?

Você poderá estar face ao bug Peekaboo, principalmente se a falha ocorre no evento mouse over. Ver Position is Everything para a correção.

Cuidado ao estilizar links quando estiver usando âncoras.

Se você usar âncoras no seu código (<a name="anchor">) observará que elas assumem as estilizações das pseudo classes :hover e :active. Para evitar isto use id para as âncoras, ou estilize com sintaxe mais específica :link:hover, :link:active

Lembre-se do processo mnemônico “LoVe/HAte” para links.

Ao estilizar pseudo classes para links siga esta ordem: Link, Visited, Hover, Active. Qualquer outra ordem adotada não funcionará consistentemente. Se usar :focus altere a ordem para LVHFA (ou “Lord Vader's Handle Formerly Anakin”, como sugerido por Matt Haughey)

Lembre-se do processo mnemônico “TRouBLEd” para bordas.

Borders, margins e padding admitem declaração abreviada em uma ordem pré estabelecida, no sentido horário a partir do topo ou seja: Top, Right, Bottom, Left. Assim margin: 0 1px 3px 5px; significa 0 (zero) para margem no topo, 1px para margem direita, 3px para margem inferior e 5px para margem esquerda.

Nota do tradutor:
Processo mnemônico: Artifício para lembrar algo, que consiste em decorar uma frase curta ou palavra associada ao que se quer lembrar. No caso presente a frase (em inglês) LoVe/HAte ressalta as letras L-V-H-A iniciais da ordem dos links. De maneira semelhante a palavra TRouBLEd ressalta a ordem das margens, bordas e paddings.
Use o processo indicado ou invente um para si.

Declare unidades para valores diferentes de zero.

CSS requer especificar as unidades em todas as quantidades, tais como fonts, margins e tamanhos. (A única exceção é line-height, que não requer uma unidade.) O comportamento particular de um determinado browser quando uma unidade não for especificada, não deve ser considerado. Zero é zero, seja para px, em, ou qualquer outra coisa. Não há necessidade de especificar a unidade. Exemplo: padding: 0 2px 0 1em;

Teste diferentes tamanhos de font.

Browsers avançados como Mozilla e Opera permitem que você redimensione os textos independentemente das unidades usadas. Alguns usuários utilizarão tamanhos default maiores e outros menores dos que você utiliza; tente acomodar seu layout para a maior faixa possível de tamanhos.

Utilize grafia igual no seu HTML e CSS.

Alguns browsers são case-sensitives (sensíveis ao tamanho da letra). Usar uma classe chamada 'homePage' é consistente. Aplicar estilo a 'homepage' causará problemas em agentes de usuários que renderizam em modo strict (como o Mozilla por exemplo).

Faça seus testes com CSS incorporada e ao concluir use importada.

Se você usar folhas de estilo incorporadas ao seu documento HTML, estará eliminando potenciais erros provenientes de "caching" durante os testes. Isto é muito importante quando utiliza-se certos browsers para Mac. Ao terminar seu projeto retire a CSS incorporada e passe-a para um arquivo externo a ser importado com @import ou <link> para seu documento.

Utilize bordas para debugar layouts.

Uma regra CSS geral tal como div {border: solid 1px #f00;} pode ser uma poderosa aliada para apontar um problema em layout. Adicionando uma borda a elementos específicos pode ajudar a identificar uma sobreposição ou fazer "aparecer" um espaço extra em branco não requerido e não identificável sem uso das bordas.

Não use aspas simples para caminhos (paths) para imagens.

Ao definir uma imagem de fundo não use aspas no caminho. Elas não são necessárias e IE/Mac não as suporta.

Não crie links para folhas de estilo vazias a título de ‘placeholders’ (p.ex. handheld ou print ).

IE5/Mac não suporta folhas de estilo vazias e como consequência o tempo de carregamento da página aumenta. Coloque pelo menos uma regra de estilo (ou até mesmo um comentário) na folha de estilo para atender ao IE/Mac.

E a seguir alguns itens que embora não se apliquem ao aspecto funcional das coisas devem ser considerados pelos desenvolvedores:

Organize seu arquivo CSS

Escreva comentários esclarecendo blocos de código CSS. Agrupe seletores semelhantes e estabeleça uma clara separação e nomeação entre eles, use espaços em branco para formatar seu código (recomendação: use espaço simples por compatibilidades com diferentes plataformas).

Nomeie classes/IDs de acordo com sua função e não sua aparência.

Se você criar a classe .pequenaazul, e futuramente for solicitado a alterar os textos da classe para grande e vermelha o nome da classe que você adotou não mais fará qualquer sentido. Use nomes descritivos tais como .dirautorais e .creditos.

Use filtros CSS como último recurso.

Hacks e filtros fornecem um meio de aplicar ou não aplicar CSS seletivamente aos diversos elementos do código. O uso indiscriminado deles soa como "remendos" no código e não é aconselhado, procure encontrar uma maneira padrão para conseguir o efeito que você pretende. Contudo, eles podem ser o último recurso e a verdadeira salvação. E aqui uma lista de filtros CSS.

Combine os selectores.

Uma CSS leve é importante para minimizar tempo de descarga da página; tanto quanto possível agrupe os seletores, tire partido da herança CSS , e reduza redundâncias fazendo uso de declarações simplificadas.

Considere a acessibilidade quando usar técnicas de troca de imagens

A clássica técnica FIR para troca de imagens tem causado problemas para leitores de tela e para aqueles que desabilitam as imagens. Alternativas exisem; use-as moderadamente.

Compartilhe essa matéria com seus amigos