This post comes from the first version of this blog.
Please send me an email if anything needs an update. Thanks!

Robiąc w wolnej chwili małe poprawki do strony dla jednego z klientów natknąłem się w pewnym momencie na punkt na liście, który nie do końca był dla mnie jasny. Głosił on bowiem “wszem i wobec”, że mam “skasować obramowania linków”. Lekko zdziwiony [bo żadnych obramowań nie dodawałem] zajrzałem na stronę, kliknąłem w jeden z linków i poza zwyczajnym kreskowanym obramowaniem które przeglądarka dorzuca do każdego klikniętego linku nic nie zauważyłem. Zapytałem więc grzecznie “o co chodzi” i po chwili dostałem odpowiedź, że mam usunąć “właśnie to” obramowanie. Ze względu, że byłem wtedy sam w pokoju, na szczęście nikt nie zauważył mojego “zdziwienia x2”. Myślę sobie - cóż, nasz klient, nasz Pan - zabrałem się więc do pracy.

Wstęp.

Wiem, że rozwiązanie dzisiejszego problemu może być dla wielu trywialne, ale muszę Wam powiedzieć, że po raz pierwszy spotykam się z taką prośbą - nikomu wcześniej te obramowania nie przeszkadzały, do tego stopnia, że nigdy się nawet nie zastanawiałem nad tym, dlaczego cokolwiek pojawia się na nich podczas klikania / przeciągania. Jak to mówią - człowiek uczy się całe życie, a ze względu na niezaprzeczalny fakt przynależności do gatunku homo sapiens [sapiens ;]], uczę się i ja.

Co w takim wypadku się dzieje? Otóż, domyślnym zachowaniem przeglądarki w przypadku wyświetlania linku jest dodanie pewnego wyglądu, który sugeruje użytkownikowi, w jakim stanie się on aktualnie znajduje. Rozumiem przez to zarówno link aktywny, jak i odwiedzony / “najechany” / itp. O ile większość “normalnych” elementów wyglądu tych stanów można z powodzeniem obsłużyć za pomocą odpowiednich atrybutów takich jak np. “border” w znanych wszystkim pseudoklasach CSS zaaplikowanych do elementu “a”, o tyle w przypadku kliknięcia, bądź aktywowania elementu za pomocą wielokrotnego wykorzystania klawisza [Tab] sprawa nie jest już tak prosta.

Rozwiązanie.

Sprawa nie jest też znowu taka trudna, bez obaw. ;] Kwestia tego, że jak zwykle, trzeba po prostu "wiedzieć" co zrobić - zdrowy rozsądek ani logika nam tego niestety nie podpowie. Jak zapewne wiecie, w CSS nie ma czegoś w stylu "onclick" znanego z języka JavaScript. Nie mówię tu oczywiście o emulowaniu tego stanu za pomocą hacków wykorzystujących np. kombinację pseudoklas :focus i :hover, ale o bezpośrednim ustawieniu wartości dla klikniętego elementu.

Co zatem powinniśmy zrobić, żeby się rzeczonego obramowania pozbyć, a klient był zadowolony? Z pomocą przychodzi atrybut CSS o nazwie “outline”. Ogólnie mówiąc, atrybut ten określa wygląd właśnie takiego “klikniętego” lub “aktywowanego” elementu. Szybko wklepujemy więc w nasz arkusz stylów poniższą linijkę:

1

outline: none;

Podaną linijkę należy zastosować w zależności od akcji w trakcie której pojawiał się niepożądany wygląd odnośnika. Mam tu na myśli wszelkiego rodzaju pseudoklasy elementu “a”, tj.:

Mi w tym przypadku pomogło wykorzystanie a:active, także cieszę się z kolejnego rozwiązanego problemu.

Podsumowanie.

Po reakcji na jeden z ostatnich wpisów o przekazywaniu tablic w żądaniach GET aż się boję kliknąć "publikuj" w formularzu po prawej stronie okna - pewnie chłopaki już wytaczają działa odpowiedniego kalibru tak, aby raz na zawsze rozprawić się z niskim poziomem wpisów na tym blogu. ;] Oczywiście potraktujcie to jako żart, w żadnym wypadku nie zamierzam nikogo gnębić za komentowanie w innym niż "pochwalny" stylu. Negatywne komentarze w końcu bardziej motywują do pracy. ;]