Palestra / Novidades No CSS3 / Instituto Infnet
-
Upload
hugodiasneto -
Category
Technology
-
view
2.529 -
download
3
description
Transcript of Palestra / Novidades No CSS3 / Instituto Infnet
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