Fahrner bildeutskiftning - Fahrner image replacement

Fahrner image erstatning (forkortet FIR ) er en nettdesignteknikk som bruker Cascading Style Sheets for å erstatte tekst på en webside med et bilde som inneholder teksten. Den er ment å holde siden tilgjengelig for brukere av skjermlesere , nettbaserte nettlesere som bare er tekst eller andre nettlesere der støtte for bilder eller stilark enten er deaktivert eller ikke-eksisterende, samtidig som bildet lar seg skille mellom stiler. FIR er oppkalt etter Todd Fahrner, en av personene som opprinnelig ble kreditert ideen om bildebytte.

Motivasjon

Den typiske metoden for å sette inn et bilde i et HTML- dokument er via <img>taggen. Denne metoden har sine ulemper med hensyn til tilgjengelighet og fleksibilitet, men:

• Selv om altattributtet er designet for å gi en tekstlig fremstilling av bildeinnholdet, utelukker dette bruk av HTML-markering i tekstrepresentasjonen og forårsaker problemer med noen søkeroboter.
• Å bruke <img>taggen for å vise tekst er presentasjonsfull; mange nettdesignere hevder at presentasjonselementer bør skilles fra HTML-innhold ved å plassere førstnevnte i et CSS-stilark.
• Bilder som refereres til ved hjelp av en <img>tag kan ikke lett endres via CSS, noe som forårsaker problemer med alternative stilark.

Fahrner bildeutskiftning ble utviklet for å rette opp i disse problemene.

implementeringer

Den opprinnelige FIR-implementeringen beskrevet av Douglas Bowman brukte en overskrift, der innsiden var et <span>element som inneholder teksten til overskriften:

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

Gjennom stilark fikk overskriften deretter en bakgrunn som inneholder ønsket bilde, og <span>skjult ved å sette displayCSS-egenskapen til none:

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

#firHeader span
{
  display: none;
}

Det ble imidlertid raskt oppdaget at denne metoden fikk noen skjermlesere til å hoppe over overskriften helt, da de ikke ville lese noen tekst som hadde en displayegenskap av none. Den senere Phark-metoden , utviklet av Mike Rundle , brukte i stedet text-indentegenskapen til å skyve teksten ut av bildets område, og adressere dette problemet:

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

Phark-metoden hadde imidlertid sine egne problemer; i visuelle nettlesere der CSS var på, men bilder av, ville ingenting vises.

Dave Sheas eponymous Shea-metode løser begge problemene tidligere nevnt, til bekostning av et ekstra <span>:

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

Ved absolutt å plassere et tomt <span>over tekstelementet, skjules teksten effektivt. Hvis bildet ikke lastes, vises teksten bak det fremdeles. Av denne grunn kan bilder med åpenhet ikke brukes med Shea-metoden.

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

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

referanser

Eksterne linker

• Revised Image Replacement  - en oversikt over de forskjellige FIR-teknikkene fra Dave Shea
• Ultimate Image Replacement  - en omfattende bildebytte teknikk av Jesse Schoberg