@codenerd på twitter Mit seneste tweet:

CSS: Alternativ til display:none

Af og til ønsker man at skjule noget indhold, enten for at senere kunne aktivere det, eller for at give semantisk betydning. Hertil anvender de fleste (inkl jeg selv) nok display:none; og dette virker jo også helt efter hensigten, elementet ses ikke på skærmen, og der er ingen ekstra margin eller padding. Dette er også fint nok, men når det kommer til tilgængelighed giver display:none; problemer. Undersøgelser har vist at de større skræmoplæsere simpelthen ignorerer indhold som tildeles display:none; og dette kan jo være problematisk, derfor ser vi her på to alternative løsninger.

En af de nemmeste løsninger er simpelthen at placere indholdet absolut og med en negativ left – på den måde gives ingen ekstra mellemrum og indholdet er forsvundet fra "skærmen":

Til venstre med skidtet

PHP
1
2
3
4
.semantik {
    left:-1000em;
    position:absolute;
}

Med en placering på -1000em bør der ikke være nogle skærme elementet sådan lige dukker op på :D

Gem det på sin plads

En anden løsning er at sætte højde og bredde til 0 samt overflow:none; dette burde jo lave et element der ikke fylder noget men står på sin plads. Det er dog nødvendigt med en margin på 0 af hensyn til IE og dette er stadig ikke nok, da Firefox insisterer på at påtvinge en form for margin eller padding lige gyldigt hvad, når man anvender denne teknik, så det er stadig nødvendigt med position:absolute for at undgå dette:

PHP
1
2
3
4
5
6
7
.semantik {
    overflow:hidden;
    width: 0;
    height: 0;
    margin: 0;
    position:absolute;
}

Eksempel med første løsning

Skriv en kommentar

Krævede felter er markeret med *.

*