SlideShare uma empresa Scribd logo
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 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 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 }  }
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-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
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 Dias [email_address] Materiais da palestra em www.hugodias.com.br

Mais conteúdo relacionado

Semelhante a Palestra / Novidades No CSS3 / Instituto Infnet

Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
Tiago Antônio da Silva
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
Anyssa Ferreira
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
Luis Gustavo Almeida
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSS
Mauro Pereira
 
Html 20.10
Html   20.10Html   20.10
Html 20.10
secomp2011
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
ScrumHalf Tool
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Daniel Makiyama
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
Fábio Flatschart
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do Design
Iuri Andreazza
 
Padroes De Projeto
Padroes De ProjetoPadroes De Projeto
Padroes De Projeto
ejdn1
 
Apostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfvApostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfv
erickrodrigo23
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
info_cimol
 
Padrões De Projeto e Anti Patterns
Padrões De Projeto e Anti PatternsPadrões De Projeto e Anti Patterns
Padrões De Projeto e Anti Patterns
Herval Freire
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Thiago Nascimento Oliveira
 
Doctrine for dummies
Doctrine for dummiesDoctrine for dummies
Doctrine for dummies
Ari Stopassola Junior
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
RubenManhia
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
Miquéias Amaro
 
HTML & CSS - Aula 3
HTML & CSS - Aula 3 HTML & CSS - Aula 3
HTML & CSS - Aula 3
lucampos_si
 

Semelhante a Palestra / Novidades No CSS3 / Instituto Infnet (20)

Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSS
 
Html 20.10
Html   20.10Html   20.10
Html 20.10
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do Design
 
Padroes De Projeto
Padroes De ProjetoPadroes De Projeto
Padroes De Projeto
 
Apostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfvApostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfv
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 
Padrões De Projeto e Anti Patterns
Padrões De Projeto e Anti PatternsPadrões De Projeto e Anti Patterns
Padrões De Projeto e Anti Patterns
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
 
Doctrine for dummies
Doctrine for dummiesDoctrine for dummies
Doctrine for dummies
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
 
HTML & CSS - Aula 3
HTML & CSS - Aula 3 HTML & CSS - Aula 3
HTML & CSS - Aula 3
 

Palestra / Novidades No CSS3 / Instituto Infnet

  • 1. Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
  • 2. O que vocês fazem atualmente?
  • 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...
  • 8.  
  • 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}
  • 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
  • 19. Quando teremos mais suporte ao CSS3? Mozilla Firefox 3: Previsão de lançamento: Final de 2007 Já com suporte a microformats ;)
  • 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