CSS-bildbyte

CSS-bildersättning är en webbdesignteknik som använder Cascading Style Sheets för att ersätta text på en webbsida med en bild som innehåller den texten. Det är avsett att hålla sidan tillgänglig för användare av skärmläsare , webbläsare med endast text eller andra webbläsare där stöd för bilder eller stilmallar antingen är inaktiverat eller obefintligt, samtidigt som bilden kan skilja sig åt mellan stilarna. Även kallad Fahrner-bildersättning för Todd Fahrner, en av personerna som ursprungligen krediterades med idén om bildersättning 2003.

Motivering

Den typiska metoden för att infoga en bild i ett HTML- dokument är via taggen <img> . Denna metod har sina nackdelar med avseende på tillgänglighet och flexibilitet, dock:

• Även om alt- attributet är utformat för att tillhandahålla en textrepresentation av bildinnehållet, utesluter detta användningen av HTML-uppmärkning i textrepresentationen och orsakar problem [ med vissa sökrobotar.
• Att använda <img> -taggen för att visa text är presentationsmässigt; många webbdesigners hävdar att presentationselement bör separeras från HTML-innehåll genom att placera det förstnämnda i en CSS-stilmall.
• Bilder som refereras med en <img> -tagg kan inte enkelt ändras via CSS, vilket orsakar problem med alternativa stilmallar.

Fahrner-bildbyte utarbetades för att åtgärda dessa problem.

Genomföranden

Den ursprungliga Image Replacement-implementeringen som beskrevs av Douglas Bowman använde en rubrik, inuti vilken var ett <span> -element som innehöll rubrikens text:

  <  h3  id  =  "firHeader"  ><  span  >  Exempelrubrik  </  span  ></  h3  > 

Genom stilmallar fick rubriken sedan en bakgrund som innehöll den önskade bilden och <span> gömdes genom att sätta dess display CSS-egenskap till none :

   
   
       


 

   
 #  firHeader  {  bredd  :  300  px  ;  höjd  :  50  px  ;  bakgrund  :  #fff  url  (  firHeader.gif  )  övre  vänstra  no-repeat  ;  }  #  firHeader  span  {  display  :  none  ;  } 

Det upptäcktes dock snart att den här metoden fick vissa skärmläsare att hoppa över rubriken helt, eftersom de inte skulle läsa någon text som hade en display - egenskap på ingen . Den senare Phark-metoden , utvecklad av Mike Rundle 2003, använde istället text-indent- egenskapen för att trycka ut texten från bildens område, vilket åtgärdade detta problem:

   
   
    
 #  firHeader  {  bredd  :  300  px  ;  höjd  :  50  px  ;  text-indent  :  -5000  px  ;  /* ← Phark */  } 

Phark-metoden hade dock sina egna problem; i visuella webbläsare där CSS var på men bilder av, skulle ingenting visas.

Också 2003 löser Dave Sheas självbetitlade Shea-metod båda de tidigare nämnda problemen, till priset av en extra <span> :

  <  h3  id  =  "header"  ><  span  ></  span  >  Reviderad bildersättning  </  h3  > 

Genom att absolut placera en tom <span> över textelementet döljs texten effektivt. Om bilden inte kan laddas visas texten bakom den fortfarande. Av denna anledning kan bilder med transparens inte användas med Shea-metoden.

   
   
   


 

    
   
   
   
 #  header  {  bredd  :  329  px  ;  höjd  :  25  px  ;  position  :  relativ  ;  }  #  header  span  {  background  :  url  (  firHeader.gif  )  no-repeat  ;  position  :  absolut  ;  bredd  :  100  %  ;  höjd  :  100  %  ;  } 

Över ett dussin olika metoder har sedan dess utvecklats med varierande grad av kompatibilitet och komplexitet.

externa länkar

• Revised Image Replacement – ​​en översikt över de olika FIR-teknikerna av Dave Shea
• Ultimate Image Replacement – ​​en omfattande bildersättningsteknik av Jesse Schoberg