Quando declaramos uma série de seletores CSS, é bem possível que nos deparemos com situações em que mais de um seletor esteja aplicando propriedades visuais ao mesmo elemento do HTML. Nesse caso é ne- cessário saber qual seletor tem precedência sobre os outros, a fim de resolver conflitos e garantir que as propriedades desejadas estejam sendo aplicadas aos elementos corretos.
O comportamento padrão dos seletores CSS, quando não há conflitos entre propriedades, é que as proprie- dades de mais de um seletor para um mesmo elemento sejam acumuladas. Veja no exemplo a seguir:
Estrutura HTML
<p>Texto do parágrafo em destaque</p> <p>Texto de um parágrafo comum</p>
Seletores CSS p { color: navy; } p { font-size: 16px; }
No exemplo anterior, utilizamos o mesmo seletor duas vezes no CSS. Isso faz com que as propriedades sejam acumuladas em todos os elementos selecionados. No caso, todos os elementos da tagpem nosso documento serão exibidos da cor “navy” (azul marinho) e com a fonte no tamanho “16px”.
Quando há conflito entre propriedades de seletores equivalentes, ou até mesmo em um mesmo seletor, é aplicada a propriedade declarada depois, como no exemplo a seguir:
p { color: navy; font-size: 12px; } p { font-size: 16px; }
Nesse caso, há conflito entre as propriedades font-size declaradas nos seletores. Como os seletores são equivalentes, os parágrafos serão exibidos com a fonte no tamanho “16pt”. A declaração anterior, com valor de “12pt” é sobrescrita pela nova propriedade declarada mais abaixo no nosso CSS. A cor “navy” continua aplicada a todos os parágrafos do documento.
Especificidade de Seletores CSS
Seletores equivalentes têm suas propriedades sobrescritas conforme são declaradas. Mas o que acontece quando temos diferentes tipos de seletores?
Cada tipo de seletor tem um peso diferente quando o navegador os interpreta e aplica suas propriedades declaradas aos elementos de um documento. Existe uma maneira bem simples de saber como funcionam esses pesos porque eles fazem parte da especificação do CSS. Para ficar um pouco mais fácil é só pensarmos em uma regra simples: quanto mais específico for o seletor, maior seu valor. Por isso esse peso, ou valor, que cada seletor tem recebe o nome de especificidade.
O seletor de tag, por exemplodiv {}, é bem genérico. As propriedades declaradas nesse seletor serão apli- cadas a todos os elementosdivdo nosso documento, não levando em consideração qualquer atributo que eles possam ter. Por esse motivo, o seletor de tag tem valor baixo de especificidade.
O seletor de classe, por exemplo.destaque {}, é um pouco mais específico, nós decidimos quais elementos têm determinado valor para esse atributo nos elementos do HTML, portanto o valor de especificidade do seletor de classe é maior do que o valor de especificidade do seletor de tag.
O seletor de id, por exemplo#cabecalho {}, é bem específico, pois só podemos ter um único elemento com determinado valor para o atributo id, então seu valor de especificidade é o maior entre os seletores que vimos até agora.
E quando temos seletores compostos ou combinados? Como calcular essa especificidade?
Podemos adicionar um ponto em cada posição do valor de um seletor para chegarmos ao seu valor de es- pecificidade. Para isso vamos utilizar uma tabela para nos ajudar a conhecer esses valores, e a seguir vamos aplicar o calculo a alguns seletores propostos.
Seguindo os valores descritos na tabela acima, podemos calcular o valor de especificidade para qualquer seletor CSS, por exemplo:
p { /* valor de especificidade: 001 */
color: blue; }
.destaque { /* valor de especificidade: 010 */
color: red; }
#cabecalho { /* valor de especificidade: 100 */
color: green; }
Nos seletores combinados e compostos, basta somar os valores em suas determinadas posições como nos exemplos a seguir:
#rodape p { /* valor de especificidade: 101 */
font-size: 11px;
}
#cabecalho .conteudo h1 { /* valor de especificidade 111 */
color: green; }
.conteudo div p span { /* valor de especificidade: 013 */
font-size: 13px; }
Quanto maior o valor da especificidade do seletor, maior a prioridade de seu valor, dessa maneira um seletor com valor de especificidade 013 sobrescreve as propriedades conflitantes para o mesmo elemento que um seletor com valor de especificidade 001.
Essa é uma maneira simples de descobrir qual seletor tem suas propriedades aplicadas com maior priori- dade. Por enquanto vimos somente esses três tipos de seletores CSS (tag, classe e id). No decorrer do curso vamos ver outros tipos mais avançados de seletores, e vamos complementando essa tabela para termos uma referência completa para esse cálculo.
“A iniciativa da Internet móvel é importante, informações devem ser igualmente disponíveis em qualquer dispositivo” –Tim Berners-Lee
6.1
Site mobile ou mesmo site?
O volume de usuários que acessam a Internet por meio de dispositivos móveis cresceu exponencialmente nos últimos anos. Usuários de iPhones, iPads e outros smartphones e tablets têm demandas diferentes dos usuários Desktop. Redes lentas e acessibilidade em dispositivos limitados e multitoque são as principais diferenças.
Como atender a esses usuários?
Para que suportemos usuários móveis, antes de tudo, precisamos tomar uma decisão: fazer um Site exclusivo - e diferente - focado em dispositivos móveis ou adaptar nosso Site para funcionar em qualquer dispositivo? Vários grandes sites da Internet - como Google, Amazon, UOL, Globo.com etc - adotam a estratégia de ter um Site diferente voltado para dispositivos móveis. É comum usar um subdomínio diferente como “m.” ou “mobile.”, como http://m.uol.com.br.
Essa abordagem é a que traz maior facilidade na hora de pensar nas capacidades de cada plataforma, Desktop e mobile, permitindo que entreguemos uma experiência customizada e otimizada para cada situação. Porém, há diversos problemas envolvidos:
• Como atender adequadamente diversos dispositivos tão diferentes quanto um smartphone com tela pequena e um tablet com tela mediana? E se ainda considerarmos os novos televisores como Google TV? Teríamos que montar um Site específico para cada tipo de plataforma?
• Muitas vezes esses Sites mobile são versões limitadas dos Sites de verdade e não apenas ajustes de usabilidade para o dispositivo diferente. Isso frustra o usuário que, cada vez mais, usa dispositivos móveis para completar as mesmas tarefas que antes fazia no Desktop.
• Dar manutenção em um Site já é bastante trabalhoso, imagine dar manutenção em dois - um mobile e um normal.
• Você terá conteúdos duplicados entre Sites “diferentes”, podendo prejudicar seu SEO se não for feito com cuidado.
• Terá que lidar com redirects entre URLs móveis e normais, dependendo do dispositivo. O usuário pode receber de um amigo um link para uma página vista no Site normal; mas se ele abrir esse email no celular, terá que ver a versão mobile desse link, sendo redirecionado automaticamente. E mesma coisa no sentido contrário, ao mandar um link de volta para o Desktop.
Uma abordagem que vem ganhando bastante destaque é a de ter um único Site, acessível em todos os dis- positivos móveis. Adeptos da ideia da Web única (One Web) consideram que o melhor para o usuário é ter o mesmo Site do Desktop normal também acessível no mundo móvel. É o melhor para o desenvolvedor também, que não precisará manter vários Sites diferentes. E é o que garante a compatibilidade com a maior gama de aparelhos diferentes.
Certamente, a ideia não é fazer o usuário móvel acessar a página exatamente da mesma maneira que o usuário Desktop. Usando truques de CSS3 bem suportados no mercado, podemos usar a mesma base de layout e marcação porém ajustando o design para cada tipo de dispositivo.
Nossa página no Desktop agora é mostrada assim:
Queremos que, quando vista em um celular, tenha um layout mais otimizado:
Como desenvolver um Site exclusivo para Mobile?
A abordagem que trataremos no curso é a de fazer adaptações na mesma página para ser com- patível com CSS3. Como faremos caso queiramos fazer um Site exclusivo para mobile?
Do ponto de vista de código, é a abordagem mais simples: basta fazer sua página com design mais enxuto e levando em conta que a tela será pequena (em geral, usa-se width de 100% para que se adapte à pequenas variações de tamanhos de telas entre smartphones diferentes).
Uma dificuldade estará no servidor para detectar se o usuário está vindo de um dispositivo móvel ou não, e redirecioná-lo para o lugar certo. Isso costuma envolver código no servidor que detecte o navegador do usuário usando o User-Agent do navegador.
É uma boa prática também incluir um link para a versão normal do Site caso o usuário não queira a versão móvel.