unidade 43
23 pág.

unidade 43


DisciplinaAnálise Textual9.254 materiais293.536 seguidores
Pré-visualização2 páginas
Mac, 
e sim para ser funcional ao Internet Explorer para PC´s (Personal
computers). 
Unidade 3: Folhas de Estilo (CSS)
Hacks CSS
\u2022 Somente o Internet Explorer irá entender os Hacks CSS, pois ele 
é o único que ao visualizar um página web, primeiramente 
\u201cvarre\u201d todo o código a procura de erros e caso os encontre 
tenta concertar e exibir da melhor forma possível a página.
\u2022 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.
\u2022 Outra coisa é que o Internet Explorer insiste em não 
compreender as regras de CSS.
Unidade 3: Folhas de Estilo (CSS)
Hacks CSS
\u2022 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.
\u2022 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
\u2022 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 \u201c_\u201d (underline) e \u201c@\u201d 
(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 \u201c@\u201d e \u201c_\u201d. 
NOTA: IE7 interpreta somente o \u201c@\u201d.
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\ufffd 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)