:targetसीएसएस में छद्म चयनकर्ता से मेल खाता है जब URL में हैश और एक तत्व की आईडी एक ही हैं। उदाहरण के लिए, यदि वर्तमान URL है:
https://css-tricks.com/#votersऔर यह HTML में मौजूद है:
Content यह चयनकर्ता मिलान करेगा:
:target ( background: yellow; )और उस sectionतत्व की एक पीले रंग की पृष्ठभूमि होगी।
चयनकर्ता के उस जेनेरिक के साथ (जो कुछ भी होता है, जो लक्ष्य होता है), यदि URL अंत में बदल जाता है #faqऔर आईडी के साथ एक faqऔर #faqतत्व होता है, तो चयनकर्ता फिर से मेल खाएगा और तत्व की एक पीले रंग की पृष्ठभूमि होगी।
आप इसे निर्दिष्ट कर सकते हैं कि आप किन तत्वों को लक्षित करना चाहते हैं, जैसे
#voters:target ( )आप इसका उपयोग कब करेंगे?
एक संभावना है जब आप "राज्यों" के साथ शैली चाहते हैं। जब पृष्ठ में एक निश्चित हैश होता है, तो यह उसी अवस्था में होता है। यह वर्ग नामों में हेरफेर के रूप में काफी बहुमुखी नहीं है (क्योंकि केवल एक ही हो सकता है और यह केवल एक तत्व से संबंधित हो सकता है) लेकिन यह समान है। कुछ भी हो सकता है आप एक वर्ग को बदलने के लिए राज्य को बदल सकते हैं जब आप तत्व में हो सकते हैं :target। उदाहरण के लिए: रंग बदलें, स्थिति बदलें, चित्र बदलें, चीजों को छिपाएं / दिखाएं, जो भी हो।
जब :targetकोई अच्छा विकल्प हो , तो मैं इन नियमों का उपयोग करूंगा :
- जब एक "राज्य" की जरूरत है
- जब जंप-डाउन / हैश-लिंक व्यवहार स्वीकार्य है
- जब यह ब्राउज़र इतिहास को प्रभावित करने के लिए स्वीकार्य है
URL में हैश कैसे करते हैं?
उपयोगकर्ता द्वारा लिंक पर क्लिक करने का सबसे आम तरीका है जिसमें एक हैश शामिल है। एक आंतरिक (समान-पृष्ठ) लिंक या पूरी तरह से योग्य URL हो सकता है जो हैश और मान के साथ समाप्त होता है। उदाहरण:
Go To There Go To Thereकूदते हुए व्यवहार
भले ही यह समान-पृष्ठ लिंक हो या न हो, ब्राउज़र व्यवहार पृष्ठ को तब तक स्क्रॉल करता है जब तक वह तत्व पृष्ठ के शीर्ष पर न हो । या, जहां तक यह हो सकता है अगर यह उस तक स्क्रॉल नहीं कर सकता है। यह जानना महत्वपूर्ण है, क्योंकि इसका अर्थ है कि यह "कहा गया" व्यवहार थोड़ा मुश्किल / सीमित है।
उदाहरण के लिए, मैंने एक बार कार्यात्मक CSS टैब को दोहराने के लिए कई प्रकार की तकनीकों की कोशिश की, लेकिन अंततः चेकबॉक्स हैक का उपयोग करने का निर्णय लिया, क्योंकि यह पेज-जंपिंग मुद्दों से बचा जाता है। CSS विज्ञान में इयान हैन्सन के साथ ही टैब के कुछ उदाहरण हैं। उनका तीसरा उदाहरण :targetपेज जंपिंग व्यवहार को रोकने के लिए पृष्ठ के शीर्ष पर छिपे हुए तत्वों का उपयोग करता है , और बिल्कुल ही पोस्ट किए गए तत्व हैं। यह चतुर है, लेकिन एक समग्र समाधान है, क्योंकि इसका मतलब है कि पृष्ठ ऊपर की ओर कूद जाएगा एक पृष्ठ पर टैब आगे नीचे होना चाहिए।
अधिक जानकारी
- सीएसएस-ट्रिक्स पर यहां लेख: पर: लक्ष्य
- चयनकर्ता स्तर 4 कल्पना
- एक साधारण छवि गैलरी का उपयोग कर: लक्ष्य (पेज जम्प बात से ग्रस्त है, इसका अच्छा उदाहरण) क्रिस हेइल्मन द्वारा
- वेब डिज़ाइनर नोटबुक से पीली फीकी तकनीक का डेमो (हालांकि मौजूदा सामग्री के लिए, नए जोड़े गए कंटेंट के लिए नहीं)।
- एक सीएसएस लक्ष्य, शाब्दिक रूप से, कालेब ओगडेन द्वारा।
- सीएसएस: ऑफ स्क्रीन डिजाइन के लिए लक्ष्य
- एमडीएन डॉक्स
ब्राउज़र का समर्थन
| क्रोम | सफारी | फ़ायर्फ़ॉक्स | ओपेरा | अर्थात | एंड्रॉयड | आईओएस |
|---|---|---|---|---|---|---|
| कोई | 1.3+ है | 1.3+ है | 9.5+ | 9+ | २.१+ | 2+ |