Oblikovanje povezav s CSS

Povezave so med najpomembnejšimi interaktivnimi elementi spletne strani. Z oblikovanjem povezav v CSS določimo njihov videz v različnih stanjih, na primer ko povezava še ni obiskana, ko je obiskana, ko je nad njo kazalec, ko je aktivna ali ko ima fokus.

Pomni: Povezava naj bo jasno prepoznavna v vseh pomembnih stanjih. Uporabnik mora vedeti, da je element povezava, in opaziti, kdaj je aktivna ali izbrana.

Stanja povezav

Povezave lahko oblikujemo na različne načine. Pri tem lahko uporabimo številne slogovne lastnosti, na primer barvo, pisavo, ozadje, podčrtovanje, obrobo, odmik ali prikaz fokusa.

Pri povezavah, torej pri elementu a, ločimo več stanj, ki jih opišemo s psevdorazredi:

a:link – neobiskana povezava
a:visited – obiskana povezava
a:hover – nad povezavo je kazalec miške ali druge kazalne naprave
a:active – povezava je trenutno aktivirana
a:focus – povezava ima fokus
a:focus-visible – povezava ima fokus in brskalnik oceni, da mora biti fokus jasno viden

Sodobni CSS pozna tudi psevdorazred :any-link, ki izbere vse povezave z atributom href, ne glede na to, ali so obiskane ali ne. To je pogosto priročno za skupne osnovne sloge povezav.

Pozor: Psevdorazred :visited je zaradi zasebnosti omejen. V praksi je varno računati predvsem na spremembo barve obiskane povezave, ne pa na poljubne druge učinke.

Vrstni red pravil

Če določamo sloge za več stanj povezave, je priporočljivo upoštevati vrstni red LVHA:

:link
:visited
:hover
:active

Tak vrstni red pomaga, da poznejša stanja pravilno preglasijo prejšnja in da se slogi uporabljajo pričakovano.

Pomni: Če uporabljamo klasične psevdorazrede za povezave, naj bo :link zapisan pred :visited, :hover pa pred :active.

Dostopnost

Pri dostopnosti je pomembno, da povezav ne ločujemo samo po barvi. Dobro je, da ima povezava tudi dovolj opazen fokus, pogosto pa tudi podčrtovanje ali drug jasen vizualni znak. Psevdorazred :focus-visible je posebej uporaben za prilagojen prikaz fokusa pri uporabnikih tipkovnice.

Psevdorazred :focus se uporabi vedno, ko element dobi fokus, :focus-visible pa takrat, ko mora biti fokus po presoji brskalnika posebej viden. To je koristno predvsem pri navigaciji s tipko Tab.

Ne odstranjuj prikaza fokusa brez ustrezne nadomestne rešitve. Če uporabnik tipkovnice ne vidi, katera povezava ima fokus, je uporaba strani otežena.

Psevdorazred :focus-visible omogoča, da poudarimo fokus takrat, ko je to za uporabnika posebej pomembno, na primer pri tipkovnični navigaciji.

Primer

Spodnji primer prikaže osnovni slog povezave z uporabo :any-link, drugačen prikaz obiskane povezave, odziv pri prehodu kazalca, aktivnem stanju ter poudarjen fokus.

<p>To je <a href="#">povezava</a>.</p>

a:any-link { 
   color: #5755F5;
   text-decoration: none;
}
a:visited {
   color: #006C09;
}
a:hover {
   color: #F94E51;
   text-decoration: underline;
}
a:active {
   color: #FF191D;
   background-color: #FCB0B1;
}
a:focus {
   outline: 2px solid #5755F5;
   outline-offset: 2px;
}
a:focus-visible {
   outline: 3px solid #111111;
   outline-offset: 3px;
   text-decoration: underline;
}

To je povezava.

Z miško preverite stanje hover, s tipko Tab pa stanje focus-visible.

Če želimo uporabiti klasični zapis brez :any-link, lahko osnovni slog določimo tudi s psevdorazredoma :link in :visited. Psevdorazred :any-link je priročen predvsem takrat, ko želimo enak začetni slog za obe stanji povezave.

Priporočila

Povezava naj bo jasno prepoznavna tudi brez prehoda kazalca.
Za stanje fokusa uporabi dovolj viden obris ali drug jasen znak.
Pri :visited računaj predvsem na spremembo barve.
Če uporabljaš več stanj povezav, upoštevaj vrstni red LVHA.

Pogoste napake

Povezave so od običajnega besedila ločene samo z barvo.
Fokus povezave ni dovolj viden ali je popolnoma odstranjen.
Pravila za stanja povezav so zapisana v neustreznem vrstnem redu.
Pri :visited se pričakujejo učinki, ki jih brskalnik zaradi zasebnosti ne dovoli.

Nazaj

Naprej