O documento discute as novidades no CSS3, incluindo: 1) Uma visão geral dos níveis CSS1, CSS2 e o trabalho em andamento no CSS3. 2) Novas funcionalidades como seletores e pseudo-classes/elementos no CSS3. 3) O suporte variado de navegadores para recursos do CSS3.

1. Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br

2. O que vocês fazem atualmente?

3. Viveríamos sem CSS hoje?

4. 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)

5. 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

6. CSS Level 2 Revision 1 Desde 2002 em desenvolvimento i nput[type="text"] { } { page-break-after: always } Div p:first-child { text-indent: 0 } L i:hover I nput:focus @media print { body { font-size: 10pt } }

7. 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...

9. NAVEGADORES E A SINTAXE EXCLUSIVA... SE A W3 NÃO DECIDE, EU IMPLEMENTO... SE A W3C NÃO FAZ, EU FAÇO..

10. 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

11. 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}

12. O CSS 3

13. 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)

14. 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 .”

15. Já posso usar o CSS3? Desenvolvimento em módulos http://www.w3.org/TR/css3-roadmap/#columns

16. 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

17. Pseudo-classes e Pseudo-elementos Visão geral da sintaxe para seletores CSS 3 Selector type Pattern Description Seletor 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

18. Quais navegadores suportam o CSS3

19. Quando teremos mais suporte ao CSS3? Mozilla Firefox 3: Previsão de lançamento: Final de 2007 Já com suporte a microformats ;)

20. Praticando... Projeto ECOTRIP

21. Já é a hora de usar o CSS 3?

22. 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

23. Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br