: külastatud - CSS-trikid

Anonim

:visitedPseudo-klassi valijat saab muuta mõningaid stiil kohta ankru link ( ) element, kui kasutaja brauser on juba külastanud link. Selle eesmärk on aidata kasutajatel eristada linkide vahel, mida nad on külastanud ja mida pole külastanud.

a:visited ( color: gray; )

Piirangud ja kasutamine

Privaatsuse pärast on muret :visited, nimelt võib pahatahtlikul veebisaidil olla viiteid :visitedpaljudele stiiliga veebisaitidele , seejärel testige lingide visuaalset stiili JavaScripti abil, et teatada serverile, milliseid saite kasutaja on külastanud. See rikub kasutaja privaatsust ja võib paljastada isikut tuvastavat teavet.

Seetõttu piiravad enamik brausereid, millist stiili saab :visitedlinkidel muuta ja millist stiili teavet saab getComputedStylemeetodi abil esitada.

See on selle olukorra hea mahajätmine.

Neid omadusi saab muuta :visited:

  • color
  • background-color
  • border-color (ja selle alamomadused)
  • outline-color
  • Värviosad fillja strokeomadused

:visitedNende omaduste muutmiseks saate kasutada ainult siis, kui lingil on need juba „külastamata” või :linkolekus. Te ei saa seda kasutada atribuutide lisamiseks, mida lingil veel pole. Näiteks:

Kui lingi elemendil oli juba taustavärv background-color, saate :visitedlingi muutmist muuta .

Lingile ei saa lisada a-d background-color, :visitedkui sellel ei olnud taustavärvi, kui see oli "külastamata" link.

Linkige pseudoklassid järjekorras

Samuti on kasulik teada, et enamik lingi pseudoklassidest tuleks deklareerida kindlas järjekorras. Tellimus on:

  1. Link
  2. Külastatud
  3. Hõljuma
  4. Aktiivne

Kui lisate :focusoma lingi jaoks stiili, on see tavaline, kui lisate selle „hõljutava” ja „aktiivse” vahele.

Demo

Pikendamine :visited

Kuigi :visitedlinkide otsene stiil on piiratud, on külastatud linkide kujundamise võimaluste laiendamiseks palju nutikaid viise. 2015. aastal ilmus lühike ajaveebipostitusi, mis jagasid uusi ideid :visitedlinkide kujundamiseks :

Taasvaatamine: külastatud , Joel Califa, näitab localstoragekülastatud domeenilinkide stiilinäite kasutamist.

Häkkimine: külastatud Una Kravetsilt pöörab :visitedpea peale, lisades :afterlinkidele sisuks sildi “külastamata” , mis seejärel peidetakse pärast lingi külastamist taustavärvide vahetusega.

Stelian Firezilt CSS-i segurežiimidega külastatud piiride ületamine ühendab DuckDuckGo-le omistatud väikese HTML-i triki ja background-blend-mode: screen;külastatud lingi kõrval kohandatud ikooni tuhmimiseks .

Styling Külastatud lingid SVG-ga Dudley Storeyst. Kasutab fillkomplekti SVG pilte, et need vastaksid lehe taustavärvile, kui link on :linkolekus, siis teise värviga pärast lingi olekut :visited. Õpetus sisaldab ka alternatiivset meetodit, milles kasutatakse SVG asemel Unicode'i märke.

Seotud

  • :link
  • :active
  • :hover
  • :focus

Rohkem informatsiooni

  • :visited W3C spetsifikatsioonis
  • :visited juures MDN

Brauseri tugi

Kõik brauserid toetavad seda.