Laboratório de Informática 1 e 2 (2009)

Após a exposição acerca dos seletores do CSS 1.0 na aula passada, nosso objetivo hoje é continuar o trabalho com linguagem de seletores.
Desta vez, os seletores que trabalharemos serão os seletores do CSS 2.1.
Tais seletores são aceitos pela maior parte dos navegadores do mercado. Destaca-se, porém, que o Internet Explorer 6 (ie6) não os suporta e existem alguns problemas de compatibilidade em relação ao Internet Explorer 7 (ie7). Felizmente, o ie8 adota o CSS 2.1 como um padrão permitindo, portanto, um uso mais extensivo deste conjunto de seletores.

Assim, uma prática solução que podemos usar para implementar os seletores do CSS 2.1 no Ie6 e resolver alguns problemas do ie7 é o uso de uma biblioteca de “emulação” de recursos como, por exemplo, a ie7-js .Esta biblioteca exige que se use a linguagem JavaScript, desta forma, não é aplicável em todos os cenários.

Para “transformar” seu ie6 em ie7, cole o seguinte fragmento de código no início da página:

<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js”

type=”text/javascript“></script>
<![endif]–>

Se precisar “transformar” seu ie6 e 8 em ie8, cole o seguinte fragmento de código no início da página.

<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js” type=”text/javascript“></script>
<![endif]–>

Independente do uso de qualquer biblioteca,verifique a tabela de compatibilidade para cada seletor em relação aos navegadores.

Segue, a seguir, os exemplos referentes à aula.

• Seletor universal (*);
• Seletor universal aplicado em CSS Reset;
• Seletor universal aplicado no debug do posicionamento dos elementos;
• Seletor filho (E > F);
• Seletor irmão adjacente (E + F);
• Pseudo-classe dinâmica hover (E:hover);
• Pseudo-classe dinâmica hover aplicada em links;
• Pseudo-classe dinâmica focus (E:focus);
• Pseudo-classe dinâmica focus aplicada em links;
• Pseudo-classe primeiro filho (E:first-child);
• Pseudo-classe lang (E:lang(C));
• Pseudo-elemento before (E:before);
• Pseudo-elemento after (E:after);
• Seletor atributo existente (E[atr]);
• Seletor atributo igualdade (E[atr=val]);
• Seletor atributo igualdade aplicado em itens de formulário;
• Seletor atributo espaço em branco (E[atr~=val]);
• Seletor atributo espaço em branco aplicado à classe;
• Seletor atributo prefixo (E[atr|=val]);
• Exemplo de uso da biblioteca ie7-js.

A seguir, faça o download da apresentação referente a aula (mirror).