Unb 2012.1 - dweb - c - técnicas

1 Tuesday, 10 de April de 12

Curso Superior de Tecnologia em Design Gráfico

Apêndice C - Técnicas

C Técnicas

DWEB - Design para Web

“Tu, porém, tens seguido a minha doutrina, modo de viver, intenção, fé, longanimidade, amor, paciência.” 2 Timóteo 3:10

DWEB - Design para Web / Carlos José

2 Tuesday, 10 de April de 12 Apêndice C - Técnicas

Contato

Carlos José

[email protected] www.carlosjose.net

twitter.com/carlosjoser2n



Objetivo da Aula

n Apresentar as técnicas para criação de layout’s na linguagem de formatação CSS.



Agenda

n CSS Reset n CSS Hacks



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  a té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.



n CSS Reset: /* CSS Reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,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; }

CSS: Técnicas



n CSS Reset by Eric Meyer: /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;

}

CSS: Técnicas

/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

display: block; } body {

line-height: 1; } ol, ul {

list-style: none; } blockquote, q {

quotes: none; } blockquote:before, blockquote:after, q:before, q:after {

content: ''; content: none;

} table {

border-collapse: collapse; border-spacing: 0;

}



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.

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.

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

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.

CSS: Técnicas

Exemplo: <head> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/hacks.css" /> </head>



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.

CSS: Técnicas






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;

CSS: Técnicas




n  Abaixo podemos ver como fica a forma de linkar o CSS para os demais navegadores e para o Internet Explorer.

CSS: Técnicas

<head> <link rel="stylesheet" type="text/css" href="css/style.css" />  </head>



n CSS Hacks: î Exemplos de CSS Hacks

n  Em geral, 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".

CSS: Técnicas

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.



Perguntas

?



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

Documents

Unb 2012.1 - dweb - c - técnicas