1. Curso Superior de Tecnologia em Design Gráfico
DWEB - Design para
Web
C Técnicas
“Tu, porém, tens seguido a minha doutrina, modo de viver, intenção, fé, longanimidade, amor, paciência.”
2 Timóteo 3:10
1 Apêndice C - Técnicas Tuesday, 10 de April de 12

2. DWEB - Design para Web / Carlos José
Contato
Carlos José
carlosjose.unibratec@gmail.com
www.carlosjose.net
twitter.com/carlosjoser2n
2 Apêndice C - Técnicas Tuesday, 10 de April de 12

3. DWEB - Design para Web / Carlos José
Objetivo da Aula
n Apresentar as técnicas
para criação de
layout’s na linguagem
de formatação CSS.
3 Apêndice C - Técnicas Tuesday, 10 de April de 12

4. DWEB - Design para Web / Carlos José
Agenda
n CSS Reset
n CSS Hacks
4 Apêndice C - Técnicas Tuesday, 10 de April de 12

5. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Reset:
î Todos os navegadores (browsers) vem com um
CSS interno que traz a forma de exibição dos
elementos HTML.
î O CSS interno define valores para fonts, sizes,
margins, paddings, etc.
î O CSS interno gera anomalias que atrapalham o
desenvolvimento/design,
n atécnica CSS Reset elimina a formatação do CSS
padrão e possibilita um desenvolvimento com mais
controle onde o desenvolvedor/design cria as suas
próprias formatações sem anomalias.
5 Apêndice C - Técnicas Tuesday, 10 de April de 12

6. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Reset:
/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fields
et,p,blockquote,th,td{
margin:0;
padding:0;
}
address,th{
font-style:normal;
font-weight:normal;
}
table{
border-collapse:collapse;
border-spacing:0;
}
caption,th{
text-align:left;
}
img,fieldset{
border:none;
}
ol,ul{
list-style:none;
}
6 Apêndice C - Técnicas Tuesday, 10 de April de 12

7. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Reset by Eric Meyer:
/* http://meyerweb.com/eric/tools/css/reset/ /* HTML5 display-role reset for older browsers */
v2.0 | 20110126 article, aside, details, figcaption, figure,
License: none (public domain) footer, header, hgroup, menu, nav, section {
*/ display: block;
}
html, body, div, span, applet, object, iframe, body {
h1, h2, h3, h4, h5, h6, p, blockquote, pre, line-height: 1;
a, abbr, acronym, address, big, cite, code, }
del, dfn, em, img, ins, kbd, q, s, samp, ol, ul {
small, strike, strong, sub, sup, tt, var, list-style: none;
b, u, i, center, }
dl, dt, dd, ol, ul, li, blockquote, q {
fieldset, form, label, legend, quotes: none;
table, caption, tbody, tfoot, thead, tr, th, td, }
article, aside, canvas, details, embed, blockquote:before, blockquote:after,
figure, figcaption, footer, header, hgroup, q:before, q:after {
menu, nav, output, ruby, section, summary, content: '';
time, mark, audio, video { content: none;
margin: 0; }
padding: 0; table {
border: 0; border-collapse: collapse;
font-size: 100%; border-spacing: 0;
font: inherit; }
vertical-align: baseline;
}
7 Apêndice C - Técnicas Tuesday, 10 de April de 12

8. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Hacks:
î O que são os CSS Hacks?
n CSS Hacks não são mais do que “gambiarras” no
código do css que abusam de erros de renderização
dos navegadores.
n Atualmente a falta de suporte oferecidos pelos
navegadores é um dos maiores problemas no
desenvolvimento de web sites para quem seguem os
Padrões Web.
8 Apêndice C - Técnicas Tuesday, 10 de April de 12

9. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Hacks:
î Para que serve?
n Quando você está criando um layout, e compara o
resultado em vários navegadores, percebe que ficou certo,
mas exclusivamente em um, ficou totalmente diferente.
n Se você mudar o tamanho da div, para fazer funcionar, mas
se você o fizer, vai dar defeito nos outros dois
navegadores que estavam certos.
n Então, O que fazer?
î Os CSS Hacks são uma forma de contornar este problema. De
fato, o navegador que menos suporta os Padrões Web é o
Internet Explorer 6.0 / 7.0 e 8.0
î Os demais navegadores, tanto em suas versões para Windows
quanto para outros Sistemas Operacionais possuem suporte.
9 Apêndice C - Técnicas Tuesday, 10 de April de 12

10. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Hacks:
î Importante
n Sempre que for desenvolver um site de acordo com
os Padrões Web, procure sempre utilizar um
navegador que possua um suporte superior, como o
Opera, Firefox, Chrome ou Safari.
n No fim do desenvolvimento do site, preocupe-se com
a exibição no Internet Explorer.
î É neste momento que começamos a criar o CSS Hack
10 Apêndice C - Técnicas Tuesday, 10 de April de 12

11. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Hacks:
î Inserindo CSS Hacks no documento HTML
n Os CSS Hacks, em primeiro lugar, devem estar
separado do CSS principal, para evitar a confusão e
facilitar a localização e manutenção de determinada
regra.
n Aconselha-se criar um arquivo CSS a parte para
comportar o CSS Hacks.
Exemplo:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/hacks.css" />
</head>
11 Apêndice C - Técnicas Tuesday, 10 de April de 12

12. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Hacks:
î Comentários condicionais
n São uma ótima maneira de passar as instruções
apenas para o Internet Explorer, assim ele possa ler
as regras criadas especificamente para ele.
n As versões do MSIE que suportam comentários
condicionais são as 5.0 até o 9.0.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/
hacks.css" />
<![endif]-->
12 Apêndice C - Técnicas Tuesday, 10 de April de 12

13. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Hacks:
î Comentários condicionais
n Também é possível passar instruções para que o
conteúdo só seja lido por uma versão maior que x ou
igual ou menor que x.
n As instruções são as seguintes:
î gt (greater than): maior que;
î gte (greater than or equal): maior ou igual a;
î lt (lesser than): menor que;
î lte (lesser than or equal): menor ou igual a;
13 Apêndice C - Técnicas Tuesday, 10 de April de 12

14. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Hacks:
î Comentários condicionais
n Abaixopodemos ver como fica a forma de linkar o
CSS para os demais navegadores e para o Internet
Explorer.
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css- href="css/hacks.css" />
<![endif]-->
</head>
14 Apêndice C - Técnicas Tuesday, 10 de April de 12

15. DWEB - Design para Web / Carlos José
CSS: Técnicas
n CSS Hacks:
î Exemplos de CSS Hacks
n Emgeral, os hacks devem ser escritos depois da
propriedade ou regra que quer que se altere, para
impedir que o valor "correto" substitua o valor da
propriedade ou regra "hackeada".
Exemplo:
#all {
width: 300px; /* propriedade declarada que é válida para todos os
navegadores*/
_width: 200px; /* propriedade hackeada que só é válida para o
Internet Explorer*/
}
_width ß não esta errado é para escrever assim mesmo.
Toda propriedade que começar escrita com underline só será interpretada pelo
Internet Explorer, e ignorada pelos demais navegadores.
15 Apêndice C - Técnicas Tuesday, 10 de April de 12

16. DWEB - Design para Web / Carlos José
Perguntas
?
16 Apêndice C - Técnicas Tuesday, 10 de April de 12

17. DWEB - Design para Web / Carlos José
Considerações Finais
Fonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil,
julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição;
http://www.htmldog.com/; http://www.w3schools.com
17 Apêndice C - Técnicas Tuesday, 10 de April de 12