Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
O que vocês fazem atualmente?
Viveríamos sem CSS hoje?
CSS Level 1 <ul><li>CSS Level 1 </li></ul><ul><ul><li>Subutilizado </li></ul></ul><ul><ul><li>Poucos sabiam o que fazer co...
CSS Level 2 <ul><li>CSS Level 2 </li></ul><ul><ul><li>Depois de anos colocando classes em células de tabela aprendemos a u...
CSS Level 2 Revision 1 <ul><ul><li>Desde 2002 em desenvolvimento </li></ul></ul><ul><ul><ul><li>i nput[type=&quot;text&quo...
CSS - Resumo <ul><li>Sempre foi superior ao HTML nas questões visuais </li></ul><ul><li>Sempre sentimos falta de algumas f...
 
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 <ul><li>Mozilla </li></ul><ul><ul><li>-moz-border-bottom-colors  </li></ul></ul><ul><ul><li>-moz-bord...
Sintaxe proprietária  <ul><li>Internet Explorer </li></ul><ul><ul><li>body  {scrollbar-3dlight-color:#ffd700;  scrollbar-a...
O CSS 3
Desde quando... <ul><li>“ The CSS Working Group began tackling issues that had not been addressed with CSS level 1, result...
Trabalhando no CSS3 neste exato momento <ul><li>http://www.w3.org/Style/CSS/current-work#selectors </li></ul><ul><li>“ Par...
Já posso usar o CSS3? Desenvolvimento em módulos   http://www.w3.org/TR/css3-roadmap/#columns
Que seletores a mais &quot;temos&quot;: <ul><li>Esqueci o que são seletores... </li></ul><ul><ul><li>P  {} </li></ul></ul>...
Pseudo-classes e Pseudo-elementos Visão geral da sintaxe para seletores CSS 3  Selector type Pattern Description Seletor p...
Quais navegadores suportam o CSS3
Quando teremos mais suporte ao CSS3? <ul><li>Mozilla Firefox 3: Previsão de lançamento: Final de 2007 </li></ul><ul><ul><l...
Praticando... Projeto ECOTRIP
Já é a hora de usar o CSS 3?
Conclusões <ul><li>A falta de suporte atrapalha a evolução do CSS </li></ul><ul><li>O CSS está ganhando características de...
Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
Próximos SlideShares
Carregando em…5
×

Palestra / Novidades No CSS3 / Instituto Infnet

2.759 visualizações

Publicada em

Apresentação realizada no ciclo de palestras do Instituto Infnet (Rio de Janeiro)

Publicada em: Tecnologia, Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.759
No SlideShare
0
A partir de incorporações
0
Número de incorporações
94
Ações
Compartilhamentos
0
Downloads
32
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Palestra / Novidades No CSS3 / Instituto Infnet

  1. 1. Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
  2. 2. O que vocês fazem atualmente?
  3. 3. Viveríamos sem CSS hoje?
  4. 4. CSS Level 1 <ul><li>CSS Level 1 </li></ul><ul><ul><li>Subutilizado </li></ul></ul><ul><ul><li>Poucos sabiam o que fazer com a linguagem </li></ul></ul>http://en.wikipedia.org/wiki/Cascading_Style_Sheets (3/8/2007)
  5. 5. CSS Level 2 <ul><li>CSS Level 2 </li></ul><ul><ul><li>Depois de anos colocando classes em células de tabela aprendemos a utilizar o CSS de maneira mais completa </li></ul></ul><ul><ul><li>Maior suporte disponível em navegadores </li></ul></ul>
  6. 6. CSS Level 2 Revision 1 <ul><ul><li>Desde 2002 em desenvolvimento </li></ul></ul><ul><ul><ul><li>i nput[type=&quot;text&quot;] { } </li></ul></ul></ul><ul><ul><ul><li>{ page-break-after: always } </li></ul></ul></ul><ul><ul><ul><li>Div p:first-child { text-indent: 0 } </li></ul></ul></ul><ul><ul><ul><li>L i:hover </li></ul></ul></ul><ul><ul><ul><li>I nput:focus </li></ul></ul></ul><ul><ul><ul><li>@media print { body { font-size: 10pt } } </li></ul></ul></ul>
  7. 7. CSS - Resumo <ul><li>Sempre foi superior ao HTML nas questões visuais </li></ul><ul><li>Sempre sentimos falta de algumas funcionalidades </li></ul><ul><li>Software houses sempre tentam suprir estas demandas com sintaxe proprietária... </li></ul>
  8. 9. NAVEGADORES E A SINTAXE EXCLUSIVA... SE A W3 NÃO DECIDE, EU IMPLEMENTO... SE A W3C NÃO FAZ, EU FAÇO..
  9. 10. Sintaxe proprietária <ul><li>Mozilla </li></ul><ul><ul><li>-moz-border-bottom-colors </li></ul></ul><ul><ul><li>-moz-border-left-colors </li></ul></ul><ul><ul><li>-moz-border-radius </li></ul></ul><ul><ul><li>-moz-border-radius-bottomleft </li></ul></ul><ul><ul><li>-moz-border-radius-bottomright </li></ul></ul><ul><ul><li>-moz-border-radius-topleft </li></ul></ul><ul><ul><li>-moz-border-radius-topright </li></ul></ul><ul><ul><li>-moz-border-right-colors </li></ul></ul><ul><ul><li>-moz-border-top-colors </li></ul></ul><ul><ul><li>http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions </li></ul></ul>
  10. 11. Sintaxe proprietária <ul><li>Internet Explorer </li></ul><ul><ul><li>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} </li></ul></ul>
  11. 12. O CSS 3
  12. 13. Desde quando... <ul><li>“ 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 . ” </li></ul>http://en.wikipedia.org/wiki/Cascading_Style_Sheets (3/8/2007)
  13. 14. Trabalhando no CSS3 neste exato momento <ul><li>http://www.w3.org/Style/CSS/current-work#selectors </li></ul><ul><li>“ 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 .” </li></ul>
  14. 15. Já posso usar o CSS3? Desenvolvimento em módulos http://www.w3.org/TR/css3-roadmap/#columns
  15. 16. Que seletores a mais &quot;temos&quot;: <ul><li>Esqueci o que são seletores... </li></ul><ul><ul><li>P {} </li></ul></ul><ul><ul><li>A .CLASSE {} </li></ul></ul><ul><ul><li>TD, TH {} </li></ul></ul><ul><ul><li>P STRONG {} </li></ul></ul><ul><ul><li>UL#MENU, P STRONG {} </li></ul></ul><ul><ul><li>http://www.maujor.com/tutorial/seletores-css3.php </li></ul></ul>
  16. 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^=&quot;val&quot;] Casa com qualquer elemento E cujo valor do atributo att começa com &quot;val&quot;. Seletor para sub string de atributo E[att$=&quot;val&quot;] Casa com qualquer elemento E cujo valor do atributo att termina com &quot;val&quot;. Seletor para sub string de atributo E[att*=&quot;val&quot;] Casa com qualquer elemento E cujo valor do atributo att contenha a sub string &quot;val&quot;. 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
  17. 18. Quais navegadores suportam o CSS3
  18. 19. Quando teremos mais suporte ao CSS3? <ul><li>Mozilla Firefox 3: Previsão de lançamento: Final de 2007 </li></ul><ul><ul><li>Já com suporte a microformats ;) </li></ul></ul>
  19. 20. Praticando... Projeto ECOTRIP
  20. 21. Já é a hora de usar o CSS 3?
  21. 22. Conclusões <ul><li>A falta de suporte atrapalha a evolução do CSS </li></ul><ul><li>O CSS está ganhando características de linguagens de programação </li></ul><ul><li>A falta de previsão para o lançamento do CSS 3 irrita a indústria </li></ul>
  22. 23. Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br

×