Deo zbornika Uvod u web

Isticanje posećenih veza

Email Twitter LinkedIn Facebook Google

Dizajneri i programeri često zaborave na stil posjećene veze, pa posjećene oblikuju jednako kao i neposjećene. Međutim, poseban stil posjećene veze korisnicima može pomoći pri snalaženju, pokazujući im koje su lokacije već posjetili da bi izbjegli nepotrebno vraćanje na njih.

Stilovi posjećenih veza posebno dolaze do izražaja kad se koriste u bočnom stupcu ili u sporednom izborniku. Recimo da u bočnom stupcu imamo popis veza prema vanjskim lokacijama:

<ul>
  <li><a href="https://skolakoda.org/">Škola koda</a></li>
  <li><a href="http://damjanpavlica.wordress.com">Damjanov Svet</a></li>
  <li><a href="https://www.khanacademy.org/">Khan Academy</a></li>
  <li><a href="https://www.hackerrank.com">Hacker Rank</a></li>
  <li><a href="http://petlja.org">Petlja</a></li>
  <li><a href="http://nepostojeci-sajt.com">Nepostojeći sajt</a></li>
</ul>

Nekada je bilo uobičajeno da se osim boje, menja i pozadinska slike za posećenu vezu, što je ukinuto zbog bezbednosnih razloga. Međutim, možemo imati skrivenu pozadinsku sliku, koju ćemo otkriti promenom boje pozadine, na sljedeći način:

<ul>
  <li><a href="https://skolakoda.org/">Škola koda</a></li>
  <li><a href="http://damjanpavlica.wordress.com">Damjanov Svet</a></li>
  <li><a href="https://www.khanacademy.org/">Khan Academy</a></li>
  <li><a href="https://www.hackerrank.com">Hacker Rank</a></li>
  <li><a href="http://petlja.org">Petlja</a></li>
  <li><a href="http://nepostojeci-sajt.com">Nepostojeći sajt</a></li>
</ul>

<style>
a {
  display: block;
  width: 300px;
  line-height: 30px;
  color: #000;
  text-decoration: none;
  background: #fff url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/White_checkbox-checked.svg/32px-White_checkbox-checked.svg.png) no-repeat right;
  text-indent: 10px;
  border: 1px solid black;
}

a:visited {
  padding-right: 20px;
  color: #fff;
  background: #009688;
  border: none;
}

ul {
  list-style:none;
}

li {
  margin: 5px 0;
}
</style>

Objašnjenje: nakon posete linku, pozadinska boja se menja u zeleno, pa ranije nevidljiv beli kvadratić oko kvačice postaje vidljiv.

Svaka lokacija koju ste posjetili imaće kvačicu pored imena, pružajući vrijednu informaciju da ste tamo već bili.

Izvor: Andy Budd, CSS Mastery: napredna Web rješenja (probno poglavlje), Zagreb 2006.

Priredio: Damjan Pavlica 2018.