Banner propaganda da DevMedia - Cursos de desenvolvimento web

Autor: Dave Shea
URL do original: http://www.mezzoblue.com/css/cribsheet/
Título original: CSS Crib Shett
Data da publicação: 25 de novembro de 2003
Traduzido com autorização do autor

Dicas para desenvolver CSS

Publicado em: 20/11/2004

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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo