Elemento HTML body: como aproveitá-lo melhor
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.
Trabalha como Desenvolvedor FrontEnd, nos horários em que não está estudando Matemática na faculdade ou escrevendo posts para o seu blog pessoal.
