Brug ikke -9999px hacket!

Det har været meget almindeligt at bruge -9999px hacket til at skjule tekst – lad være med det! Teknikken er ofte brugt i situationer, hvor man gerne vil erstatte noget tekst med grafik. Det kan for eksempel være i et tema, hvor man ønsker at skjule webstedet titel og i stedet vise et logo.
Hvad er -9999px hacket, spørger du måske?
Kort fortalt, så er det en metode til at bruge CSS til at skjule tekst ved at tildele det en bestemt layout-klasse. Man flytter ganske enkelt teksten 9999 pixels til den ene side; hvilket i praksis vil sige udenfor skærmens ‘synsfelt’, da selv meget store skærme ikke kan vise mere end 3000 pixels i bredden. Koden kan for eksempel se sådan ud:
.the-trick {
  display: inline-block;
  position: relative;
  right: -9999px; }
Hele blokken med teksten flyttes altså. Men her opstår så problemet. For hvis browseren skal kunne flytte teksten 9999px til den ene side, så skal der altså også skabes en kasse, der er 9999px bred, og det bruger af browserens ressourcer. Det kan især ses på tablets som iPads, der har begrænsede ressourcer og derfor kommer til  at halte, hvis den skal håndtere både animationer og så store bokse. Og hvis teknikken så bruges flere gange i for eksempel en tabel, hvor man vil udskifte tekst med et ikon – så bliver der dannet sådan en kasse for hver brug af typografien!

Et bedre alternativ

En bedre løsning er at flytte teksten lige præcis udenfor browserens rækkevidde, og så skjule at, der er mere at se.
 .the-better-trick {  
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden; }
Sådan, ikke mere overflødig plads og verden (eller i hvert fald Interwebbet) er blevet et bedre sted at være!    

Del det bare:

Del på facebook
Del på twitter
Del på linkedin
Del på email
ellegaard

ellegaard

Uddannet underviser, IT-administrator og nørd. Har arbejdet med design og udvikling af WordPress-løsninger siden 2005.