10 Dicas de CSS, parte 2, por Rodrigo Freitas

Olá galera!
Como havia prometido e como todos esperavam, estou escrevendo a segunda parte dessa matéria e aqui finalizarei as 10 dicas de CSS. Começando pela sexta dica, vamos caminhando.

6. Desaparecendo textos ou imagens no IE?

O IE tem um bug estremamente estranho que é o de textos e imagens as vezes desaparecem das nossas vistas. Os itens continuam presentes e se você selecionar tudo na tela ou atualizar a página, eles sempre aparecem. Um pouco estranho, não?!

Este problema quase sempre acontece com imagens de fundo e com a posição do texto perto do elemento texto. Para resolver este problema, insira simplesmente a posição relative no comando CSS que esta desaparecendo e por algumas razões bizarras, isso resolve o problema. Se isto não resolver (e as vezes nã resolve), coloque um tamanho no outro elemento do CSS (o que faz sumir o texto) -- isso deve resolver o problema.

7. Texto invisível

As vezes, você pode querer fazer um texto ficar invisível. Um texto invisível pode ser extremamente útil para usuários de leitores de tela, talvez para atribuir um rótulo para um item do formulário ou inserir um título antes de uma seção. "Não preciso mudar a aparência visual inserindo esses elementos?" Tornando eles invisíveis, ninguém que utilize um browser comum saberá que eles estão lá.

Você pode também querer torná-los invisiveis se você utilizar um arquivo CSS de impressão ou de dispositivos móveis, algumas informações não precisam ser mostradas em uma ou em outra (veremos mais sobre isso).

Para tornar o texto invisível, você pode usar

display: none

Fácil!

Ele funciona para esconder textos de dispositos móveis (se tiver suporte a CSS) e impressões de páginas web, mas ele não é tão maravilhoso para muitos dos leitores de tela. Os leitores da tela estão tornando-se agora demasiadamente inteligentes para seu próprio bem, e alguns vão ignorar qualquer texto que tiver um comando display: none designado para ele.

Entretanto para os usuários de leitores de tela um novo comando é necessário:

width: .1em;
height: .1em;
overflow: hidden;
position: absolute;

Esses comandos tornam o texto invisível e é totalmente aceito pelo W3C para esconder textos e assim o leitor de tela consegue "ler" o conteúdo dentro dessa tag.

8. Documento CSS para dispositivos móveis

Um documento CSS pode ser criado para PDAs e celulares e ser ativado só quando um dos dispositivos estiver sendo usado para acessar seu site. Mais e mais sites estão criando CSS para impressão, assim os sites automaticamente se tornam melhores para impressões quando os usuários mandam imprimir as páginas. Você pode fazer a mesma coisa para dispositivos móveis.

O comando a seguir é usado para chamar um CSS para dispositivos móveis:

O comando CSS dentro desse arquivo sobrescreverá qualquer comando equivalente dentro do CSS principal. Mas quais os comandos que você colocará dentro dele?

Primeiro, você gostaria que os dispositivos móveis não tivessem problema com a barra de rolagem horizontal.

Para testar isso, abra o seu site em um browser normal e ponha a janela do browser com 150px de largura. Então, ponha seu CSS principal e insira novos comandos nele até o final. Os comandos que você colocará irão ajustar o layout do seu site e aí você fará com que o seu site não gere barra de rolagem com o tamanho de 150px. Depois abra um novo documento CSS, copie os comandos e cole no novo documento e salve o arquivo com o nome que você quiser (no exemplo foi usado o nome handheldstyle.css).

Seus sites oferecerão para os usuários de dispositivos móveis um algo amais que os sites tradicionais geralmente oferecem e oso usuários dos dispositivos móveis será um pouco diferente dos usuários dos browsers tradicionais.

Para maiores informações, um livro chamado Handheld Usability, by S.W. Weiss é uma boa leitura.

9.Efeito 3D em botão

Voltando ao passado da web, onde naquele tempo os botões 3D com efeito de rollover só podiam ser feitos através de imagens e JavaScript, mas agora, com o advento do CSS podemos voltar ao tempo e recriar esse efeito 3D.

Os comandos CSS que você irá precisar são:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Com exceção desses comandos, você poderá inserir outros comandos e conseguir o efeito desejado da apresentação -- o único limite é sua imaginação!

10. Mesmo código de navegação em cada página

A maioria dos websites possuem um item de navegação destacado relativo a cada local do usuário no website para ajudar os usuários a se orientarem por si mesmos. Este é um quesito fundamental de usabilidade básica, mas pode ser um problema: nós precisamos ajustar o código HTML atrás da navegação para cada página. podemos ter o melhor dos dois mundos? É possível ter uma navegação destacada em cada página do site, se ter que fazer pequenos ajustes no código HTML em cada página? Claro que sim!

Primeiro de tudo, você precisa designar uma classe para cada item de navegação:

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

Você precisará inserir um id dentro da tag <body>. O id deve ser a representação de onde os usuários estão localizados no site e devem mudar de acordo com o deslocamento do usuário nas diferentes seções. Quando estiver na "Home", ele lerá <body id="home">, no "About us", deve-se ler <body id="about">.

Agora você irá criar uma nova regra de CSS:

#home .home, #about .about, #about .about, #contact .contact
{
os comandos da navegação destacada entram aqui
}

Aqui basicamente criamos uma regra que só terá efeito quando a classe "home" estiver contido com o id "home", e quando a classe "about" estiver com o id "about". Essa situação só acontecerá quando o usuário estiver na seção apropriada do site, criando assim o nosso item de navegação destacado.

Bem, com isso eu finalizo as 10 dicas de CSS, espero que tenha ajudado vocês de alguma forma. Qualquer dúvida responderei com prazer.