Blog

Körvonal mentes linkek

Akik már foglalkoztak weboldal szerkesztéssel, vagy böngészés közben jobban szemügyre vettek egy oldalt, azoknak bizonyára feltűnt, hogy egy linkre kikkelve, csúnya szegély keletkezik az objektum körül, legyen az szöveg, vagy kép.
Engem akkor kezdett foglalkoztatni a probléma, amikor a sidebaromat készítettem. Ugyanis a kis elrejtő gombok körül nem éppen mutat jól ez a kéretlen dekoráció.

Dotted Link

Kis kutatás után meg is leltem a probléma megoldását. Egy rövidke CSS utasítás a stílus lapúnk kódjába és máris eltűntek a link keretek.

a {
  outline: none; /* None helyett 0 érték is megadható */
}

Eltűntek igen, a böngészők 97%-ból. Mert ugyanis Internet Explorer 6, vagy az annál régebbi verziókban makacsul megmarad a pöttyös szegély.
Erre sajnos nincs ilyen esztétikus megoldást, mint a fentebbi CSS utasítás. Ide egy kevésbé automatizált JavaScript lehet a megoldás, a tagjeink között:

<script type="text/javascript">
  var theahrefs = document.getElementsByTagName('a');
  for(var x=0;x!=theahrefs.length;x++){
  theahrefs[x].onfocus = function stopLinkFocus(){
    this.hideFocus=true;};
</script>

Majd a hivatkozásunknak ezt megadva, tudjuk a körvonalakat IE6 alatt is eltávolítani:

<a href="#" onfocus="this.hideFocus=true;">link</a>

Ez a megoldás kissé macerás lehet, mivel minden hivatkozásunkra meg kell adnunk, ezért csak tényleg fontos esetekben ajánlott.
Fontos még megjegyeznem, hogy Internet Explorer 7 alatt alapból nem jelennek meg ezek a szegélyek. Tehát a CSS kóddal minden mai böngészővel, körvonal mentessé tehetjük a weboldalunkat.
Én ezekben a böngészőkben teszteltem: Internet Explorer 6/7, Mozilla Firefox, Konqueror, Opera – Mindegyikben remekül működött.

Szóljon hozzá!

Új generációs játékok