Grátis
23 pág.

Denunciar
Pré-visualização | Página 2 de 2
Mac, e sim para ser funcional ao Internet Explorer para PC´s (Personal computers). Unidade 3: Folhas de Estilo (CSS) Hacks CSS • Somente o Internet Explorer irá entender os Hacks CSS, pois ele é o único que ao visualizar um página web, primeiramente “varre” todo o código a procura de erros e caso os encontre tenta concertar e exibir da melhor forma possível a página. • Que navegador maravilhoso? Nada disso não se engane! Isso o torna mais lento na navegação e oculta muito erros que podem ter em sua página. Resultado você estará colaborando, sem saber, contra os Web Standards. • Outra coisa é que o Internet Explorer insiste em não compreender as regras de CSS. Unidade 3: Folhas de Estilo (CSS) Hacks CSS • Conclusão, é por esse motivo que no Curso de Design para WEB iremos utilizar o Mozilla Firefox para testar nossas web páginas, não iremos descartar o IE6 ou IE7 (infelizmente), mas usaremos o FireFox como nosso amigo inseparável. • Aplicar Hacks CSS é muito simples, funciona assim: O código CSS que O FireFox entende perfeitamente e o IE6 ou IE7 não entende, causando alterações no layout, então criaremos um erro no código CSS que o IE foi erro de digitação, assim automaticamente o corrige fazendo que o layout seja corrigido e exibido corretamente. Unidade 3: Folhas de Estilo (CSS) Hacks CSS • Vamos ao Hack CSS: O que essa regra que dizer é que tudo será aplicado aos elementos HTML descentes de *, ele seleciona todos os elementos filho e descendendes de HTML. O Firefox e o Opera ignoram qualquer regra que comece com * html, sem exceção, mas somente o IE6 a interpreta normalmente o IE7 NÃO. Peguemos o seguinte código: O resultado disso seria que todos H1, filhos de body e de HTML teriam a cor azul. No Firefox e no Opera não ocorre nada. Unidade 3: Folhas de Estilo (CSS) *html { color: red; } *html body h1 { color: red; } Hacks CSS Além do seletor universal (*) temos outros caracteres que nos auxiliam na correção de bugs do IE6 e IE7. Para o IE6 usaremos o “_” (underline) e “@” (arroba) para o IE7, ficaria assim: Como o browser faz a leitura do CSS em cascata, coloca-se primeiro o Hack para o IE7 e se necessário depois para o IE6, pois o IE6 interpreta o CSS diferente do IE7 por isso em alguns casas é necessário utilizar o “@” e “_”. NOTA: IE7 interpreta somente o “@”. Unidade 3: Folhas de Estilo (CSS) body { color: red; @color: blue; _color: blue; } Exercício: Vamos a um exercício básico: abra no DreamWeaver este arquivo e observe o seu comportamento no FireFox e no IE7. Agora edite o seu código e retire as tags de comentário do CSS. Unidade 3: Folhas de Estilo (CSS) Slide Number 1 Unidade 3� Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS) Unidade 3: Folhas de Estilo (CSS)