Přejít k navigační liště

Zdroják » Webdesign » Stylujeme navštívený odkaz :visited

Stylujeme navštívený odkaz :visited

Články Webdesign

Pomocí CSS pseudo třídy :visited jde měnit jen některé styly navštíveného odkazu. Víte které?

Nálepky:

Článek původně vyšel na autorově webu Je čas.

Pro přehlednější používání webové stránky se hodí odlišit odkazy, které návštěvník již navštívil – nemusí na ně potom už klikat znovu, když zná jejich obsah.

Zaměřit navštívené odkazy jde pomocí :visited:

:visited {
  color: grey; /* navštívený odkaz bude šedivý */
}

Někdy se před :visited zbytečně píše ještě značka odkazu:

a:visited {}

Jelikož navštívený může být pouze odkaz, nemá to funkci vliv. Teoreticky je složitější zápis odolný proti případným změnám chování prohlížečů, pokud by :visited začalo fungovat i u jiných značek. Už se to v historii stalo s pseudo třídou po najetí myší – :hover (více v článku Kaskádová móda na Webylonu).

Výchozí styl běžných odkazů je modrou barvou, navštívené odkazy potom červenomodrou. Pokud výchozí barvy nezapadají do stylu webu, obvykle se navštívený odkaz styluje méně výrazněji než normální odkaz.

Má smysl odlišovat navštívené odkazy?

Je docela běžné, že webové stránky navštívené odkazy neodlišují.

V řadě případů to bude nejspíš z lenosti – zkrátka se styl odkazu zapíše jako:

a {
  /* styl odkazu */
}

Což postihne i odkaz, který již byl navštíven.

Druhá možnost je, že by odlišný styl některých odkazů mátl uživatele, takže se schválně jinak nestyluje.

  • Nemusí být každému na první pohled jasné, že jiná barva odkazu značí, že byl navštíven.
  • U některých stránek může být cílem, aby na něj návštěvník chodil opakovaně. Méně výrazý styl odkazu by od toho mohl odrazovat.
  • U odkazů na stránky kategorií/rozcestníků je potom snížení důrazu rizikové, protože nebere v úvahu, jestli návštěvník prošel i podstránky.

Možnosti stylování navštívených odkazů jsou navíc značně omezené z důvodu ochrany soukromí:

Nefungují styly pro :visited

Bez znalosti okolností se může zdát, že stylování navštívených odkazů nefunguje.

U :visited jde měnit pouze barvy:

  • barvu písma (color),
  • pozadí (background),
  • okrajů (border-*-color),
  • ohraničení (outline-color),
  • barvu oddělovače sloupců (column-rule-color),
  • fill a stroke

Proč?

V dobách před tímto omezením šlo velmi snadno ověřit, jaký libovolný web návštěvník navštívil. Třeba nastavením pozadí na adresu měřicího skriptu:

<a 
  href="http://jecas.cz" 
  style="background: url(navstivil.php?url=jecas.cz)"
>
</a>

Šlo to třeba hezky využít k zjištění toho, jestli návštěvník byl na webu konkurence. Z tohoto důvodu tedy nejde navštíveným odkazům měnit obrázkové pozadí.

Omezené stylování navštívených odkazů se týká prohlížečů:

  • Internet Explorer 9+,
  • Firefox 4+,
  • Chrome,
  • Opera 15+

Proč nefungují další vlastnosti, jako změna rozměrů (výšky/šířky), nastavení tučného písma a další?

I z těch by šlo zjistit (byť méně elegantně než obrázkový pozadím), zda návštěvník web už navštívil. Změny takových vlastností mohou ovlivňovat své okolí, takže by se zjišťování jen přesunulo na okolní elementy.

Zjištění barvy

I barvu je ale přece možné skriptem zjistit:

Z tohoto důvodu metoda getComputedStyle() při použití na navštíveném odkazu lže – vrací hodnoty odkazu nenavštíveného.

Selektor sourozence

Stejně tak nefunguje ani selektor sourozence:

:visited + span {
  /* tato pravidla se nikdy neaplikují */
}

Prohlížeč se z pohledu selektoru tváří, že odkaz navštívený není.

Pseudo elementy :before/after

Nemožnosti používat pseudo-elementy je zvlášť škoda, šlo by tak snadno a elegantně k odkazům připsat, že byly navštíveny:

:visited:after {
  content: "✔ Navštíveno";
}

Bohužel to funguje jen u staré Opery 12, kde tak jde velmi snadno hezky označit přečtené články:

Označení navštívených odkazů

Důsledky omezení

Asi největší problém možnost měnit pouze barvu přináší návštěvníkům s problémem rozlišovat barvy.

Může se zdát, že omezení nemuselo být tak dramatické a dalo se vztahovat pouze na odkazy na jiné domény, vždyť vlastník webu může stejně sledovat, co jeho návštěvníci viděli a co ne.

Takové chování by zneužitelnost pouze zmírnilo, protože stále existují stránky na stejné doméně, které spolu nesouvisí.

Odlišení navštíveného odkazu

Pro názornější znázornění navštíveného obsahu je tak nutné si ukládat navštívené stránky uživatele ve vlastní režii:

  1. Pomocí JavaScriptu do lokálního úložištělocalStorage.
  2. Serverovým skriptem uživateli přidat identifikační cookie a do DB na straně serveru mu přiřazovat navštívené stránky.

Když už se tato data ukládají, nabízí se si informací uložit co nejvíc. Třeba datum návštěvy:

Označení navštívených odkazů

Z ukládaných záznamů by mohlo jít zjistit a zobrazit i počet návštěv dané stránky, případě měřit i dobu, kterou člověk stránku četl a podobně.

Ukládat u klienta, nebo na server?

Ukládat data na server má smysl hlavně v případě, že není data o návštěvnosti možné zjistit jinak – třeba pomocí Google Analytics. Jinak je ukládání na serveru zbytečná zátěž.

Hotové řešení s localStorage

Pro konkrétní implementaci ukládání do localStorage je potřeba:

  1. Sestavit identifikátor stránky – k tomu se bude hodit obsah za lomítkem (location.pathname) a část s otazníkem (location.search).
    var pageId = location.pathname + location.search;

    Postup jako při location bude stejný i pro následné procházení odkazů:

  2. Uložit do lokálního úložiště pro identifikátor datum:
    localStorage.setItem(
      pageId,
      new Date()
    );

Nyní zbývá jen část pro znázornění navštívenosti:

  1. Projít odkazy na stránce cyklem. Všechny odkaz na stránce jsou v document.links, případně se výběr může vztahovat jen na určitou oblast.
    var links = document.links;
    for (var i = links.length; i--; ) {
      visited(links[i]);
    }
  2. Označit navštívené odkazy – to zajistí funkce visited třeba přidáním vlastního atributu data-visited. Navštívenost se zjistí na základě vyhledání položky v úložišti podle identifikátoru odkazu:
    var item = localStorage.getItem(pageId);
    if (item) {   
      // navštívený odkaz
    }
  3. Časový rozdíl se zjistí odečtením data z úložiště (proměnná item) od aktuálního data, datum je nutné parsovat:
    var date = new Date() - Date.parse(item);

    Pro representaci časové prodlevy v češtině stylem před X minutami půjde použít funkci timeAgoInWords z dynamického updatu času.

    Výsledek se nastaví do atributu:

    link.setAttribute("data-visited", TimeAgo.init(date));

    To by mělo zajistit označení všech navštívených odkazů v HTML DOMu:

    Znázornění navštívení v DOMu

  4. Znázornění proběhne v CSS pomocí pseudoelementu :after a přečtení hodnoty pomocí attr() (IE 8+).
    a[data-visited]:after {
        content: "navštíveno " attr(data-visited);
    }

    Stylovat navštívené odkazy libovolným způsobem půjde přes prosté a[data-visited].

Živá ukázka – po poklikání na odkazy a vyčkání by to mělo zobrazovat dobu od poslední návštěvy:

Zobrazení doby od načtení

(Moc jsem to netestoval, najdete-li chybu, dejte prosím vědět do komentářů.)

Odkazy jinam

Komentáře

Subscribe
Upozornit na
guest
2 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Velda

„červenomodrou“ to jako myslíte purpurovou?

Jinak já měl za to, že běžná barva navštívěných odkazů je tmavě modrá. :-)

iiic

Co si vzpomínám tak naposled co jsem to zkoušel to šlo, ale je to už pár let, tak je možné, že se prohlížeče už pojistily :) . Teď tedy ani canvas a vytváření odkazů, ani nějaký jiný způsob… už jsme nahraný ?

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.