Rollover graficznego wypunktowania listy
06 grudnia 2006
Wyobraźmy sobie, że budujemy listę odnośników (dajmy na to menu), której wypunktowania są obrazkami. Po najechaniu myszką na link obrazek zmienia się na inny, dodając interaktywności stronie.
Pokazanie obrazka tła w CSS dla stanu :hover występuje z opóźnieniem, ponieważ przeglądarka nie ściąga tych, które nie są używane. Co przekłada się na zniknięcie jakiejkolwiek ikonki. Wygląda to według mnie nieprofesjonalnie. Co więcej - istnieje kilka sposobów, aby podobnego zachowania uniknąć.
Na początku wypada sprecyzować dwie rzeczy. Nie mam zamiaru wykorzystywać list-style-image oraz li:hover.
Wypunktowanie graficzne ustawione przez list-style-image powinno pokazać się przy pierwszej linijce tekstu takiej pozycji. Jednak przeglądarki różnie ustawiają odstęp takiego obrazka względem tekstu:
Stan :hover będę wykorzystywał tylko razem z linkiem. Powody są dwa. Pierwszy to Internet Explorer 6 i wsparcie dla tej pseudoklasy tylko na hiperłączach. Drugi to kwestia użyteczności. Użytkownik chce kliknąć na link = tekst, więc po najechaniu na niego myszką powinna się zapalić ikonka. Podmiana ikony po najechaniu na nią samą (na wystającą część li) wskazuje, że kliknięcie przeniesie nas dalej. Błąd, bo nie przeniesie - klikamy na li.
Przejdźmy jednak do rzeczy. Udało mi się wypracować trzy sposoby osiągnięcia założenia z początkowych akapitów.
1. Warstwy
Mimo, że metoda warstw wykorzystuje oddzielne obrazki, nie występuje żadne widoczne opóźnienie. Użytkownik jest przyzwyczajony, że obrazki teł doładowują się po wczytaniu strony - jedyne czego nie chcę to wspomnianego laga.
Określam metodę warstwami, ponieważ ustawiłem jedno tło dla li i drugie dla a. Przez odpowiednie manipulowanie odstępem obrazki są jeden nad drugim. Najechanie myszką na link resetuje background i widać tło pozycji listy.
Demo. Odstęp pionowy dla obrazków ustawiłem przez emy, zapewniając trochę lepszy wygląd po zwiększeniu rozmiaru tekstu, w odróżnieniu od pikseli. Proszę pamiętać, że nie można po prostu wstawić 50% albo center. Wtedy ostatnia, wielolinijkowa pozycja miałaby marker w dziwnym miejscu.
Aby pokazać markery w sposób, jakiego byśmy oczekiwali po list-style-position: outside, musiałem nadać im wyświetlanie blokowe. Okej, ale co gdy nie chcesz aby 100% szerokości pozycji menu było klikalne? Użyłem float i dodałem trochę CSS, aby zapanować nad nowym układem. Demo - popatrz w kod, aby prześledzić zmiany.
2. Ujemna pozycja
Technika znana z CSS Rollovers. Sklejamy obrazek w jeden, aby po najechaniu na niego myszką przesunąć o ujemną wartość pikseli, pokazując jego drugą część.
W przypadku listy napotykamy jednak problemy. Użytkownik może dowolnie powiększyć tekst, bądź jego ustawienia ekranu / przeglądarki mogą wymusić przełamanie linii. Metoda ta wymaga przygotowania dość długich obrazków, z zapasem miejsca.
Dużo zależy też od typu listy, którą budujemy. Jeśli wiemy, że szerokość menu jest ograniczona - wykorzystajmy przesuwanie w poziomie. Demo.
Jeśli natomiast jesteśmy pewni, że mała ilość tekstu w linkach nie ma szans wpłynąć na wysokość pozycji listy - użyjmy przesuwania pionowego. Demo.
Wartość przesunięcia to szerokość albo wysokość obrazka minus szerokość albo wysokość ikony. Jeśli chcemy wyrównać ją pionowo do tekstu, należy jeszcze odjąć odstęp pionowy (w przykładzie jest to 3px).
Dodatkowo w takich podatnych na dynamiczne zmiany konstrukcjach polecam ustawić jako stan podstawowy obrazek przesunięty o ujemną wartość. Wtedy w przypadku nieprzyjaznych warunków layout popsuje się w stanie :hover. Możecie to prześledzić, powiększając znacznie tekst w drugim demie.
3. Generowana zawartość
Mimo, że wsparcie dla prawdziwego GC wśród przeglądarek jest mizerne, to jednak opracowałem zestaw hacków dla Explorera i Firefoksa (tak, Fx nieprzeciętnie ssie jeśli chodzi o ten moduł CSS) pozwalające cieszyć się zadowalającym efektem.
Zasada jest prosta. Wszystkim przeglądarkom serwujemy zgodny ze standardami kod, natomiast te na bakier dostają swoje workaroundy. Internet Explorer udostępnia mechanizm komentarzy warunkowych (znany wszystkim webdesignerom ;)) oraz expressions, pozwalające wstrzyknąć JavaScript do CSS-a.
Firefox (Gecko) pozwalają natomiast skorzystać z Extensible Binding Language i dołączyć przez CSS JavaScript dla danego elementu. Wykorzystałem XBL już w poście o text-overflow. Jest to niesamowicie użyteczna opcja, dzięki której możemy poprawiać zachowanie Gecko - jak popsute wyświetlanie generowanej zawartości oraz błąd z listą i display:block.
Na potrzeby tej metody również przygotowujemy sklejony plik tła. Tyle że teraz nie musimy martwić się o jego orientację i szerokość oraz wynikające z tego problemy - po prostu ustawiamy jeden stan obrazka obok drugiego.
Tworzymy więc za pomocą selektora li a::before element blokowy o podanych wymiarach z obrazkiem tła wewnątrz, pozycjonujemy go odnosząc się do li oraz ustawiamy potem na stan :hover przesunięcie tła. Opera sobie radzi, Fx wyczynia cuda na kiju, IE zaniemówił.
Dla nich należy więc utworzyć w JavaScript div z klasą .before, którego selektor dopiszemy do CSS, aby ustawić takie same opcje jak dla ::before. Dla IE będzie to:
li a {-ieh: expression(this.p ? 0 : (ico = document.createElement('div'),ico.className = 'before',this.parentNode.insertBefore(ico, this),this.p = 1),this.parentNode.firstChild.style.backgroundPosition = '0 0');}li a:hover {-ieh: expression(this.parentNode.firstChild.style.backgroundPosition = '-13px 0');}
Dokładnie tego kodu tłumaczyć nie będę, zamierzam przyjrzeć się expressions w jednym z następnych postów. Osoby zaznajomione z DOM na pewno rozpoznają większą część kodu. Czytelnicy śledzący moje posty przypominają sobie na pewno this.p(arsed), blokujące dodawanie divów w nieskończoność. Stan :hover przesuwa obrazek tła dla div.before, a zwykły selektor a przesuwa go na pozycję wyjściową - dzięki czemu całość działa przełącznikowo, a nie tylko raz.
Teraz Firefox. Nie jestem asem XBL, więc musiałem zaingerować w strukturę HTML. Oddzieliłem zgodne ze standardami linijki z GC do nowego pliku CSS i podlinkowałem go w nowym link. W ten sposób mogłem usunąć ten kawałek CSS z pliku XBL, aby nie psuł ostatecznego efektu (pamiętajmy, że Fx rozpoznaje selektory GC i próbuje coś z nimi robić… w tym przypadku bez większych rezultatów).
O samym XBL jednak. Dodać należy go do reguły hiperłącza w liście:
li a {-moz-binding: url("moz-gc-fix.xml#XBLDocument");}
Plik moz-gc-fix.xml (nazwa dowolna) składa się z paru elementów XML i sekcji CDATA, gdzie umieszczamy nasz JavaScript. Całość jest lepszą i bardziej zgodną ze standardami wersją expression dla IE.
Mamy więc (podejrzyjcie kod, aby JS był czytelny) warunek na dodanie tylko raz elementu, wstawienie nowego diva przed link oraz dodanie zdarzeń onmouseover i onmouseout. Na końcu usuwam plik CSS z regułami GC. Demo.
Jeśli wiesz jak to zrobić z poziomu DOM aby nie trzeba było zmieniać JS z każdą nowo dodaną regułą - podziel się wiedzą.
W ten sposób efekt końcowy działa w znacznej części używanych obecnie przeglądarek. Możliwe, że sposób dotarcia do końca wydaje się lekko przekombinowany, ale tak naprawdę jest to prosta implementacja generowanej zawartości z paroma hackami na ociągające się przeglądarki. Dla mnie zdecydowanie najlepsza - uniezależnia nas od tła pod listą (warstwy) oraz jej wymiarów (przesuwanie).
