Odstranění tečkovaných okrajů u odkazů Doporučený

Odstranění tečkovaných okrajů u odkazů
(Čtení tohoto článku zabere přibližně: 1 minutu.)

Možná jste občas všimli, že občas po kliknutí na odkaz objeví kolem odkazu tečkovaný okraj. Nejedná se o grafický záměr, ale o výchozí nastavení prohlížečů, které tímto efektem měly zlepšit přístupnost.

Grafikům, klientům a ani mě se tento efekt nelíbí. Jde přitom velice jednoduše odstranit. Ale i já na to zapomínám a většinou efekt na webu je a nikdo si jej ani nevšimne, protože při přechodu mezi stránkami je tento efekt prakticky neviditelný. Dobře jde vidět efekt při použití některého lightboxu - v tom případě totiž neodcházíte z webu, pouze se otevře lightbox a po jeho uzavření lze tento efekt pozorovat.

Odstranění efektu

Efekt lze jednoduše v základu odstranit jedním zápisem:

a {
   outline: 0;
}

Tuto část kódu často naleznete v různých CSS resetátorech. Slouží k odstranění efektu globálně.

Nezapomeňte na selectory

Kromě klasického :hover selektoru jsou v kaskádových stylech další selectory - :focus , :active . I tyto je dobré nastavovat. Osobně je nastavuji stejně jako hover efekt.

a:hover, a:active, a:focus {
  // nastylování efektu
}

Internet Explorer 9

Jak můžete tušit, Internet Explorer má svou specialitu - pokud v hlavičce máte uveden tento zápis, pak tečkovaný okraj nepůjde odstranit.

<meta http-equiv="X-UA-Compatible" content="IE=9" />

 

Václav

Programátor... občas normální, častěji tak trochu blázen.

Internetová stránka: www.valeas.cz

 

Zanechat komentář

Ujistěte se, že zadáte požadované informace, tam kde je vyznačeno (*). Kód HTML není povolen.