Dzisiaj krótki post na temat metody ukrywania elementów na stronie Off Left. Postanowiłem o niej napisać zainspirowany tym wpisem na temat chmury tagów, do zaprojektowania której autor użył właśnie metody Off Left.

Off Left – instrukcja obsługi

Metoda Off Left jest wyjątkowo prosta w użyciu. Element, który chcemy ukryć, pozycjonujemy bezwzględnie (position:absolute;) względem dokumentu, a następnie przesuwamy go w lewo o bezpieczną ilość pikseli, czyli taką ilość, która zagwarantuje, że element wyjedzie poza widoczny obszar i w efekcie nie będzie widoczny:

 .offLeft {
    position: absolute;
    left: -1000px;
 }

Prawda, że proste?

Hidden:none, czyli o przewadze Off Left

Wiadomo, że niepożądane elementy na stronie można ukryć za pomocą CSS stosując visibility:hidden – wówczas element jest niewidoczny, ale zajmuje przestrzeń w układzie strony, lub display:none – wówczas element jest niewidoczny i nie zajmuje przestrzeni w układzie strony. Obie metody są stosowane na różnych stronach, przede wszystkim jednak stosowany jest display:none, jako że chcąc ukryć element z reguły naprawdę chcemy się go pozbyć ze strony zamiast fundować sobie piękną, nikomu niepotrzebną białą przestrzeń.

Oba sposoby mają dwie podstawowe wady. Pierwszą z nich jest to, że podobno mogą spowodować represje ze strony Google. Piszę podobno, bo nikt nie wie tego na pewno. Generalnie snute są rozmaite teorie na ten temat – jedni twierdzą, że ban to fakt, inni, że niekoniecznie. Ja twierdzę, że jest to możliwe w pewnych przypadkach, ale na pewno nie zawsze (i wiem to z autopsji). Jak jest naprawdę – wie tylko wujek Google.

Drugą wadą jest to, że elementy schowane za pomocą visibility:hidden i display:none nie są widoczne dla wszelakiej maści screen-readerów, co może znacząco wpłynąć na accessibility naszej strony. I chyba właśnie ten problem był impulsem dla Choana Gálveza i Matthew Washingtona, którzy zdaje się autorami metody.

Reasumując – chcąc ukryć element na stronie, jeśli to możliwe, stosujcie metodę Off Left. Ja tymczasem, pełen skruchy, lecę poprawić mój wpis o wielopoziomowym menu, bo chyba wyszedłem na hipokrytę.

Podobne wpisy: