Nerdblog.pl - Outline bug w firefoksie

Outline bug w firefoksie

Prawie wszyscy twórcy nowoczesnych stron spotkali się z problemem dziwnego zachowania Firefoksa. Gdy tworzymy z linka element blokowy i "usuwamy" tekst z widoku za pomocą text-indent (na przykład, żeby stworzyć graficzny przycisk), Firefox nadal traktuje taki tekst jako element jego rodzica i renderuje outline (to przerywane obramowanie) daleeeeeko w lewo lub prawo. Usuwanie tekstu przez font-size nie działa w przeglądarkach posiadających limit na minimalną czcionkę, display: none ukrywa tekst przed screenreaderami, a pustego elementu nawet nie bierzemy pod uwagę.

 
a {
	display: block;
	width: 200px;
	height: 150px; 
	/* I tutaj mamy problem: */
	text-indent: -9999px; 
	} 
 

Większość osób poleca zrobienie po prostu outline: none, ale uważam to za półśrodek - skoro wszystkie linki pokazują takie obramowanie to z jakiegoś powodu zostało stworzone (choćby, żeby można było zobaczyć co zostało kliknięte ostatnio). Musiałem więc odrzucić ten sposób. Potem znalazłem i dłuższy czas korzystałem z równie prostego rozwiązania dodając overflow: 'hidden' do CSS samego linka. Trzeba przyznać, źe działało, ale Riddle wskazał mi poważną wadę tego rozwiązania. Jeśli klikniemy na jakiś link i przytrzymamy lewy przycisk myszy, ale potem zmienimy zdanie, możemy odciągnąć go w bok i się nie załaduje. W Firefoksie 2 oraz poczatkowych betach 3 (w RC1 błąd wydaje się być poprawiony) po dodaniu overflow: hidden, takie coś przestaje działać i link ładuje się mimo to. Usability--.

 
a {
	display: block;
	width: 200px;
	height: 150px; 
	/* niestety, to też nie jest idealne rozwiązanie */
	text-indent: -9999px;
	overflow: hidden;  
	}
 

Powstaje więc dylemat. Czy usuwać błąd, czy zostawić go jako niewielki problem? Moim zdaniem takie coś zdecydowanie szpeci serwis, ponieważ sprawia to wrażenie jakby ktoś się śpieszył i zostawił niedociągnięcia. Długie, poziome linie przez całą stronę zdecydowanie psują walory estetyczne, a dodatkowo drażnią.

W końcu znalazłem optymalne rozwiązanie, które działa w każdej przeglądarce, nie upośledza strony i nie sprawia problemów.

 
a {
	display: block;
	width: 200px;
	height: 150px;
	text-indent: -9999px; 
	}
 
/* tak już lepiej:*/
a:focus {
	overflow: hidden; 
	}
 

Wykorzystane w ten sposób overflow:hidden nie blokuje przeciągania, więc ten problem jest załatwiony. Inne przeglądarki nie widzą różnicy skoro i tak przenosimy tekst poza pole, więc wszystko jest ok. Całość jest uniwersalna i nie powoduje problemów w implementacji - to tylko trzy dodatkowe linijki. Inne pomysły zostawiać w komentarzach :)