A principal função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.
Compatibilidade
Não são todas as versões dos navegadores que suportam.
- Internet Explorer 7 e 8 – Muito pouco ou quase nenhum suporte.
- Internet Explorer 9 – Suporta muito bem.
- Firefox 3 – Suporta razoavelmente bem.
- Firefox 4 – Suporta muito bem.
- Safari, Chrome e Opera – Suportam muito bem.
A tendência é que em pouco tempo os usuários, até mesmo os leigos, atualizem seus navegadores, principalmente pela chegada do HTML5.
Prefixos CSS3
O CSS3 ainda não está completamente implementado e muito menos os Browsers seguem o mesmo padrão para cada propriedade. Por este motivo, algumas propriedades devem ser precedidas de um prefixo que indica que, àquela propriedade, se trata de uma extensão que somente aquele navegador específico interpretará.
- Safari e Chrome: -webkit-
- Firefox: -moz-
Vale ressaltar que estes prefixos não são hacks, são recursos do browser.
A proposta da W3C é tornar “CrossBrowser” estas propriedades, de modo que funcionem em todos os navegadores sem diferença. Isso ainda não é realidade nos navegadores atuais, mas não se preocupe, em breve, com a chegada do HTML5 as coisas mudarão. Já estão mudando!
Principais novidades do CSS3
O artigo será breve, mostraremos na prática apenas algumas propriedades. Mas veja a lista das principais novidades do CSS3:
Bordas
- border-radius
- border-color
- box-shadow
- border-image
Texto
- text-shadow
- word-wrap
- @font-face
- text-overflow
Background
- background-clip
- background-origin
- background-size
- – Múltiplos backgrounds (Vários backgrounds)
Cores
- HSL
- HSLA
- RGBA
- – Opacidade
Interface
- box-sizing
- resize
- outline
- nav-top
- nav-right
- nav-bottom
- nav-left
Seletores
Seletores por atributos, igual jQuery. Lembra? Exemplo:
a[id="link-site"]
Overflow / Barra de rolagem
Terá como definirmos se a barra de rolagem horizontal ou vertical deve aparecer, sem o uso de JavaScript (Graças ao CSS3).
- overflow-x
- overflow-y
Outros Recursos
- Media Queries
- Web Fonts
- Criação de múltiplas colunas de texto
- Etc.
CSS3 na prática
Agora vamos brincar um pouco com CSS3. Os exemplos mostrados aqui foram executados nos navegadores Firefox 4 e Google Chrome 9.
border-radius
Permite arredondar os cantos de um elemento HTML, comumente usado em Divs. Exemplo:
Categorias:Diversos
Deixe uma resposta