CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | contato@gust4vo.com
CSS3: Suporte
suporte dos navegadores e técnicas de compatibilidade

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.

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/

pseudo-classes
•Dinâmicos
•Estruturais

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.

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

pseudo-elementos

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 ;
}

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;
}

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%;
}

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

Seletores Complexos

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>

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.

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.

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

CSS
Vendor Prefixes

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

WebKit -webkit-
Gecko -moz-
Opera -o-
Microsoft -ms-
CSS3 - Start CSS Vendor Prefixes
Prefixos e Navegadores

Gradientes

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.

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:

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); }

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); }

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);
}

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);
}

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 , ...); }

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));
}

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%);

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á.

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/

<fim />

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.

CSS3: CSS3 (aula 2)

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a CSS3: CSS3 (aula 2) (20)

Mais de Gustavo Zimmermann (20)

Último (9)

CSS3: CSS3 (aula 2)