substituição de imagem Fahrner - Fahrner image replacement

Substituição de imagem Fahrner (abreviado FIR ) é uma técnica de design da Web que usa Cascading Style Sheets para substituir o texto em uma página da Web com uma imagem que contém esse texto. Destina-se a manter a página acessível aos usuários de leitores de tela , somente texto navegadores web , ou outros navegadores, onde o suporte para imagens ou folhas de estilo está desativado ou inexistente, permitindo que a imagem que diferem entre os estilos. FIR é nomeado para Todd Fahrner, uma das pessoas originalmente creditado com a idéia de substituição de imagem.

Motivação

O método típico de inserir uma imagem em um HTML documento é através do <img>tag. Este método tem suas desvantagens no que diz respeito à acessibilidade e flexibilidade, no entanto:

• Enquanto o altatributo é projetado para fornecer uma representação textual do conteúdo da imagem, isso impede o uso de marcação HTML na representação textual e causa problemas com alguns robôs de busca.
• Usando a <img>tag para mostrar texto é de apresentação; Muitos web designers argumentam que elementos de apresentação deve ser separado do conteúdo HTML, colocando a primeira em uma folha de estilo CSS.
• Imagens referenciados usando uma <img>tag não podem ser facilmente alterados via CSS, causando problemas com folhas de estilo alternativas.

substituição de imagem Fahrner foi concebido para corrigir esses problemas.

implementações

A implementação FIR original descrita por Douglas Bowman utilizado uma posição, dentro do qual havia um <span>elemento que contém o texto do título:

<h3 id="firHeader"><span>Sample Headline</span></h3>

Através de folhas de estilo, o título foi dado então um fundo que contém a imagem desejada, eo <span>oculto, definindo sua displaypropriedade CSS para none:

#firHeader
{
  width: 300px;
  height: 50px;
  background: #fff url(firHeader.gif) top left no-repeat;
}

#firHeader span
{
  display: none;
}

Ele logo foi descoberto, no entanto, que este método causou alguns leitores de tela para pular o título inteiramente, como eles não iria ler qualquer texto que tinha uma displaypropriedade de none. Quanto mais tarde método Phark , desenvolvido por Mike Rundle , em vez usou a text-indentpropriedade para empurrar o texto para fora da área da imagem, abordar esta questão:

#firHeader
{
  width: 300px;
  height: 50px;
  text-indent: -5000px; /* ← Phark */
}

O método Phark tinha seus próprios problemas, no entanto; em navegadores visuais, onde CSS foi, mas as imagens fora, nada seria exibido.

Dave Shea homônimo 's método Shea resolve ambos os problemas anteriormente mencionados, ao custo de um extra <span>:

<h3 id="header"><span></span>Revised Image Replacement</h3>

Por absolutamente posicionar um vazio <span>sobre o elemento de texto, o texto é efetivamente escondido. Se a imagem não for carregado, o texto por trás dele ainda é exibido. Por esta razão, imagens com transparência não pode ser usado com o método Shea.

#header
{
  width: 329px;
  height: 25px;
  position: relative;
}

#header span
{
  background: url(firHeader.gif) no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
}

Referências

links externos

• Revisto Substituição de imagem  - uma visão geral das várias técnicas FIR por Dave Shea
• Final Substituição de imagem  - uma técnica de substituição de imagem abrangente por Jesse Schoberg