: vieraili - CSS-temppuja

Anonim

:visitedNäennäisluokkavalitsin voi muuttaa joitakin tyyli ankkurina linkin ( ) elementti, jos käyttäjän selain on jo vieraillut linkkiä. Sen on tarkoitus auttaa käyttäjiä erottamaan ero linkkien välillä, joilla heillä on ja joita ei ole käynyt.

a:visited ( color: gray; )

Rajoitukset ja käyttö

Tietosuoja on huolestuttavaa :visited, nimittäin se, että haitallisella verkkosivustolla voi olla linkkejä tonnille verkkosivustoja :visitedtyylillä, testaa sitten linkkien visuaalinen muoto JavaScriptin avulla raportoidaksesi palvelimelle, millä sivustoilla käyttäjä on käynyt. Tämä rikkoo käyttäjän yksityisyyttä ja saattaa paljastaa henkilökohtaisia ​​tietoja.

Tämän seurauksena useimmat selaimet rajoittavat sitä, mitä tyyliä voi muuttaa :visitedlinkeissä ja mitkä tyylitiedot voidaan raportoida getComputedStylemenetelmän avulla.

Tämä on hyvä tilanteen loppu.

Nämä ovat ominaisuuksia, joita voidaan muuttaa :visited:

  • color
  • background-color
  • border-color (ja sen alaominaisuudet)
  • outline-color
  • Väri osat fillja strokeominaisuudet

Voit käyttää :visitednäiden ominaisuuksien muuttamiseen vain, jos linkillä on ne jo "käymättömässä" tai :linktilassa. Et voi käyttää sitä lisäämään ominaisuuksia, joita ei vielä ole linkissä. Esimerkiksi:

Voit vaihtaa background-coloron :visitedlinkki, jos länkelementet jo taustaväri.

Et voi lisätä background-colorjoka :visitedlinkkiä, jos se ei ole taustaväri, kun se oli ”avaamattoman” -linkkiä.

Linkitä pseudoluokitukset järjestyksessä

On myös hyödyllistä tietää, että suurin osa linkin pseudoluokista tulisi ilmoittaa tietyssä järjestyksessä. Tilaus on:

  1. Linkki
  2. Vieraillut
  3. Vie hiiri
  4. Aktiivinen

Jos lisäät :focuslinkkisi tyylin, on tavallista lisätä se "hiiren" ja "aktiivisen" väliin.

Demo

Laajentaminen :visited

Vaikka :visitedlinkkien suora muotoilu on rajallinen, on olemassa monia fiksuja tapoja laajentaa vaihtoehtoja vierailtujen linkkien muotoiluun. Vuonna 2015 blogikirjoituksia oli runsaasti, ja niissä jaettiin uusia ideoita :visitedlinkkien muotoilusta :

Reveliting: käynyt , Joel Califa, näyttää esimerkin käytetyn localstoragevierailun, verkkotunnuksen sisäisten linkkien tyylistä.

Hakkerointi: vieraillut , Una Kravetsilta, kääntyy :visitedpäähänsä lisäämällä linkeiksi :aftersisällön "vierailematon" -tunnisteen , joka piilotetaan sitten taustavärivaihdolla linkin vierailun jälkeen.

Stelian Firezin CSS-sekoitustilojen rajojen ylittäminen yhdistää pienen HTML-temppun, joka on annettu DuckDuckGolle, ja background-blend-mode: screen;häivyttää mukautetun kuvakkeen vierailemasi linkin vieressä.

Styling Visited Links with SVG , Dudley Storey. Käyttää fillasetettuja SVG-kuvia vastaamaan sivun taustaväriä, kun linkki on :linktilassa, ja sitten toiseen väriin linkin jälkeen :visited. Opetusohjelma sisältää myös vaihtoehtoisen menetelmän, jossa käytetään Unicode-merkkejä SVG: n sijaan.

Liittyvät

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

Lisää tietoa

  • :visited W3C-määrityksessä
  • :visited osoitteessa MDN

Selaimen tuki

Kaikki selaimet tukevat tätä.