Znikający kursor za pomocą CSS
Filed Under (informatyka) by Tomek on 20-07-2009
Dzisiaj przedstawiam sposób na ukrycie kursora na naszej stronie za pomocą CSS.
Specyfikacja CSS2 podaje dla własności cursor następujące możliwe wartości (po najechaniu na wartość, pojawi się przypisany jej w Twojej przeglądarce kursor):
- URL — oddzielona przecinkami lista URL-i do plików z kursorami, najlepiej zakończona którąś z poniższych wartości
- auto — domyślna wartość — przeglądarka sama ustawia kursor
- crosshair
- default
- e-resize
- help
- move
- n-resize
- ne-resize
- nw-resize
- pointer
- progress
- s-resize
- se-resize
- sw-resize
- text
- w-resize
- wait
- inherit — wygląd dziedziczony po elemencie nadrzędnym
Niestety, nie ma tu interesującego nas parametru braku kursora.
W propozycjach do specyfikacji CSS3 dodano kolejnych kilka kursorów:
- alias
- all-scroll
- cell
- copy
- context-menu
- no-drop
- none
- not-allowed
- nwse-resize
- col-resize
- row-resize
- vertical-text
Jak widać, tu już występuje interesujący nas parametr none. Problem w tym, że z przeglądarek, na których przeprowadziłem testy (Internet Explorer 6, 7 i 8, Chrome, Safari 4, Opera 9.64, Firefox 3.0.11), tylko FF obsługuje tę opcję. Obejściem tego problemu jest wykorzystanie specjalnie stworzonego pliku kursora blank.cur będącego jednopikselowym, przeźroczystym plikiem. Aby uzyskać niewidoczny kursor w jak największej liczbie przeglądarek, używamy w CSS stylu:
-
element
-
{
-
cursor: url(blank.cur), none;
-
}
Pierwsza wartość pozwoli nam na ustawienie przeźroczystego kursora w przeglądarkach nie obsługujących wartości none, a none schowa kursor w Firefoxie. Rozwiązanie to nie działa, niestety, w Operze (która nie obsługuje żadnej z tych wartości), a tylko częściowo działa w Chromie (zamiast przeźroczystości wyświetlana jest czerń — z tego względu stworzyłem 1×1px obraz kursora, aby jego widoczność w Chromie była jak najmniejsza).
Kiedy (jeżeli) CSS3 wejdzie w życie, wszystkie przeglądarki powinny obsługiwać już atrybut none i będzie on wystarczający do działania.
lepiej dac kazdej przegladarce
cursor: url(‘blank.cur’);
i dziala pod opera rowniez.
skoro tylko ff to chwilowo obsluguje to nie ma co sie bawic w takie hacki
U mnie w Operze nie działała ani opcja z url, ani z none, a dodanie przyszłościowo none nic nie psuło, stąd taka propozycja.
A w warstwie ideologicznej, bardziej do hacków zaliczyłbym użycie przeźroczystego kursora niż opcji wciśniętej specjalnie po to do (wprawdzie nieobsługiwanej w pełni chyba nigdzie, ale to szczegół ;-)) specyfikacji.