Introdução a CSS3

Alguns navegadores começam a implementar CSS3, portanto é hora de começar a conhecer algumas diferenças e melhoras com respeito a CSS2.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 19/8/08
Valorize este artigo:
Desde que CSS começou passaram muitos anos e já vamos pela especificação de CSS3, que incorpora uma série de novidades que vamos tratar de resumir neste artigo.

O que é CSS

Explore os recursos do CSS3. CSS e Dreamweaver

Se você não sabe o que é CSS provavelmente lhe interessaria começar lendo nosso manual de CSS ou a seção de CSS a fundo. Não obstante, caberia dizer que CSS é uma linguagem para definir o estilo ou a aparência das páginas web, escritas com HTML ou dos documentos XML. CSS se criou para separar o conteúdo da forma, ao mesmo tempo que permite aos designers manter um controle muito mais preciso sobre a aparência das páginas.

Com CSS3, mais controle sobre a forma

O objetivo inicial de CSS, separar o conteúdo da forma, se cumpriu já com as primeiras especificações da linguagem. Entretanto, o objetivo de oferecer um controle total aos designers sobre os elementos da página foi mais difícil de cobrir. As especificações anteriores da linguagens tinham muitas utilidades para aplicar estilos às webs, porém os desenvolvedores ainda continuam usando truques diversos para conseguir efeitos tão comuns ou tão desejados como as bordas arredondadas ou a sombra de elementos na página.

CSS 1 já significou um avance considerável na hora de desenhar páginas web, trazendo muito maior controle dos elementos da página. Porém, como ainda ficaram muitas coisas que os designers desejavam fazer, mas que CSS não permitia especificar, estes deviam fazer uso de truques para o design. O pior destes truques é que muitas vezes implica alterar o conteúdo da página para incorporar novas etiquetas HTML que permitam aplicar estilos de uma maneira mais elaborada. Dada à necessidade de mudar o conteúdo, para alterar o desenho e fazer coisas que CSS não permitia, estava-se acabando com algum dos objetivos para os que CSS foi criado, que era o de separar por completo o conteúdo da forma.

CSS 2 incorporou algumas novidades interessantes, que hoje já utilizamos habitualmente, porém CSS 3 ainda avança um pouco mais na direção, de dar mais controle sobre os elementos da página.

Sendo assim, a novidade mais importante que traz CSS 3, para os desenvolvedores de webs, consiste na incorporação de novos mecanismos para manter um maior controle sobre o estilo com o qual se mostram os elementos das páginas, sem ter que recorrer a truques ou hacks, que a muitas vezes complicavam o código das webs.

Propriedades novas em CSS3

Segue aqui uma lista das principais propriedades que são novidade em CSS3.

Bordas

  • border-color
  • border-image
  • border-radius
  • box-shadow
Fundos
  • background-origin
  • background-clip
  • background-size
  • fazer camadas com múltiplas imagens de fundo
Cor
  • cores HSL
  • cores HSLA
  • cores RGBA
  • Opacidade
Texto
  • text-shadow
  • text-overflow
  • Ruptura de palavras longas
Interface
  • box-sizing
  • resize
  • outline
  • nav-top, nav-right, nav-bottom, nav-left
Seletores
  • Seletores por atributos
Modelo de caixa básico
  • overflow-x, overflow-y
Outros
  • media queries
  • criação de múltiplas colunas de texto
  • propriedades orientadas a discurso ou leitura automática de páginas web
  • Web Fonts
Esta lista de novas propriedades de CSS3 foi tirado de: http://www.css3.info/preview/. É um site em inglês, mas pode ser bom visitar para ir conhecendo mais detalhes sobre CSS3.

Em futuros artigos daremos algumas chaves e explicações sobre várias destas propriedades, pelo menos as mais interessantes, com especificações detalhadas, assim como exemplos que sirvam para ir conhecendo esta nova especificação de CSS.





Manual: CSS 3

Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato