3. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3: Suporte
suporte dos navegadores e técnicas de compatibilidade
4. prof. Gustavo Zimmermann | contato@gust4vo.com
Motores de Renderização
CSS3 - Start
CSS3: Suporte
O suporte as linguagens não é feito exatamente pelo navegador, e sim pelo motor de renderização que ele utiliza.
MOTOR
BROWSER
Webkit
Gecko
Trident
Presto
*Atualmente, o Webkit é o motor de renderização que tem maior compatibilidade com o HTML5 e CSS3.
5. prof. Gustavo Zimmermann | contato@gust4vo.com
Avaliando o nível de suporte do HTML5 e CSS3
CSS3 - Start
CSS3: Suporte
Existem na web alguns bons site e algumas boas ferramentas para nos mostrar o nível atual de suporte dos navegadores com relação as novas versões das linguagens.
HTML5 & CSS3 READINESS: http://html5readiness.com/
HTML5 TEST: http://html5test.com/
Can I use: http://caniuse.com/
7. prof. Gustavo Zimmermann | contato@gust4vo.com
Pseudo-Classes Dinâmicas
CSS3 - Start
pseudo-classes
As pseudo-classes dinâmicas controlam os estados dos elementos. Alguns deles são:
•:hover – quando passamos o mouse em cima do elemento.
•:active – quando ativamos o elemento.
•:visited – quando o link é visitado.
•:focus – quando um elemento recebe foco.
*Teoricamente, todos os elementos tem estes 4 estados.
8. prof. Gustavo Zimmermann | contato@gust4vo.com
Pseudo-Classes Estruturais
CSS3 - Start
pseudo-classes
As pseudo-classes estruturais servem para selecionarmos um elemento da estrutura do código. Existem várias, por exemplo:
•:first-child – seleciona o primeiro filho de um outro elemento.
•:last-child – seleciona o último filho de um elemento.
•:lang() – seleciona elementos que tem o atributo lang com um valor específico.
•Lista Pseudo-Classes: http://www.w3.org/wiki/CSS/Selectors#Dynamic_pseudo-classes
10. prof. Gustavo Zimmermann | contato@gust4vo.com
after
CSS3 - Start pseudo-elementos
Altera o último filho virtual do elemento selecionado. Tipicamente usado para adicionar conteúdo no fim de um elemento.
.texto-emocionante::after {
conteúdo : "« agora isso * é * emocionante!" ;
cor : verde ;
}
.texto-chato::after {
conteúdo : "« CHATO!" ;
cor : vermelho ;
}
11. prof. Gustavo Zimmermann | contato@gust4vo.com
before
CSS3 - Start pseudo-elementos
Altera o primeiro filho virtual do elemento selecionado. Tipicamente usado para adicionar conteúdo no início de um elemento.
p::before {
content: "«";
color: blue;
}
p::after {
content: "»";
color: red;
}
12. prof. Gustavo Zimmermann | contato@gust4vo.com
first-letter
CSS3 - Start
pseudo-elementos
O pseudo-elemento first-letter é usado para obter um efeito especial na primeira letra de um texto.
p {
font-size: 12px;
}
p::first-letter {
font-size: 300%;
}
13. prof. Gustavo Zimmermann | contato@gust4vo.com
first-line
CSS3 - Start
pseudo-elementos
O pseudo-elemento first-letter é usado para obter um efeito especial na primeira letra de um texto.
p { font-size: 12px; } p::first-line { color: #0000FF; font-variant: small-caps; }
•Lista Pseudo-Elementos: http://www.w3.org/wiki/CSS/Selectors#Pseudo-elements
15. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3 - Start
Seletores Complexos
Os seletores complexos foram feitos para suprir necessidades muito específicas do layout. Por exemplo: Imagine uma página de cadastro, essa página há um formulário enorme, com campos de todos os tipos: radio, checkbox, text, submit etc…
<form action="">
<fieldset>
<label>Nome: <input type="text" class="input-text" /></label>
<label>
<input type="checkbox" class="input-checkbox" />
Desejo receber newsletters
</label>
</fieldset>
</form>
16. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3 - Start
Seletores Complexos
SELETOR
DESCRIÇÃO
input[type=“text”]
Seleciona o elemento INPUT com o atributo TYPE cujo valor seja exatamente o valor TEXT.
input:checked
Um radio button ou um checkbox que esteja marcado.
a[title]
Seleciona o elemento a que contenha o atributo title não importando o valor.
a[href$=html]
Seleciona elementos com atributos cujo seu valor termine com .html. Por exemplo, você poderia querer selecionar todos os links que apontam para um arquivo .pdf, ou .php etc.
17. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3 - Start Seletores Complexos
SELETOR
DESCRIÇÃO
a[title*="artigo"]
Seleciona os elementos a cujo o valor tenha pelo menos uma ocorrência com a palavra “artigo”.
a[title~=“estudo"]
Seleciona os elementos cujo o atributo tenha um valor que seja separado por espaços. No exemplo acima ele seleciona um link que contenha o atributo title e que em seu valor tenha a palavra “estudo” no meio.
a[hreflang|="pt"]
Seleciona o elemento a cujo o valor do atributo hreflang comece com PT. Ou seja valores como “pt-br” serão encontrados.
18. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3 - Start Seletores Complexos
SELETOR
DESCRIÇÃO
a[href^="http://url.com/"]
Seleciona elementos com o atributos que comecem com um valor. Você pode querer selecionar apenas os links que apontem para um site específico, por exemplo.
a[href="http://url.com/"]
Seleciona o elemento a cujo o valor do atributo href seja exatamente http://url.com/.
•Lista de Seletores Complexos: http://www.w3.org/TR/css3-selectors/#selectors
20. prof. Gustavo Zimmermann | contato@gust4vo.com
A utilização de CSS Vendor Prefixes é uma maneira dos fabricantes de browsers adicionarem suporte para novos recursos CSS3 por uma espécie de período de teste experimental, ou seja, esse é um método para adicionar novos recursos que podem ou não fazer parte de uma especificação formal e sim de formulação “beta”. Na maioria dos casos, para usar uma propriedade mais avançada de estilo CSS, você toma a propriedade CSS padrão e adiciona o prefixo para cada browser, focando sempre na técnica de cross-browser que tem como objetivo fazer o resultado da codificação ser visualizada, da mesma forma, independente do navegador que o usuário estiver utilizando.
•Tabela de CSS Vendor Prefized: http://peter.sh/experiments/vendor-prefixed-css-property-overview/
CSS3 - Start
CSS Vendor Prefixes
21. prof. Gustavo Zimmermann | contato@gust4vo.com
WebKit -webkit-
Gecko -moz-
Opera -o-
Microsoft -ms-
CSS3 - Start CSS Vendor Prefixes
Prefixos e Navegadores
23. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3 - Start
Gradientes
PROPRIEDADE
linear-gradient
10.0
26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 - webkit-
12.1
11.1 -o-
radial-gradient
10.0
26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 - webkit-
12.1
11.1 -o-
repeating-linear-gradient
10.0
26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 - webkit-
12.1
11.1 -o-
repeating-radial-gradient
10.0
26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 - webkit-
12.1
11.1 -o-
CSS3 Gradients permitem exibir transições suaves entre duas ou mais cores especificadas. Antes, você tinha que usar imagens para estes efeitos, no entando, usando gradientes em CSS3 você pode reduzir o tempo de download e uso de banda.
24. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3 - Start
Gradientes
Para definir um gradiente linear precisa ser definido pelo menos duas cores. Você pode definir “stops” para deixar a transição mais suave, pontos de partidas e ângulos também podem ser utilizados.
background: tipo-gradient (direção, color-stop1, color-stop2, ...);
SINTAXE:
25. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3 - Start Gradientes
linear-gradient: TOPO para BASE
#gradiente{ background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: linear-gradient(red, blue); }
31. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3 - Start
Gradientes
“Stops” ou definindo o tamanho do seu gradiente
O padrão é que o gradiente ocupe 100% do elemento, mas muitas vezes queremos fazer apenas um detalhe. Nesse caso nós temos que definir um STOP, para que o browser saiba onde uma cor deve terminar para começar a outra. Perceba o 20% ao lado da cor vermelha. O browser calcula quanto é 20% da altura (ou largura dependendo do caso) do elemento, e começa o gradiente da cor exatamente ali.
background: -webkit-linear-gradient(green, red 20%); background: -o-linear-gradient(green, red 20%); background: -moz-linear-gradient(green, red 20%); background: linear-gradient(green, red 20%);
32. prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3 - Start
Gradientes
radial-gradient
#gradiente{
background: -webkit-radial-gradient(red, green, blue.);
background: -o-radial-gradient(red, green, blue.);
background: -moz-radial-gradient(red, green, blue.);
background: radial-gradient(red, green, blue.);
}
*Gradientes Radial não possuem ângulos, logo se você utilizar o gradiente não ocorrerá.
35. prof. Gustavo Zimmermann | contato@gust4vo.com
Referências Bibliográficas
CSS3 - Start
Referências
AGNI, Eduardo. HTML5 & CSS3: suporte dos navegadores e técnicas de compatibilidade. Disponível em <http://www.uxdesign.blog.br/padroes- web/css3/html5-css3-suporte-dos-navegadores-e-tecnicas-de-compatibilidade/>. Acessado em 14 de AGO de 2014.
KYRNIN, Jennifer. CSS Vendor Prefixes. Disponível em http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm. Acessado em 5 de SET de 2014.
MDN. Pseudo-classes. Disponível em <https://developer.mozilla.org/en- US/docs/Web/CSS/Pseudo-classes>. Acessado em 13 de AGO de 2014.