TheJoe.it Into the (open) source

10giu/130

CSS: rimuovere il bordo “a puntini” dei link

outline_ico

Nell'articolo di oggi vediamo una semplice regola CSS, già presente in molti CSS Reset. Sto parlando della proprietà "outline". Se la regola "outline" non viene impostata il browser visualizzerà un riquadro puntinato attorno a ogni link cliccato. L'impostazione di default è questa perché si è pensato anche a chi usa il tasto TAB per navigare, e senza bordatura perderebbe il focus senza più capire su che link è capitato. Sto pensando anche a chi non può usare il mouse per difetto visivo. Rimuovendo la bordatura renderesti il sito inaccessibile a questi ultimi.

outline

Il bordo è presente sul link appena visitato

Tra l'altro definire il "focus" non è un optional, è chiaramente indicato nelle "web content accessibility guidelines".

Vi starete chiedendo allora perché mai dovremmo rimuovere l'outline dai link. In realtà non ci limiteremo a rimuoverlo, ma forniremo una valida alternativa al focus di default.

Per l'esempio di cui sopra, abbiamo la proprietà "a:focus" nel CSS in questo modo:

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

Riferito a questo HTML:

<ul>
  <li>definire un <span id="test1"><a href="#test1">colore alternativo di background</a></span>,</li>
  <li>definire un <span id="test2"><a id="txt" href="#">colore per il testo</a></span>,</li>
  <li>cambiare il <span id="test3"><a id="brd" href="#">bordo di default</a></span>,</li>
  <li><span id="test4"><a id="multi" href="#">cambiare pi&ugrave; parametri</a></span> per dare alta visibilit&agrave;.</li>
</ul>

 

About

Mantengo questo blog a livello amatoriale dal 2009. Sono appassionato di grafica, tecnologia, software Open Source. Fra i miei articoli non sarà difficile trovarne circa la musica, ed alcuni di riflessioni personali, ma preferisco indirizzare la linea del blog principalmente verso la tecnologia. Per informazioni contattami.

Commenti (0) Trackback (0)

Ancora nessun commento.


Leave a comment

Ancora nessun trackback.