[IPW]

CSS – aplicação,
prefixos e media
queries
 aplicação dos estilos

Introdução à Programação Web - ESTSetúbal/IPS

2
 Colocação dos elementos
1. O Browser começa por processar o head
carregando todos os estilos definidos (por style
e/ou link)

Introdução à Programação Web - ESTSetúbal/IPS

e em seguida vai processar o body.

2. Faz o parse do HTML do body criando uma

estrutura em árvore com os elementos
e de seguida vai formatá-los

3. Para cada elemento HTML tenta encontrar o valor

para cada uma das suas propriedades.

3
 Colocação dos elementos
• O valor para a propriedade é calculado/encontrado em função
das regras CSS:

Introdução à Programação Web - ESTSetúbal/IPS

1. Começa por selecionar as regras CSS que
 “emparelham” com o elemento (em função dos seletores),
 referem a propriedade e
 são para o media atual (ecrã, impressão, etc.).

Fonte: http://www.w3.org/TR/CSS2/cascade.html 4
 Colocação dos elementos
• O valor para a propriedade é calculado/encontrado em função
das regras CSS:

Introdução à Programação Web - ESTSetúbal/IPS

2. Ordena as regras pela seguinte ordem:
a) Primeiro pela origem:
i. Estilos !important do Utilizador
ii. Estilos !important do Programador
iii. Estilos do Programador
iv. Estilos do Utilizador
v. Estilos, por omissão, do Browser
b) Depois por especificidade
c) Caso haja duas regras com igual “posição” (mesma origem
e especificidade) então →
ordena-as por distância em relação ao elemento.
• Finalmente, Aplica o valor encontrado
Fonte: http://www.w3.org/TR/CSS2/cascade.html 5
Colocação dos elementos
Herança de valores
• Caso não haja valor encontrado:
A. Se a propriedade puder receber valores herdados do “pai”

Introdução à Programação Web - ESTSetúbal/IPS

então usa-o;
B. Se não puder receber valores herdados então usa o valor
inicial definido, na norma, para essa propriedade
 As propriedades que podem herdar valores (ex.: color, font,
text-align, text-indent, text-transform, etc.) e os
valores iniciais de cada propriedade estão definidos na norma:

http://www.w3.org/TR/CSS/#properties
 Usando, numa regra, o valor:
 initial: “forçamos” a utilização do valor inicial

 inherit: “forçamos” que uma propriedade herde o valor do “pai”

6
 Colocação dos elementos
Herança de valores

Introdução à Programação Web - ESTSetúbal/IPS

Fonte: http://www.w3.org/TR/CSS22/propidx.html 7
 queries
media e media

Introdução à Programação Web - ESTSetúbal/IPS

8
Atributo media
• Indicar qual o contexto de aplicabilidade dos estilos;
• Valores mais comuns:
 screen (omissão)

Introdução à Programação Web - ESTSetúbal/IPS

 print (impressão)
 speech (screen readers)
 … (outros definidos na CSS2 mas em desuso)
 all (todos)

• Exemplo - tratamento das ligações na impressão (tirar sublinhado e cor):

<style type="text/css" media="print">
a { color: #000; text-decoration: none; }
</style>

 Também pode ser usado como regra (“no meio das outras”):
@media print {
a { color: #000; text-decoration: none; }
}
Fonte: http://www.w3.org/TR/css3-mediaqueries/ 9
 Media Queries
• A partir da CSS3 foi possível condicionar regras a
características dos dispositivos através de Media Queries.

Introdução à Programação Web - ESTSetúbal/IPS

• Apesar de se poderem indicar diversas características, as
mais comuns estão relacionadas com o tamanho do ecrã:
 max-width,

 min-width,

 max-height,

 min-height,

 orientation (landscape ou portrait)

Fonte: http://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 10
 Media Queries
• Uma regra com Media Query tem o formato (opcional e
repetir):

Introdução à Programação Web - ESTSetúbal/IPS

@media only|not tipomedia and (característica) {
Regras CSS
}

• No atributo media para controlar a utilização de uma

folha de estilos:
<link rel="stylesheet" media="only|not tipomedia and
(característica)" href="mystylesheet.css" />

Fonte: http://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 11
 Exemplos de Media Queries
• Se a largura é maior que 800px (o only garante a não aplicação em
Browsers antigos que só veriam “@media screen …”. o not

Introdução à Programação Web - ESTSetúbal/IPS

aplica-se a toda a condição):

@media only screen and (min-width: 800px) {

…
}

• Se está na horizontal (útil para smartphones ou tablets):

@media screen and (orientation: landscape) {

…
}
12
Exemplos de Media Queries
• Uso de vírgulas equivale a or (não indicação do tipomedia
corresponde a all):

Introdução à Programação Web - ESTSetúbal/IPS

@media (min-width: 800px), print and (orientation:
landscape) {
...
}

• Usando a unidade em testa-se o número de caracteres

disponíveis (importante para decidir se colocar colunas):
@media only screen and (max-width: 28em) {
…
}
13
 Adaptação ao tamanho do ecrã
Etiqueta picture
 Surge na tentativa de fornecer a melhor imagem, em função do ecrã
atual,

Introdução à Programação Web - ESTSetúbal/IPS

 só funciona em alguns Browsers mais recentes,
 permite indicar qual a imagem a utilizar em função das características:

<picture>
<source media="(min-width: 64em)" src="grande.png">
<source media="(min-width: 37.5em)" src="media.png">
<source src="pequena.png">
<img src="omissao.png"
alt="Para Browsers que não reconheçam o source.">
<p>Texto se tudo o resto falhar (como o alt)</p>
</picture>

Fonte: http://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture 14
 Conclusões - resumo
• Aplicação dos estilos aos Elementos

• Herança de valores

Introdução à Programação Web - ESTSetúbal/IPS

• Media query

15