Aula 2:
prof. Gustavo Zimmermann | [email protected]
CSS3: Suporte suporte dos navegadores e técnicas de compatibilidade
prof. Gustavo Zimmermann | [email protected]
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.
prof. Gustavo Zimmermann | [email protected]
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/
prof. Gustavo Zimmermann | [email protected]
pseudo-classes • Dinâmicos • Estruturais
prof. Gustavo Zimmermann | [email protected]
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.
prof. Gustavo Zimmermann | [email protected]
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
prof. Gustavo Zimmermann | [email protected]
pseudo-elementos
prof. Gustavo Zimmermann | [email protected]
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 ;
}
prof. Gustavo Zimmermann | [email protected]
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;
}
prof. Gustavo Zimmermann | [email protected]
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%;
}
prof. Gustavo Zimmermann | [email protected]
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
prof. Gustavo Zimmermann | [email protected]
Seletores Complexos
prof. Gustavo Zimmermann | [email protected]
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>
prof. Gustavo Zimmermann | [email protected]
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.
prof. Gustavo Zimmermann | [email protected]
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.
prof. Gustavo Zimmermann | [email protected]
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
prof. Gustavo Zimmermann | [email protected]
CSS Vendor Prefixes
prof. Gustavo Zimmermann | [email protected]
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
prof. Gustavo Zimmermann | [email protected]
WebKit -webkit-
Gecko -moz-
Opera -o-
Microsoft -ms-
CSS3 - Start
CSS Vendor Prefixes
Prefixos e Navegadores
prof. Gustavo Zimmermann | [email protected]
Gradientes
prof. Gustavo Zimmermann | [email protected]
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.
prof. Gustavo Zimmermann | [email protected]
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:
prof. Gustavo Zimmermann | [email protected]
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);
}
prof. Gustavo Zimmermann | [email protected]
CSS3 - Start
Gradientes
linear-gradient: ESQUERDA para DIREITA
#gradiente{
background: -webkit-linear-gradient(left, red, blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(right, red, blue);
}
prof. Gustavo Zimmermann | [email protected]
CSS3 - Start
Gradientes
linear-gradient: Diagonal
#gradiente{
background: -webkit-linear-gradient(left top, red, blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(bottom right, red, blue);
}
prof. Gustavo Zimmermann | [email protected]
CSS3 - Start
Gradientes
linear-gradient: Ângulo
#gradiente{
background: -webkit-linear-gradient(180deg, red, blue);
background: -o-linear-gradient(180deg, red, blue);
background: -moz-linear-gradient(180deg, red, blue);
background: linear-gradient(180deg, red, blue);
}
prof. Gustavo Zimmermann | [email protected]
CSS3 - Start
Gradientes
linear-gradient: Multiplas Cores
#gradiente{
background: -webkit-linear-gradient(red, green, blue , ...);
background: -o-linear-gradient(red, green, blue, ...);
background: -moz-linear-gradient(red, green, blue , ...);
background: linear-gradient(red, green, blue , ...);
}
prof. Gustavo Zimmermann | [email protected]
CSS3 - Start
Gradientes
linear-gradient: Transparência
#gradiente{
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
background: -o-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
background: -moz-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
background: linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
}
prof. Gustavo Zimmermann | [email protected]
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%);
prof. Gustavo Zimmermann | [email protected]
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á.
prof. Gustavo Zimmermann | [email protected]
CSS3 - Start
Gradientes
CSS3 Gradient: Links
• W3School: http://www.w3schools.com/css/css3_gradients.asp/
• Tableless: http://tableless.com.br/como-usar-gradient-no-css-de-forma-consciente/
• Editor de Gradiente (online): http://www.colorzilla.com/gradient-editor/
prof. Gustavo Zimmermann | [email protected]
<fim />
prof. Gustavo Zimmermann | [email protected]
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.