Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RSS iMasters

[Resolvido] Elemento HTML body: como aproveitá-lo melhor

Por , em Desenvolvimento frontend

Recommended Posts

RSS iMasters    5

RSS iMasters
Postado

Eu lhes apresento o elemento body:

    view plaincopy to clipboardprint?

 

<body>

<!-- todo o conteudo do site aqui dentro -->

</body>

Todos nós o conhecemos, mas será que estamos utilizando-o de verdade?

O body é o elemento no nosso documento responsável por ser o container de todo conteúdo do site.

Diferente do <head>, o que está dentro do <body> é oque fica, ou ficará, disponível para a visualização do visitante, como títulos, textos e imagens. Todos nós já usamos o body para isso, mas o que mais podemos fazer com ele?

Pode parecer absurdo falar isso, mas convém lembrar: o body é uma tag HTML; e como tal, aceita atributos: veja! Os mais interessantes são o id e a class.

 

Vocês já tinham colocado um desses no body de algum site?

    view plaincopy to clipboardprint?

 

<body id="home">

Usar o body com um ID

É uma proposta interessante e nos ajuda a economizar alguns elementos de estruturação de layout de vez em quando. Por exemplo, aqueles layouts onde a home do site difere por poucas coisas das páginas internas, como: topo mais alto, ou o rodapé inexistente. Esse tipo de situação de ser facilmente resolvida usando o atributo ID no body.

Sendo a home, estilizamos o topo diferente do que ele seria nas internas:

    view plaincopy to clipboardprint?

 

body#home #header { height: 200px; }

#header { height: 100px; }

A marcação HTML fica intacta e assim evitamos coisas, como #header_home. E isso nos levará a escrever um CSS mais bonito também. Afinal, fizemos um condicional no CSS!

Usar o body com uma ou mais CLASSes

Na verdade, eu comecei explicando o ID, porém hoje em dia, eu prefiro uma CLASS:

 

    view plaincopy to clipboardprint?

 

<body class="home">

E tudo pelo simples motivo de poder usar mais de uma. Com CLASSes, temos todos os benefícios que citei do ID:

    view plaincopy to clipboardprint?

 

body.home #header { height: 200px; }

#header { height: 100px; }

E é possível colocar mais de uma, veja:

    view plaincopy to clipboardprint?

 

<body class="cursos html">

A motivação disso é um menu dropdown.

    view plaincopy to clipboardprint?

 

<li>Cursos

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

</li>

Assim cada página interna teria uma combinação de CLASS para o body diferente:

class="cursos html?, class="cursos css?, class="cursos javascript?. A vantagem disso, é que a class="cursos? é comum a todos eles e no CSS podemos fazer facilmente um destaque naquele item de menu - se estivermos dentro de um dos filhos. Mais uma vez, levamos o poder do CSS à outro nível!

Tendo a CLASS HTML, CSS e sabendo que cada página interna terá somente um título H1, podemos, por exemplo, fazer o H1 ser azul na página de HTML, ser vermelho na página de CSS e ser de qualquer outra cor por padrão, nas páginas em que não definirmos nada.

    view plaincopy to clipboardprint?

 

.html h1 { color: #00f; }

.css h1 { color: #f00; }

h1 { color: #000; }

A grande sacada disso é não precisarmos adicionar nada mais no HTML, além das respectivas classes no body.

O body é pai de todo mundo

Conhecendo o efeito cascata do CSS e sabendo que tudo o que o visitante verá está dentro do body do documento, é melhor usar a herança do CSS para definir os padrões do site, como:

    view plaincopy to clipboardprint?

 

body { font-size: 12px; font-family: Tahoma, sans-serif; color: #333; }

E por que o body? Porque todos os elementos posteriores herdarão dele e isso tudo com uma especificidade bem baixa. Então, não precisamos brigar para sobrescrever estilos.

 

Deve ter ficado implícito, mas quero ressaltar com uma ressalva: todos os elementos, menos os de formulário. Por algum motivo que desconheço, input, select e textarea, não herdam ?naturalmente? as definições de fonte declaradas no body.

    view plaincopy to clipboardprint?

 

body, input, select, textarea {

font-size: 12px; font-family: Tahoma, sans-serif; color: #333;

}

Com isso, cobrimos todas as tags e não estragamos as definições padrões, como: <small> terá uma fonte menor que o body e <h1> continua com uma fonte maior. Por esse motivo que não uso o seletor global * para esse trabalho. Ele aplica a todos os elementos, mas de forma ?forçada?; elemento por elemento. E não por herança como ocorre quando trabalhamos com o body.

A ideia é brigarmos menos com nós mesmos. E só sobrescrever poucas propriedades. Isso é ótimo por uma outra questão: não corremos o risco de ?esquecer? de alguma tag, visto que com uma declaração simples, e aproveitando a herança do CSS, nós a atingimos. Por este motivo não gosto daqueles CSS resets gigantescos e milagrosos - entretanto isso é assunto para um próximo artigp.

O body aceita CSS

Sabe aquele fundo do topo com degradê e aquela linha do header que vai de uma ponta a outra do browser? Então, aplica como background do body. Simples assim! Descartamos a necessidade de um #wrap_header, e jogamos em uma só imagem como background do body, pois ele mesmo já tem de graça para gente, 100% de largura da viewport.

Esse é apenas um exemplo para tentar ?abrir? a mente. As possibilidades são muitas. Às vezes, precisamos rever coisas ?óbvias? ou ?básicas?, pois podem fazer coisas impressionantes.

 

http://imasters.com.br/artigo/23749/css/elemento-html-body-como-aproveita-lo-melhor

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito