Into the (open) source


CSS: remove the border “a puntini” dei link


In today's article we see a simple CSS rule, already present in many CSS Reset. I'm talking about the property "outline". If the regola "outline" do not set the browser will display a dotted box around each link clicked. The default setting for this is because it is thought also to those who use the TAB key to navigate, and beading without any lose focus on that link no longer understand it happened. I'm also thinking of those who can not use the mouse to visual defect. By removing the beading renderesti the site inaccessible to them.


The edge is present on the link just visited

Among other things, define the "focus" is not optional, is clearly stated in the "web content accessibility guidelines".

You might ask then why should we remove the outline from links. In fact we will not just remove it, but we will provide a viable alternative to the default focus.

To the example above, we have the property "a:focus" in the CSS in this way:

#test1 a:focus { background: #FFFF00; }
#test2 a:focus { color: #FF6600; }
#test3 a:focus { outline: #FF0000 dotted medium; }
#test4 a:focus { color: #FFFFFF; background: #FF0000; }

Referred to this HTML:

  <li>define a <span id="test1"><a href="#test1">alternate color of the background</a></span>,</li>
  <li>define a <span id="test2"><a id="txt" href="#">color for the text</a></span>,</li>
  <li>change <span id="test3"><a id="brd" href="#">bordo di default</a></span>,</li>
  <li><span id="test4"><a id="multi" href="#">change more&ugrave; parameters</a></span> to give high visibility&worse;.</li>



I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.