: का दौरा किया - सीएसएस-ट्रिक्स

:visitedछद्म वर्ग चयनकर्ता एक लंगर लिंक (पर स्टाइल के कुछ बदल सकते हैं यदि उपयोगकर्ता के ब्राउज़र पहले से ही लिंक का दौरा किया) तत्व। यह उपयोगकर्ताओं को उन लिंक के बीच अंतर को पहचानने में मदद करने के लिए है जो उनके पास है और दौरा नहीं किया है।

a:visited ( color: gray; )

सीमाएँ और उपयोग

इसके बारे में कुछ गोपनीयता की चिंता है :visited, अर्थात् एक दुर्भावनापूर्ण वेबसाइट :visitedस्टाइल के साथ टन वेबसाइटों के लिंक हो सकती है , फिर जावास्क्रिप्ट के साथ लिंक की विज़ुअल शैली का परीक्षण एक सर्वर पर वापस रिपोर्ट करने के लिए करें जो उपयोगकर्ता ने देखी है। यह उपयोगकर्ता की गोपनीयता का उल्लंघन करता है और व्यक्तिगत रूप से पहचान करने वाली जानकारी को प्रकट कर सकता है।

नतीजतन, अधिकांश ब्राउज़र प्रतिबंधित करते हैं कि :visitedलिंक पर स्टाइल को क्या बदला जा सकता है , और स्टाइल की जानकारी किस getComputedStyleविधि से बताई जा सकती है ।

यह उस स्थिति का एक अच्छा रन-डाउन है।

ये वे गुण हैं जिन्हें निम्न के साथ बदला जा सकता है :visited:

• color
• background-color
• border-color (और इसके उप-गुण)
• outline-color
• के रंग भागों fillऔर strokeगुण

आप केवल :visitedउन संपत्तियों को बदलने के लिए उपयोग कर सकते हैं यदि लिंक पहले से ही "अप्राप्त" या :linkराज्य में हैं। आप इसका उपयोग उन संपत्तियों को जोड़ने के लिए नहीं कर सकते हैं जो लिंक पर पहले से मौजूद नहीं हैं। उदाहरण के लिए:

आप बदल सकते हैं background-colorएक के :visitedलिंक अगर लिंक तत्व पहले से ही एक पृष्ठभूमि रंग था।

यदि यह "अनविज्ड" लिंक था, तो आप इसमें background-colorएक :visitedलिंक नहीं जोड़ सकते ।

लिंक छद्म-कक्षाएं क्रम में

यह जानना भी उपयोगी है कि अधिकांश लिंक छद्म-वर्गों को एक विशिष्ट क्रम में घोषित किया जाना चाहिए। आदेश है:

1. संपर्क
2. का दौरा किया
3. मंडराना
4. सक्रिय

यदि आप :focusअपने लिंक के लिए स्टाइल कर रहे हैं , तो इसे "होवर" और "सक्रिय" के बीच जोड़ना आम है।

डेमो

विस्तार :visited

यद्यपि :visitedलिंक के लिए प्रत्यक्ष स्टाइलिंग सीमित है, फिर भी स्टाइल किए गए लिंक के लिए अपने विकल्पों का विस्तार करने के लिए बहुत सारे चतुर तरीके हैं। 2015 में ब्लॉग पोस्टों की एक बम्पर फसल थी जो स्टाइलिंग :visitedलिंक के लिए नए विचारों को साझा कर रही थी :

फिर से आना: जोएल कैलिफा से दौरा किया , localstorageशैली के दौरे, इन-डोमेन लिंक का उपयोग करने का एक उदाहरण दिखाता है ।

हैकिंग: ऊना क्रैविट्स से दौरा किया गया , लिंक के कंटेंट के :visitedरूप में "अनविविस्ड" टैग को जोड़कर अपने सिर को मुड़ता है :after, जो लिंक पर जाने के बाद एक पृष्ठभूमि रंग स्वैप के साथ छिपा होता है।

की सीमा को धकेलना: स्टेलियन फायरज़ से सीएसएस ब्लेंड मोड के साथ दौरा किया गया , डकडकगो के लिए जिम्मेदार एक छोटी सी एचटीएमएल ट्रिक को जोड़ती है और background-blend-mode: screen;विज़िट किए गए लिंक के बगल में एक कस्टम आइकन को फीका करने के लिए।

डडली स्टोर से एसवीजी के साथ स्टाइलिंग विजिटिंग लिंक । fillपृष्ठ की पृष्ठभूमि के रंग से मेल खाने के लिए सेट के साथ एसवीजी छवियों का उपयोग करता है जब लिंक :linkराज्य में होता है, तो लिंक के बाद दूसरे रंग में होता है :visited। ट्यूटोरियल में एसवीजी के बजाय यूनिकोड वर्णों का उपयोग करके एक वैकल्पिक विधि भी शामिल है।

सम्बंधित

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

अधिक जानकारी

• :visited W3C कल्पना में
• :visited एमडीएन में

ब्राउज़र का समर्थन

सभी ब्राउज़र इसका समर्थन करते हैं।