10 Dicas de CSS, parte 1, por Rodrigo Freitas

Olá galera!
Este é o meu primeiro artigo aqui no PLUGMASTERS e pensei em colocar algumas dicas de CSS que podem ajudar e muito.

Irei dividir essa 10 dicas em 2 artigos para não ficar algo muito cansativo de se ler. Espero que gostem e aproveitem!

CSS pode ser complexo e a cada versão de browser que é atualizado, você tem que achar uma melhor maneira para se aualizar com os últimos hacks. Mas são essas dicas e hacks que te ajudam sempre! Aqui eu coloquei as 10 dicas que eu acho que serão bem úteis que salvarão vocês quando o tempo de projeto for "para ontem".

1. Elementos Block vs. Inline

De todos os elementos HTML, os que se aproximam muito são os elementos block e inline. As características dos blocos incluem:Sempre começar em uma nova linha;

Height, line-heigth e top e bottom margins podem ser manipuladas;
Tamanho default de 100% do conteúdo do elemento, a não ser que seja especificado um tamanho.

Exemplos onde o elemento block pode ser incluido: <div>, <p>, <h1>, <form>, <ul> e <li>.

As caraterísticas do elemento inline, por outro lado, é o oposto do elemento block:

Começa na mesma linha;
Height, line-heigth e top e bottom margins não podem ser mudadas;
O tamanho é o tamanho que for o texto/imagem e não pode ser manipulada;

Exemplos onde o elemento inline pode ser incluido: <span>, <a>, <label>, <input>, <img>, <strong> e <em>.

Para mudar a característica de um elemento, você pode usar "display:inline" ou "display:block". Mas qual é o ponto de se mudar um elemento para block ou inline ou vice-versa? Bom, pimeiro vê-se que você precisa realmente usar essa dica, mas em fato essa é uma poderosa técnica, que você pode usar sempre que quiser:

Quando você quiser mudar de linha usando inline;
Quando você quiser que um elemento block fique na mesma linha;
Controlar o tamanho de um elemento inline (particularmente útil para links na navegação, criar botões);
Manipular altura em um elemento inline;
Colocar cor no fundo pegando só o tamanho do texto no elemento block, sem precisar especificar um tamanho.

2. Outro Hack para Box Model

O hack para box é usado para fixar um problema no IE 6 e anteriores, onde o border e padding são somados ao tamanho do box que criamos aumentando assim o tamanho dele. Existem várias alternativas para remediar esse problema e aqui vai mais uma:

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

O primeiro width é lido por todos os browsers; o segundo é lido por todos, exceto o IE5.x. Porque o segundo comando vem em segundo? Ele prevalece o primeiro comando, ou seja, qualquer comando que venha em segundo sempre prevalece o primeiro. Então como os dois funcionam?
Porque colocamos as tags vazias de comentários (/**/) antes dos dois pontos, nós instruimos ao IE 5.0 a ignorar esse comando, do mesmo modo, se nós colocássemos as tags vazias de comentários depois dos dois pontos, IE 5.5 irá ignorar o comando. Usando estas duas regras conjuntamente, nós poderemos esconder o comando para todos os IE5.x

3. Tamanho mínimo para uma página

Um comando CSS que existe e ajuda muito é o min-width, por meio de que você pode especificar uma largura mínima para qualquer elemento. Ele pode ser particularmente útil para espeificar um mínimo de tamanho para página. Infelizmente o IE não entende esse comando, então nós necessitaremos nos adiantar com uma maneira nova de fazer esta funcionalidade realmente funcionar nesse browser. Primeiro inseriremos a <div> embaixo da tag <body>, para que nós assinalemos um tamanho mínimo para o <body>:

Agora, criaremos o nosso comando CSS, para criar um tamanho mínimo de 600px:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

O primeiro comando é o comando regular para tamanho mínimo; o segundo é um pequeno comando javascript que só o IE entende. Você pode querer combinar o tamanho mínimo com tamanho máximo:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

4. IE e sobre larguras e tamanhos

O IE tem uma maneira estranha de fazer as coisas. Ele não entende os comandos min-width e min-height, mas interpreta width e height como min-width e min-height -- vai entender!
Isto pode causar problemas, porque nós poderemos precisar de boxes que sejam ajustáveis, talvez precisemos colocar mais textos denro dele ou talvez o usuário mude o tamanho do texto. Se nós usarmos só os comandos de tamanho e largura na box, os outros browsers sem ser o IE fixarão tamanho e largura. Se nós usarmos apenas os comandos min-width e min-height, não conseguiremos controlar tamanho e largura no IE!

Isto pode ser especialmente problemático quando se usa imagem de fundo. Se você estiver usando imagem de fundo que tenha 80px de largura e 35px de altura, você precisará ter certeza que o tamanhão padrão para o box que estará usando essa imagem de fundo seja exatamente 80px x 35px. Entretanto, se os usuários alterarem o tamanho do texto, o box terá que se expandir com harmonia.

Para resolver este problema, você pode usar o código abaixo para o box com a classe "box":

.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

Todos os browsers irão ler pela primeira regra do CSS, mas o IE irá ignorar a segunda regra porque usa o comando do seletor-filho. Os outros browsers sem ser IE irão ler o segundo comando, o que sobescreverá os valores da primeira regra, porque esta regra do CSS é mais específica, e as regras do CSS que são mais específicas sobrescreve as que são menos específicas.

5. O comando text-transform

Pouco se conhece, mas tem um comando muito útil do CSS que é o text-transform. Os três valores mais comum para essa regra é:

Text-transform: uppercase;
Text-transform: lowercase;
Text-transform: capitalize.

A primeira regra transforma todos os caracteres em maiúsculas, o segundo transforma todos os caracteres em minúsculas e a terceira transforma todo primeiro caractere de cada palavra em maiúscula.

Este comando é incrivelmente útil para manter a consistência do estilo para todo o website, particularmente se existem muitos editores para a página. Digamos por exemplo que a sua folha de estilo diz que cada palavra que for "heading" tenha sempre que começar com maiúscula. Para garantir que isso realmente aconteça, independente de como os editores irão escrever, use o text-transform: capitalize.

No artigo seguinte, irei mostrar as outras 5 dicas de CSS, até mais!