Guia completo sobre CSS: do nascimento aos problemas e soluções
1. CSS – Organizado e simples
Cercomp – Equipe Web
Nícolas Lazarte - nicolaslazartekaqui@gmail.com
2. CSS – O nascimento
Surge o HTML para troca de informações científicas;
O HTML difunde-se entre grupos de não cientistas;
Os documentos web assumem um caráter geral;
As necessidades de "incrementar" visualmente os
documentos;
O aparecimento de novas tags e atributos;
O uso de tabelas;
O "caos";
O nascimento das CSS.
Mauricio Samy Silva - http://maujor.com/palestras/visaocss/visaocss.html
3. CSS – Apresentação
Cascading Style Sheets (ou simplesmente CSS) é
uma linguagem de estilo utilizada para definir a
apresentação de documentos escritos em uma
linguagem de marcação, como HTML ou XML.
4. CSS – Vantagens
Realiza a separação entre o formato e o conteúdo de
um documento.
Controle da apresentação a partir de um único
arquivo.
Redução do tempo de carga do documento.
Simplificação do trabalho de manutenção.
Amigável aos softwares de busca e indexação.
Facilitação ao cumprimento dos itens de
acessibilidade.
E, muito mais...
5. CSS – Desvantagens
Grande incompatibilidade com alguns navegadores.
Os navegadores tem estilo de exibição diferenciado
entre eles, alguns mais elegantes outros mais
rústicos.
6. CSS – Padrões
Não existe uma maneira padrão de desenvolver uma
folha de estilo para uma documento.
A W3C criou uma padrão de desenvolvimento de
documentos denominado XHTML.
7. XHTML – eXtensible Hypertext Markup Language
O XHTML é uma reformulação da linguagem de
marcação HTML, baseada em XML.
Combina as tags de marcação HTML com regras da
XML.
Sua intenção é melhorar a acessibilidade.
Ou seja, determina que no documento HTML a
estilização das tags sejá feita toda atráves de folhas
de estilo, pondo em desuso os parametros de estilo
de algumas tags.
O HTML5 já segue esse padrão.
8. XHTML – eXtensible Hypertext Markup Language
Página HTML fora do pradão XHTML
10. CSS – Organizado e simples
Por não existir um padrão de desenvolvimento de
folhas de estilo, o CSS de algumas páginas web e
totalmente desorganizado e confuso.
Um CSS organizado e simples faz com que ele tenha
uma manutenção mais rápida e seja facilmente
modificado sem afetar outros elementos.
15. CSS – Organizando
Para poder usar o CSS de maneira organizada
devemos antes de tudo saber quando usar o seletor
de ID e o seletor de CLASSES.
No desenvolvimento do arquivo HTML é recomendado
usar o seletor ID em elementos que não tem um tipo
de uso específico como o <div> e em um elemento
que pode ter muitos tipos de uso como no caso do
<p> para dar assim uma identidado ao elemento.
Já o seletor de CLASSES deve ser usado para atribuir
uma ou várias características a um ou mais
elementos.
16. CSS – Organizando
É recomendado também que sempre que um estilo for
utilizado apenas por um elemento, este estilo seja
específico a ele, evitando assim um estilo genérico.
20. CSS – Tableless
Tableless é uma forma de desenvolvimento de sites
que não utiliza tabelas para disposição de conteúdo
na página sugerido pela W3C. Para a disposição da
página o recomendado seria usar CSS.
A W3C também não desaprova o uso de tabelas,
desde que elas sejam utilizadas para tabular dados e
não para formatar layout. Muitos navegadores travam
ou exibem incorretamente formatações usando
tabelas.
25. CSS – Tableless vantagens
Adotar este padrão de desenvolvimento também
facilita a separação da camada de apresentação da
aplicação para o arquivo de estilo (CSS).
Diminuição de Banda. Os navegadores modernos
cacheam arquivos css e javascripts, se a maneira que
o site será visualizado é guardado em um css (padrão
tableless) então o arquivo será cacheado após o
primeiro acesso e todos os acessos seguintes não
carregarão este arquivo, carregarão apenas o
conteúdo (texto) do site.
Manutenção.
26. CSS – Tableless, como?
Para desenvolver um layout utilizando o modelo
tableless, devemos primeiramente começar a pensar
em blocos.
Um layout é basicamente composto por varios blocos.
Cada bloco terá se necessário vários blocos dentro
dele.
Sempre irá existir ao menos um bloco, a página toda.
36. CSS – Tableless, como?
Desenvolver um layout pensando em blocos facilita na
hora de desenvolver o CSS da página.
Cada bloco será uma área na página, dessa maneira
cada bloco pode ser representado no HTML como
uma <div>.
No HTML5 já existem tags para esses blocos.
Essa organização permite que o código se torne mais
facil de ser manuseado e mais fácil de ser trabalhado.
38. CSS – E os problemas?
O maior problema do CSS é a incompatibilidade dos
navegadores, mas esse pode ser resolvido com os
testes nos navegadores.
É recomendado que quando se desenvolve um estilo,
ele seja testado nos navegadores IE6, Firefox e Opera
(se póssivel Google Chrome).
Para evitar futuros problemas é recomendado
tambem desenvolver estilos expansiveis, ou seja
sempre pensando que vai existir mais conteúdo do
que já existe.
39. CSS – E os problemas?
Outro problema são as dimensões, trabalhar com
porcentagens pode parecer uma boa idéia por ter
assim um estilo que sempre acompanhará o tamanho
da tela, MAS se o conteudo todo não for trabalhado
para esse tipo de redimensionamento, a boa idéia se
torna a pior de todas.
Nesses cassos é sempre recomendado ter as
dimensões do layout estáticos.
Sempre pensar no pior caso (1024x768).
40. CSS – Conclusão
O CSS ao mesmo tempo que pode ser organizado
pode ser totalmente desorganizado.
Com o CSS é possivel que todas as questões de
aparência sejam tratados sem ter que fazer isso no
documento HTML.
Uma página estilizada por um CSS organizado, faz
com que seja de rápido acesso, deixando mais usavel
para o usuário e mais legível para o desenvolvedor.