सीएसएस ऐंकर पोज़िशनिंग एपीआई, वेब डेवलपमेंट के क्षेत्र में एक अहम भूमिका निभाता है. इसकी मदद से, दूसरे एलिमेंट के मुकाबले एलिमेंट की जगह को मूल रूप से तय किया जा सकता है. ऐसे एलिमेंट को ऐंकर कहा जाता है. यह API कई इंटरफ़ेस सुविधाओं जैसे मेन्यू और सबमेन्यू, टूलटिप, चुनने, लेबल, कार्ड, सेटिंग संवाद, और कई दूसरी चीज़ों के लिए जटिल लेआउट ज़रूरतों को आसान बनाता है. ब्राउज़र में बिल्ट-इन ऐंकर पोज़िशन करने की सुविधा की मदद से, कई लेयर वाले यूज़र इंटरफ़ेस बनाए जा सकते हैं. इसके लिए, तीसरे पक्ष की लाइब्रेरी पर निर्भर नहीं रहना होगा. इससे, आपको नए-नए क्रिएटिव काम करने में मदद मिलेगी.
ऐंकर पोज़िशनिंग की सुविधा Chrome 125 में उपलब्ध है.
मुख्य सिद्धांत: ऐंकर और पोज़िशन किए गए एलिमेंट
इस एपीआई के केंद्र में, ऐंकर और मौजूद एलिमेंट के बीच संबंध मौजूद होता है. ऐंकर anchor-name प्रॉपर्टी का इस्तेमाल करके, रेफ़रंस पॉइंट के तौर पर तय किया गया एलिमेंट होता है. पोज़िशन किया गया एलिमेंट, ऐसा एलिमेंट होता है जिसे position-anchor प्रॉपर्टी का इस्तेमाल करके या साफ़ तौर पर anchor-name के पोज़िशनिंग लॉजिक का इस्तेमाल करके, ऐंकर के हिसाब से तय किया जाता है.
ऐंकर सेट अप करना
ऐंकर बनाने का तरीका आसान है. चुने गए एलिमेंट पर ऐंकर-name प्रॉपर्टी लागू करें और इसे यूनीक आइडेंटिफ़ायर असाइन करें. इस यूनीक आइडेंटिफ़ायर के शुरू होने से पहले, दो डैश का इस्तेमाल किया जाना चाहिए, जो किसी सीएसएस वैरिएबल की तरह होता है.
.anchor-button {
anchor-name: --anchor-el;
}
ऐंकर का नाम असाइन किए जाने के बाद, .anchor-button ऐंकर का काम करता है. यह अन्य एलिमेंट को सही जगह पर रखने के लिए, गाइड करता है. इस ऐंकर को अन्य एलिमेंट से जोड़ने के लिए, इन दो में से किसी एक तरीके का इस्तेमाल किया जा सकता है:
इंप्लिसिट ऐंकर
किसी ऐंकर को किसी दूसरे एलिमेंट से कनेक्ट करने का पहला तरीका, इंप्लिसिट ऐंकर होता है. इसका उदाहरण नीचे दिया गया है. position-anchor प्रॉपर्टी को उस एलिमेंट में जोड़ा जाता है जिसे आपको अपने ऐंकर से कनेक्ट करना है. साथ ही, इसमें वैल्यू के तौर पर ऐंकर का नाम (इस मामले में --anchor-el) होता है.
.positioned-notice {
position-anchor: --anchor-el;
}
इंप्लिसिट संबंध के साथ, आपके पास anchor() फ़ंक्शन का इस्तेमाल करके एलिमेंट की पोज़िशन तय करने का विकल्प होता है. इसके लिए, पहले आर्ग्युमेंट में ऐंकर का नाम साफ़ तौर पर बताना ज़रूरी नहीं है.
.positioned-notice {
position-anchor: --anchor-el;
top: anchor(bottom);
}
अश्लील ऐंकर
इसके अलावा, ऐंकर फ़ंक्शन (उदाहरण के लिए, top: anchor(--anchor-el bottom) में ऐंकर नाम का इस्तेमाल किया जा सकता है. इसे साफ़ तौर पर दिखने वाला ऐंकर कहा जाता है. अगर आपको एक से ज़्यादा एलिमेंट को ऐंकर करना है, तो इसका इस्तेमाल किया जा सकता है (उदाहरण के लिए, आगे पढ़ें).
.positioned-notice {
top: anchor(--anchor-el bottom);
}
एलिमेंट को ऐंकर के हिसाब से पोज़िशन करें
ऐंकर पोज़िशनिंग, सीएसएस की कुल पोज़िशनिंग पर आधारित होती है. पोज़िशनिंग वैल्यू का इस्तेमाल करने के लिए, आपको अपने पोज़िशन किए गए एलिमेंट में position: absolute जोड़ना होगा. इसके बाद, पोज़िशन तय करने की वैल्यू लागू करने के लिए anchor() फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए, ऐंकर किए गए एलिमेंट को ऐंकरिंग एलिमेंट के ऊपर बाईं ओर रखने के लिए, इन पोज़िशन का इस्तेमाल करें:
.positioned-notice {
position-anchor: --anchor-el;
/* absolutely position the positioned element */
position: absolute;
/* position the right of the positioned element at the right edge of the anchor */
right: anchor(right);
/* position the bottom of the positioned element at the top edge of the anchor */
bottom: anchor(top);
}
अब आपका एक एलिमेंट दूसरे एलिमेंट से ऐंकर किया गया है. जैसे:
लॉजिकल पोज़िशनिंग (लॉजिकल पोज़िशनिंग) का इस्तेमाल करने के लिए, मिलते-जुलते मतलब नीचे दिए गए हैं:
top=inset-block-startleft=inset-inline-startbottom=inset-block-endright=inset-inline-end
पोज़िशन किए गए एलिमेंट को anchor-center के बीच में रखें
ऐंकर की पोज़िशन में रखे गए एलिमेंट को आसानी से बीच में रखने के लिए, anchor-center नाम की एक नई वैल्यू मौजूद है. इसका इस्तेमाल justify-self, align-self, justify-items, और align-items प्रॉपर्टी के साथ किया जा सकता है.
यह उदाहरण पिछले एलिमेंट में बदलाव करता है. इसके लिए, justify-self: anchor-center का इस्तेमाल करके, पोज़िशन वाले एलिमेंट को ऐंकर के ऊपर रखा जाता है.
.positioned-notice {
position: absolute;
/* Anchor reference */
position-anchor: --anchor-el;
/* Position bottom of positioned elem at top of anchor */
bottom: anchor(top);
/* Center justification to the anchor */
justify-self: anchor-center;
}
justify-center का इस्तेमाल करके बीच में दिखाए गए ऐंकर का डेमो.
एक से ज़्यादा ऐंकर
एलिमेंट को एक से ज़्यादा ऐंकर से टेदर किया जा सकता है. इसका मतलब है कि आपको ऐसी पोज़िशन की वैल्यू सेट करनी पड़ सकती है जो एक से ज़्यादा ऐंकर के आस-पास हो. ऐसा करने के लिए, anchor() फ़ंक्शन का इस्तेमाल करें और पहले आर्ग्युमेंट में साफ़ तौर पर बताएं कि आपने किस ऐंकर का रेफ़रंस दिया है. नीचे दिए गए उदाहरण में, पोज़िशन किए गए एलिमेंट के ऊपर बाईं ओर एक ऐंकर के नीचे दाईं ओर और पोज़िशन वाले एलिमेंट के निचले दाएं हिस्से को दूसरे ऐंकर में ऊपर बाईं ओर ऐंकर किया गया है:
.anchored {
position: absolute;
top: anchor(--one bottom);
left: anchor(--one right);
right: anchor(--two left);
bottom: anchor(--two top);
}
inset-area के साथ स्थिति
ऐब्सलूट पोज़िशनिंग के साथ-साथ, ऐंकरिंग एपीआई में एक नया लेआउट सिस्टम शामिल किया गया है. इसे इनसेट एरिया कहा जाता है.
इनसेट एरिया में, ऐंकर पोज़िशन में रखे गए एलिमेंट को उनके ऐंकर के मुकाबले लगाना आसान होता है. साथ ही, यह नौ-सेल ग्रिड पर काम करता है, जिसके बीच में ऐंकरिंग एलिमेंट मौजूद होता है.
9-सेल ग्रिड पर दिखाए गए, इनसेट-एरिया पोज़िशनिंग के कई विकल्प
ऐब्सलूट पोज़िशन के बजाय, इनसेट एरिया का इस्तेमाल करने के लिए, फ़िज़िकल या लॉजिकल वैल्यू के साथ inset-area प्रॉपर्टी का इस्तेमाल करें. उदाहरण के लिए:
- ऊपर मध्य में:
inset-area: topयाinset-area: block-start - बाएं केंद्र में:
inset-area: leftयाinset-area: inline-start - नीचे मध्य में:
inset-area: bottomयाinset-area: block-end - दायां-केंद्र:
inset-area: rightयाinset-area: inline-end
इन स्थितियों के बारे में और जानने के लिए, नीचे दिए गए टूल का इस्तेमाल करें:
anchor-size() वाले साइज़ एलिमेंट
anchor-size() फ़ंक्शन, ऐंकर पोज़िशनिंग एपीआई का भी हिस्सा होता है. इसका इस्तेमाल, ऐंकर पोज़िशन वाले एलिमेंट को साइज़ (चौड़ाई, ऊंचाई या इनलाइन और ब्लॉक साइज़) के हिसाब से साइज़ या पोज़िशन करने के लिए किया जा सकता है.
नीचे दिए गए सीएसएस में, ऊंचाई के लिए इसका इस्तेमाल करने का उदाहरण दिखाया गया है. इसके लिए, calc() फ़ंक्शन में anchor-size(height) का इस्तेमाल करके, टूलटिप की ज़्यादा से ज़्यादा ऊंचाई को ऐंकर की ऊंचाई के दो गुना पर सेट किया जाता है.
.positioned-notice {
position-anchor: --question-mark;
/* set max height of the tooltip to 2x height of the anchor */
max-height: calc(anchor-size(height) * 2);
}
anchor-size का डेमो
पॉपओवर और डायलॉग जैसे टॉप लेयर एलिमेंट के साथ ऐंकर का इस्तेमाल करना
ऐंकर पोज़िशनिंग की सुविधा, popover जैसे टॉप लेयर एलिमेंट के साथ बेहतर तरीके से काम करती है. और <dialog>. इन एलिमेंट को बाकी डीओएम सबट्री से अलग लेयर में रखा जाता है, लेकिन ऐंकर पोज़िशनिंग की मदद से उन्हें फिर से टेदर किया जा सकता है. साथ ही, उन एलिमेंट को स्क्रोल भी किया जा सकता है जो टॉप लेयर में मौजूद नहीं हैं. लेयर वाले इंटरफ़ेस के लिए यह एक बड़ी कामयाबी है.
यहां दिए गए उदाहरण में, टूलटिप पॉपओवर का एक सेट एक बटन का इस्तेमाल करके ट्रिगर किया गया है. बटन की जगह ऐंकर होता है और टूलटिप की जगह पर तय किया गया एलिमेंट होता है. पोज़िशन किए गए एलिमेंट की स्टाइल को, ऐंकर किए गए किसी अन्य एलिमेंट की तरह ही सेट किया जा सकता है. इस उदाहरण के लिए, बटन और टूलटिप पर anchor-name और position-anchor इनलाइन स्टाइल हैं. डाइनैमिक कॉन्टेंट जनरेट करते समय, हर ऐंकर के लिए खास नाम की ज़रूरत होती है. इसलिए, ऐसा करने का सबसे आसान तरीका इनलाइन करना है.
popover के साथ ऐंकर का इस्तेमाल करके डेमो करें
@position-try की मदद से ऐंकर की पोज़िशन अडजस्ट करें
ऐंकर की शुरुआती पोज़िशन मिलने के बाद, अगर ऐंकर अपने ब्लॉक के किनारों तक पहुंच जाता है, तो उस जगह को अडजस्ट किया जा सकता है. ऐंकर की दूसरी पोज़िशन बनाने के लिए, position-try-options प्रॉपर्टी के साथ-साथ @position-try डायरेक्टिव का इस्तेमाल करें.
यहां दिए गए उदाहरण में, मेन्यू की दाईं ओर एक सबमेन्यू दिखाया गया है. मेन्यू और सबमेन्यू, पॉपओवर एट्रिब्यूट के साथ ऐंकर पोज़िशनिंग एपीआई का बेहतर इस्तेमाल करते हैं. इसकी वजह यह है कि ये मेन्यू ट्रिगर बटन से ऐंकर किए जाते हैं.
इस सबमेन्यू के लिए, अगर हॉरिज़ॉन्टल तौर पर ज़रूरत के मुताबिक जगह नहीं है, तो इसे मेन्यू के नीचे ले जाया जा सकता है. ऐसा करने के लिए, पहले शुरुआती पोज़िशन सेट अप करें:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
}
इसके बाद, @position-try का इस्तेमाल करके फ़ॉलबैक ऐंकर पोज़िशन सेट अप करें:
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
आखिर में, दोनों को position-try-options से कनेक्ट करें. कुल मिलाकर, यह ऐसा दिखता है:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
*/ connect with position-try options */
position-try-options: --bottom;
}
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
popoverऐंकर स्थिति ऑटो-फ़्लिप कीवर्ड
अगर आपके पास कोई बुनियादी बदलाव है, जैसे कि ऊपर से नीचे या दाएं से दाएं (या दोनों) फ़्लिप करना, तो पसंद के मुताबिक @position-try एलान बनाने के चरण को छोड़ा जा सकता है. साथ ही, flip-block और flip-inline जैसे ब्राउज़र पर काम करने वाले पहले से मौजूद फ़्लिप कीवर्ड इस्तेमाल किए जा सकते हैं. ये, पसंद के मुताबिक बनाए गए @position-try एलानों के लिए स्टैंड-इन के तौर पर काम करते हैं और इन्हें एक-दूसरे के साथ इस्तेमाल किया जा सकता है:
position-try-options: flip-block, flip-inline, flip-block flip-inline;
कीवर्ड फ़्लिप करने से, आपके ऐंकर कोड को काफ़ी आसान बनाया जा सकता है. सिर्फ़ कुछ लाइनों की मदद से, दूसरी जगहों पर पूरी तरह से काम करने वाला ऐंकर बनाया जा सकता है:
#my-tooltip {
position-anchor: --question-mark;
inset-area: top;
position-try-options: flip-block;
}
position-try-options: flip-block के साथ ऑटो फ़्लिप का इस्तेमाल करनासबस्क्रोलर में ऐंकर के लिए position-visibility
ऐसे कुछ मामले हैं जिनमें हो सकता है कि आप पेज के सबस्क्रोलर में एलिमेंट को ऐंकर करना चाहें. इन मामलों में, position-visibility का इस्तेमाल करके यह कंट्रोल किया जा सकता है कि ऐंकर किसको दिखे. ऐंकर किस समय स्क्रीन पर दिखता है? यह कब नहीं दिखता? इस सुविधा की मदद से, इन विकल्पों पर आपका कंट्रोल रहता है. position-visibility: anchors-visible का इस्तेमाल तब किया जाता है, जब आपको पोज़िशन में रखे गए एलिमेंट को तब तक व्यू में रखना हो, जब तक कि ऐंकर व्यू से बाहर न आ जाए:
#tooltip {
position: fixed;
position-anchor: --anchor-top-anchor;
position-visibility: anchors-visible;
bottom: anchor(top);
}
position-visibility: anchors-visible डेमोइसके अलावा, ऐंकर को कंटेनर से ओवरफ़्लो होने से रोकने के लिए, position-visibility: no-overflow का इस्तेमाल किया जा सकता है.
#tooltip {
position: absolute;
position-anchor: --anchor-top-anchor;
position-visibility: no-overflow;
bottom: anchor(top);
}
position-visibility: no-overflow डेमोसुविधा का पता लगाना और पॉलीफ़िल करना
इस समय ब्राउज़र पर काम करने की सुविधा सीमित है, इसलिए हो सकता है कि आप कुछ सावधानियों के साथ इस एपीआई का इस्तेमाल करना चाहें. सबसे पहले, @supports सुविधा की क्वेरी का इस्तेमाल करके, सीधे सीएसएस में सहायता की जांच की जा सकती है. ऐसा करने का तरीका यह है कि अपनी ऐंकर स्टाइल को यहां बताए गए तरीके से रैप किया जाए:
@supports (anchor-name: --myanchor) {
/* Anchor styles here */
}
इसके अलावा, Oddbird की मदद से सीएसएस ऐंकर पोज़िशनिंग पॉलीफ़िल की मदद से, ऐंकर पोज़िशनिंग की सुविधा को पॉलीफ़िल किया जा सकता है. यह सुविधा Firefox 54, Chrome 51, Edge 79, और Safari 10 में काम करती है. यह पॉलीफ़िल ज़्यादातर ऐंकर पोज़िशन की बुनियादी सुविधाओं के साथ काम करता है. हालांकि, मौजूदा एलिमेंट को लागू नहीं किया गया है और इसमें कुछ पुराने सिंटैक्स हैं. आपके पास Unpkg लिंक का इस्तेमाल करने या उसे सीधे पैकेज मैनेजर में इंपोर्ट करने का विकल्प है.
सुलभता के बारे में जानकारी
ऐंकर पोज़िशनिंग एपीआई की मदद से, किसी एलिमेंट को अन्य लोगों के मुकाबले सही पोज़िशन में रखा जाता है. हालांकि, इससे एलिमेंट के बीच सही सिमैंटिक संबंध नहीं बनता. अगर ऐंकर एलिमेंट और पोज़िशन किए गए एलिमेंट के बीच सिमैंटिक संबंध है (उदाहरण के लिए, पोज़िशन किया गया एलिमेंट, ऐंकर टेक्स्ट के बारे में साइडबार की टिप्पणी है), तो ऐसा करने का एक तरीका यह है कि आप aria-details का इस्तेमाल करके ऐंकर एलिमेंट से पोज़िशन किए गए एलिमेंट पर पॉइंट करें. स्क्रीन रीडर सॉफ़्टवेयर अब भी एरिया की जानकारी का इस्तेमाल करने का तरीका सीख रहा है. हालांकि, इस सुविधा को बेहतर बनाया जा रहा है.
<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>
.anchor {
anchor-name: --anchor;
}
.positioned {
position: fixed;
position-anchor: --anchor;
}
अगर popover एट्रिब्यूट या <dialog> एलिमेंट के साथ ऐंकर पोज़िशनिंग का इस्तेमाल किया जा रहा है, तो सुलभता के लिए ब्राउज़र, फ़ोकस नेविगेशन में किए गए सुधारों को हैंडल करेगा. इसलिए, आपको अपने पॉपओवर या डायलॉग, डीओएम के हिसाब से रखने की ज़रूरत नहीं है. स्पेसिफ़िकेशन में, सुलभता के बारे में दी गई जानकारी के बारे में ज़्यादा पढ़ें.
नतीजा
यह एक नई सुविधा है और हम यह देखने के लिए उत्सुक हैं कि आप इसके साथ क्या बनाते हैं. अब तक, हमने कम्यूनिटी में काम के कुछ ऐसे उदाहरण देखे हैं जिन्हें बेहतर तरीके से इस्तेमाल किया जा सकता है. जैसे, चार्ट में डाइनैमिक लेबल, कनेक्टर लाइन, फ़ुटनोट, और विज़ुअल क्रॉस-रेफ़रेंसिंग. ऐंकर की जगह तय करने की सुविधा को आज़माने के दौरान, हम आपके सुझाव, शिकायत या राय जानना चाहेंगे. अगर आपको कोई गड़बड़ी मिलती है, तो हमें बताएं.