kedvenc szöveghelyettesítési technikám

Gyakori probléma, hogy vagy valamilyen egzotikus betűtípust szeretnénk használni a címsorok helyett vagy rögtön valamilyen képet. A probléma gyakorlatilag egyidős az internettel (de legalábbis a Netscape-pel) és rengeteg megoldás látott már eddig is napvilágot. Tökéletesnek egyik IR (Image Replacement) eljárás sem nevezhető, vagy keresőmotor-optimalizálás szempontból vagy bizonyos technológiai megkötésekből mindegyiknek van gyenge pontja, épp ezért szinte mindegyik technikának van létjogosultsága is. Egészen biztosan sok erre vonatkozó ötletet és tippet fogok idővel bemutatni, köztük lesz valószínűleg egy fordítása is Chris Coyier cikkének, melyben 9 css alapú képcsere technikát mutat be és hasonlít össze.

Most viszont egy olyan verziót fogok ismertetni, ami nem szerepel Chris cikkében és ami az én személyes kedvencem: A Malarkey metódust (MIR).

Hogy miért ez a kedvencem? Mert végtelenül egyszerű és szinte minden böngészőben működik. Először is semmilyen hozzáadott HTML tag-re, semmilyen JavaScriptre vagy Flash meghívására nincs szükség. Egyetlen hátránya, hogy bekapcsolt css és kikapcsolt képekkel való böngészés esetén nem látszik sem a szöveg, sem a kép. Keresőmotorok és felolvasó programok viszont minden további gond nélkül megtalálják az eredeti szöveget.

És a megoldás: az elrejteni kívánt szövegre, alkalmazzunk egy negatív betűtávolságot. Ha minden "mir" osztályú elem helyett a "replace.jpg" képet szeretnénk megjeleníteni, ahhoz a következő css stílust kell létrehozni:

.mir {letter-spacing: -1000em; background-image: url(replace.jpg);}

És hogy milyen böngészőkön működik? Csak egy rövid lista még 2007-ből:

  • Windows Firefox, Mozilla 1.6
  • Windows Internet Explorer 6, Internet Explorer 5.5, Internet Explorer 5.0
  • Windows Netscape 8, Netscape 7.1
  • Mac Firefox
  • Mac Safari
  • Mac Internet Explorer

Talán sokaknak feltűnt, hogy az Opera nem szerepel a listában. Ez sajnos egy Opera bug miatt van, aminek gyors-javítása pedig az Internet Exploreres megjelenítést elrontja Macintosh alatt, ezért egy olyan hacket kell használni, ami csak az Operát célozza meg. Ezzel a hackkel együtt a teljes kód a következő:

.mir { letter-spacing : -1000em; }
/* Just for Opera, but hide from MacIE */
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* End of hack */
Címkék: seo css tipográfia

A bejegyzés trackback címe:

https://szajtbilder.blog.hu/api/trackback/id/tr621411990

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.