Novidades no CSS3

Hugo Diashugodias@meetweb.com.br

Materiais da palestra em www.hugodias.com.br

O que vocês fazem atualmente?

Viveríamos sem CSS hoje?

CSS Level 1

• CSS Level 1– Subutilizado– Poucos sabiam o que fazer com a linguagem

http://en.wikipedia.org/wiki/Cascading_Style_Sheets (3/8/2007)

CSS Level 2

• CSS Level 2– Depois de anos colocando classes em células de tabela aprendemos a

utilizar o CSS de maneira mais completa– Maior suporte disponível em navegadores

CSS Level 2 Revision 1

– Desde 2002 em desenvolvimento• input[type="text"] { }• { page-break-after: always }• Div p:first-child { text-indent: 0 }• Li:hover• Input:focus• @media print {

body { font-size: 10pt } }

CSS - Resumo

• Sempre foi superior ao HTML nas questões visuais

• Sempre sentimos falta de algumas funcionalidades

• Software houses sempre tentam suprir estas demandas com sintaxe proprietária...

NAVEGADORES E A SINTAXE EXCLUSIVA...SE A W3 NÃO DECIDE, EU IMPLEMENTO...

SE A W3C NÃO FAZ, EU FAÇO..

Sintaxe proprietária

• Mozilla–-moz-border-bottom-colors –-moz-border-left-colors –-moz-border-radius –-moz-border-radius-bottomleft –-moz-border-radius-bottomright –-moz-border-radius-topleft –-moz-border-radius-topright –-moz-border-right-colors –-moz-border-top-colors

http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions

Sintaxe proprietária

• Internet Explorer– body {scrollbar-3dlight-color:#ffd700;

scrollbar-arrow-color:#ff0; scrollbar-base-color:#ff6347; scrollbar-darkshadow-color:#ffa500; scrollbar-face-color:#008080; scrollbar-highlight-color:#ff69b4; scrollbar-shadow-color:#f0f}

O CSS 3

Desde quando...

“The CSS Working Group began tackling issues that had not been addressed with CSS level 1, resulting in the creation of CSS level 2 on November 4, 1997. It was published as a W3C Recommendation on May 12, 1998.

CSS level 3, which was started in 1998, is still under development as of 2006.”

http://en.wikipedia.org/wiki/Cascading_Style_Sheets (3/8/2007)

Trabalhando no CSS3 neste exato momento

• http://www.w3.org/Style/CSS/current-work#selectors

“Participate in a Working Group as an Invited Expert. If you have a high level of expertise in a specific field which is being addressed by a current W3C Working Group, you may ask the Chair to invite you to participate, even if you do not work for a Member organization.”

Já posso usar o CSS3?

Desenvolvimento em módulos http://www.w3.org/TR/css3-roadmap/#columns

Que seletores a mais "temos":

• Esqueci o que são seletores...– P {}– A.CLASSE {}– TD, TH {}– P STRONG {}– UL#MENU, P STRONG {}

http://www.maujor.com/tutorial/seletores-css3.php

Pseudo-classes e Pseudo-elementosSelector type Pattern DescriptionSeletor para sub string de atributo E[att^="val"] Casa com qualquer elemento E cujo valor do atributo att começa com "val".

Seletor para sub string de atributo E[att$="val"] Casa com qualquer elemento E cujo valor do atributo att termina com "val".

Seletor para sub string de atributo E[att*="val"] Casa com qualquer elemento E cujo valor do atributo att contenha a sub string "val".

Pseudo classe estrutural E:root Casa com o elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML.

Pseudo classe estrutural E:nth-child(n) Casa com qualquer elemento E que seja o n-th (enésimo) filho do elemento pai.

Pseudo classe estrutural E:nth-last-child(n) Casa com qualquer elemento E que que seja o n-th (enésimo) filho do elemento pai, a contar do último filho.

Pseudo classe estrutural E:nth-of-type(n) Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo.

Pseudo classe estrutural E:nth-last-of-type(n) Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo, a contar do último filho

Pseudo classe estrutural E:last-child Casa com qualquer elemento E que seja o último filho do elemento pai.

Pseudo classe estrutural E:first-of-type Casa com qualquer elemento E que seja o primeiro elemento irmão do seu tipo.

Pseudo classe estrutural E:last-of-type Casa com qualquer elemento E que seja o último elemento irmão do seu tipo.

Pseudo classe estrutural E:only-child Casa com qualquer elemento E que seja o único filho do elemento pai.

Pseudo classe estrutural E:only-of-type Casa com qualquer elemento E que seja o único elemento irmão do seu tipo.

Pseudo classe estrutural E:empty Casa com qualquer elemento E que não tenha filhos (incluindo os nós de texto).

Pseudo classe :target E:target Casa com um elemento E que seja o destino da URL.Pseudo classe estado de elemento de UI E:enabled Casa com qualquer elemento E de interface de usuário (um controle de formulário) e que

esteja habilitado (enabled).Pseudo classe estado de elemento de UI E:disabled Casa com qualquer elemento E de interface de usuário (um controle de formulário) que

esteja desabilitado (disabled).Pseudo classe estado de elemento de UI E:checked Casa com qualquer elemento E de interface de usuário (um controle de formulário) que

esteja marcado (checked).Pseudo-elemento fragmentos de elemento de UI E::selection Casa com a parte de qualquer elemento E que tenha sido selecionado ou destacado pelo

usuário.Pseudo classe negação E:not(s) Casa com qualquer elemento E que não case com o seletor simples s.Elemento de combinação irmão em g

Visão geral da sintaxe para seletores CSS 3

Quais navegadores suportam o CSS3

Quando teremos mais suporte ao CSS3?

• Mozilla Firefox 3:Previsão de lançamento: Final de 2007– Já com suporte a microformats ;)

Praticando...

Projeto ECOTRIP

Já é a hora de usar o CSS 3?

Conclusões

• A falta de suporte atrapalha a evolução do CSS

• O CSS está ganhando características de linguagens de programação

• A falta de previsão para o lançamento do CSS 3 irrita a indústria

Novidades no CSS3

Hugo Diashugodias@meetweb.com.br

Materiais da palestra em www.hugodias.com.br