Ukrywanie spoilerów

Jakiś czas temu zwrócił się do mnie znajomy z prośbą o jakieś lepsze rozwiązanie - zwijanie elementu w którym znajduje się spoiler i rozwijanie. Wszystko na CSS, bez JavaScriptu. Udało mi się osiągnąć efekt, ale ma on swoje ograniczenia. Żeby nie psuć emocji podczas podawania przepisu na taki „spoiler space” od razu powiem, że w tekście nie mogą być załączone hiperłącza. Rozwiązanie także nie działa na Operze - tylko nie wiem co kuleje bardziej - przeglądarka czy mój koncept. ;) Jednak Gecko i Trident radzą sobie dobrze, ten ostatni po paru hackach.

Przyjmijmy, że mamy parę akapitów tekstu. Jeden z nich będziemy ukrywać przed oglądającym. Po pierwsze muszę podzielić się pomysłem. Otóż spoiler space będzie „znikał” po kliknięciu myszką. Aby dokonać tego w CSS, należy skorzystać z pseudoklasy :focus dla linka <a/>. W dalszej części tekstu będziemy hackować CSS, aby i Internet Explorer poradził sobie z kodem.

Tak więc dodajmy klasę spoilersp do naszego akapitu i obejmujemy tekst w jego środku za pomocą znacznika <a/>. Należy pamiętać, że jeśli chcemy skorzystać z pseudoklasy :focus, element ten musi być hiperłączem - musi mieć atrybut href. Można skorzystać od razu ze sztuczki, dzięki której po kliknięciu nie będzie przewijane okno do góry - wystarczy wpisać dowolną etykietę niewystępującą na stronie. Ja użyłem #notarget. Od razu też dodałem atrybut title wyświetlający gustowną etykiekę po najechaniu spoiler space myszką.

1. <p class="spoilersp">
2. <a href="#notarget" title="Rozwiń spoiler">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at velit sit amet nisl venenatis condimentum. Nulla tincidunt tincidunt ligula. Donec eu lacus sed libero lobortis porttitor. (…) </a>
3. </p>

Etap pisania znaczników się skończył. Teraz należy wziąc się za stylowanie, bo to oczywiście dzięki niemu osiągniemy zamierzony efekt. Do elementu linka wewnątrz ukrywanego akapitu będziemy się dobierać przez regułę .spoilersp a. Przypominam jeszcze raz - podane rozwiązanie nie obejmuje umieszczania linków wewnątrz spoilera. Nawet gdybyśmy wykluczyli nazwami klas te hiperłącza, nie można umieszczać jednego <a/> w drugim. Zaowocowałoby to chociażby przedwczesnym zamknięciem taga i popsuciem funkcjonalności.

Na początek należy zmienić zachowanie naszego spoiler space na element blokowy - display: block. Od razu pojawia się problem z brzydkim podkreśleniem, ale likwidujemy to ustawiając text-decoration na none. Wreszcie sprawiamy, że tekst znika - ustawiamy w CSS jego kolor na identyczny co tła - u mnie #FFF (biały).

1. .spoilersp a {
2. text-decoration: none;
3. display: block;
4. color: #FFF;
5. }

Gdyby zależało nam na umieszczeniu takiego ukrywacza spoilerów na tle z obrazkiem, gdzie nie da się estetycznie ustawić jednokolorowego tła, możemy skorzystać z właściwości CSS3 - opacity i ustawić ją na 0. Rozwiązanie nie zadziała w Internet Explorerze.

Dobrze, mamy ukryty tekst. Ale co dalej? Jak już pisałem, teraz czas na :focus. Przywracamy kolor tekstu (bądź jego nieprzezroczystoć) korzystając ze stanu :focus - uruchamianego podczas zaznaczenia hiperłącza przez kliknięcie, bądź przejście klawiszem Tab.

1. .spoilersp a:focus {
2. color: #000;
3. }

Na tym polega cały trick. Klikamy i możemy przeczytać ukrytą treść. Jednak nie poprzestanę na tym i pokaże jak zwiększyć użyteczność takiego rozwiązania. Ja zapragnąłem, aby schowany blok nie zajmował tyle miejsca co rozwinięty. Skorzystam z pływania elementów, aby wybić je z przepływu wszystkich elementów na stronie, dzięki czemu nie będą zajmowały miejsca. Dodam także dopełnienie aby usunąć z widoku kropkowanie dla hiperłącza oraz zaaplikuję obramowanie na górze i dole, zaznaczając, że znajduje się tutaj element do kliknięcia (i tworząc dodatkowo ciekawy efekt rozwinięcia).

1. .spoilersp {
2. border-top: 5px dashed;
3. border-bottom: 5px dashed;
4. }
5. .spoilersp a {
6. text-decoration: none;
7. display: block;
8. color: #FFF;
9. padding: 0.5em;
10. float: left;
11. }

Teraz w stanie kliknięcia wystarczy usunąć pływanie dla elementu. A żeby schowany spoiler space wyglądał profesjonalnie, ukryję wszystko, co poza niego wystaje za pomocą overflow: hidden.

1. .spoilersp a {
2. text-decoration: none;
3. display: block;
4. color: #FFF;
5. padding: 0.5em;
6. float: left;
7. overflow: hidden;
8. }
9. .spoilersp a:focus {
10. color: #000;
11. float: none;
12. }

Należy także powstrzymać element przed opływaniem innych akapitów.

1. p { clear: both; }

Dla pełni efetu i zrozumienia przez oglądającego stronę gościa, można pokusić się o dodanie obrazka tła (nie za dużego) ze strzałką. Co i czynię:

1. .spoilersp a {
2. text-decoration: none;
3. display: block;
4. color: #FFF;
5. padding: 0.5em;
6. float: left;
7. overflow: hidden;
8. background: url(more.gif) left 10px no-repeat;
9. padding-left: 35px;
10. }

Efekt działa w przeglądarkach z silnikiem Gecko. Rozumieją one doskonale stan :focus i potrafią za jego pomocą zmieniać wartości właściwości CSS. Dobrze, ale co z Internet Explorerem? Nie ma sprawy, możemy go oszukać. Otóż przeglądarka z Redmond nie rozumie stanu :focus, ale kojarzy :active. W sumie można pokusić się o uproszczenie, że :active działa tam tak samo jak :focus. Na co więc czekamy? Skorzystajmy z warunkowych komentarzy dla IE i dodajmy odpowiednie reguły CSS w kodzie, po poprzednich:

1. <!--[if lt IE 7]>
2. <style type="text/css">
3. .spoilersp a {
4. height: 1em;
5. }
6. .spoilersp a:active {
7. color: #000;
8. float: none;
9. height: auto;
10. }
11. </style>
12. <![endif]-->

Użyłem także hacka, aby poprawnie zdefiniować miejsce zajmowane przez element w IE. Dzięki właściwości height udało mi się osiągnąć identyczny efekt jak w przeglądarkach Gecko. Jedynym mankamentem jest fakt, że IE bardzo wolno reaguje na stan :active. Przy większych tekstach będziemy musieli trochę poczekać, aż do elementów zostaną przypisane odpowiednie style.

No a teraz co z tą Operą. Znam jedynie dwa fakty. Po pierwsze Opera wydaje się nie respektować w tym konkretnym przypadku flagi :focus oraz ma problem z określeniem pływania spoiler space. Aby zobaczyć spoiler w Operze, należy zaznaczyć tekst. Magicznie wtedy rozwinie się element ukazując zawartość. Lecz gdy usuniemy zaznaczenie i najedziemy myszką na element, ten schowa się. Zachowanie dziwne; nie chcę wyciągać zbyt daleko idących wniosków, ale nie podoba mi się to.

Tak czy inaczej mamy wreszcie to, co chcieliśmy - spoiler space na miarę XXI wieku. :)