Marcus VBP

As recomendações W3C para folhas de estilo estabelecem que qualquer imagem que tenha caráter meramente decorativo devem ser inseridas através de CSS. Isso inclui literalmente todas as imagens que compõe o layout, restando as imagens informativas (que transmitem ou complementam alguma informação na página) para serem inseridas através da marcação HTML <img />.

A técnica de image replacement ou "recolocação de imagem" via folhas de estilo permite exibir uma imagem utilizando CSS, utilizando para isso uma marcação HTML e com a vantagem de que o elemento não perde seu valor textual.

Adicionar e manter um valor textual é importante, mesmo se tratando de imagens, para que a informação contida na página continue relevante para os usuários que não podem acessar aquela informação através de meios visuais (por exemplo, usuários com problemas de visão utilizam navegadores que lêem as informações textuais e ignoram completamente o layout). Além disso, elementos textuais são mais relevantes para mecanismos de busca (outro exemplo de um usuário "cego", só que este não é humano), e estes são responsáveis por uma grande quantidade de tráfego.

Existem muitas maneiras diferentes de executar este truque. A descrita aqui é a adotada pela equipe de desenvolvimento web como sendo a mais simples e funcional.

Um elemento de página em que a técnica está sempre presente, independente do projeto, é o logotipo do site ou empresa que possui o site. Por questões semânticas, toda página de um projeto possui um título HTML <h1></h1> presente no início da página, e por questões de acessibilidade, há um link (definido pela marcação <a></a>) neste título apontando para a página principal do projeto.

Através da técnica de image replacement, a marcação <a></a> será substituída pela imagem logo.jpg, de dimensões 206x134 pixels. Tal feito é realizado pelo bloco de código de folhas de estilo a seguir:

A melhor forma de compreender o código acima é compreender o conceito por trás dele. Primeiro, elimina-se as margens padrão do título <h1></h1> para evitar qualquer tipo de interferência. Depois, é necessário mudar a forma de como a marcação <a></a> se comporta. Por padrão, este elemento é do tipo inline, ou seja é aplicado a um texto e segue o fluxo normal do mesmo. Ao contrário dos elementos de bloco, que quebram o fluxo normal do texto, isolando-o. Um exemplo clássico são as marcações de parágrafo (<p></p>) e as próprias marcações <DIV></DIV>, que criam blocos isolados de informação.

Marcações inline não permite aplicar propriedades CSS de controle de dimensões sobre elas, mas marcações do tipo block, sim. A alteração de tipo de comportamento é feita aplicando o valor block ao atributo CSS "display".

Exibir uma imagem em um elemento que contém texto é muito simples, basta fazer uso da propriedade de folha de estilo background-image (ou sua forma abreviada, background) e aplicar a imagem como um fundo. Quando se fizer uso desta técnica, é essencial que a imagem de fundo não se repita, e isso é feito aplicando o valor no-repeat à propriedade background ou background-position. As dimensões do elemento que contém a imagem devem ser iguais à da imagem que se quer inserir, que neste caso, possui 206x134 pixels de dimensões.

O problema é se livrar do texto contido no elemento, que ficará sobrepondo a imagem inserida.

Quando um elemento qualquer possui dimensões fixas e por acaso o texto ou conteúdo contido nele ultrapassa suas dimensões, este conteúdo naturalmente "vaza" para fora do elemento. É possível controlar a forma como os elementos HTML tratam este conteúdo estravazado através da propriedade de folhas de estilo overflow. É possível por exemplo,
adicionar uma barra de rolagem caso o conteúdo estravaze as dimensões do seu contêiner (overflow com valor igual à auto), ou adicionar uma barra de rolagem sempre, independente da quantidade de conteúdo ou não (overflow com valor igual à scroll).

Mas o valor de overflow que importa para a técnica é hidden, que faz com que elementos estravazados sejam parcialmente ou não sejam exibidos.

Compreendido isso, é necessário descobrir uma forma de "empurrar" o elemento textual para fora das dimensões do elemento sem que suas dimensões finais se alterem. Isso será feito aplicando os conceitos de modelo de caixa CSS.

As dimensões finais desejadas para o elemento formatado são iguais às dimensões da imagem, ou seja, 206x134 pixels. A largura é irrelevante, e não será alterada (o valor de width será 206px). Mas a altura, será igual a zero (ou seja, height: 0). Em seguida aplica-se uma borda interna superior de valor igual à altura da imagem (padding-top: 134px). De acordo com o modelo de caixa, a altura final é a soma da altura mais os valores das
propriedades margin, padding e border-width. No exemplo em questão, é 134+0=134px, exatamente o valor da altura da imagem. Ao mesmo tempo, a margem interna superior empurra a informação textual contida no elemento para fora de sua altura (que é zero).

O resultado final é uma imagem inserida no layout via folhas de estilo, aplicado à uma marcação <a></a>, sem que esta perdesse sua funcionalidade de hyperlink.