CSS ऐंकर पोज़िशनिंग एपीआई

सीएसएस ऐंकर पोज़िशनिंग एपीआई की मदद से, एलिमेंट को दूसरे एलिमेंट के हिसाब से क्रम में लगाया जा सकता है. इन एलिमेंट को ऐंकर कहा जाता है. यह एपीआई, मेन्यू और सबमेन्यू, टूलटिप, चुनने, लेबल, कार्ड, सेटिंग डायलॉग वगैरह जैसी कई इंटरफ़ेस सुविधाओं के लिए, लेआउट की जटिल शर्तों को आसान बनाता है. ब्राउज़र में पहले से मौजूद ऐंकर पोज़िशन की मदद से, कई लेयर वाले यूज़र इंटरफ़ेस बनाए जा सकते हैं. इसके लिए, आपको तीसरे पक्ष की लाइब्रेरी के भरोसे नहीं रहना पड़ता. इससे आपको क्रिएटिव कामों की दुनिया का हिस्सा बनने का मौका मिलता है.

मुख्य सिद्धांत: ऐंकर और पोज़िशन किए गए एलिमेंट

इस एपीआई के मुख्य हिस्से में, ऐंकर और रैंकिंग वाले एलिमेंट के बीच संबंध की जानकारी होती है. ऐंकर एक ऐसा एलिमेंट होता है जिसे anchor-name प्रॉपर्टी का इस्तेमाल करके, रेफ़रंस पॉइंट के तौर पर तय किया जाता है. पोज़िशन किया गया एलिमेंट, position-anchor प्रॉपर्टी का इस्तेमाल करके किसी ऐंकर के हिसाब से रखा गया एलिमेंट होता है. इसके अलावा, पोज़िशनिंग लॉजिक में साफ़ तौर पर anchor-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-start
• left= inset-inline-start
• bottom = inset-block-end
• right= 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;
}

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

एक से ज़्यादा ऐंकर

एलिमेंट को एक से ज़्यादा ऐंकर से जोड़ा जा सकता है. इसका मतलब है कि आपको एक से ज़्यादा ऐंकर के हिसाब से पोज़िशन की वैल्यू सेट करनी पड़ सकती हैं. ऐसा करने के लिए, anchor() फ़ंक्शन का इस्तेमाल करें. साथ ही, पहले आर्ग्युमेंट में साफ़ तौर पर यह बताएं कि किस ऐंकर का इस्तेमाल किया जा रहा है. यहां दिए गए उदाहरण में, किसी ऐंकर एलिमेंट का ऊपरी हिस्सा, एक ऐंकर के सबसे नीचे दाईं ओर, और दूसरे ऐंकर के सबसे ऊपर बाईं ओर ऐंकर किया गया है:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

position-area के साथ पोज़िशन

ऐंकरिंग एपीआई में, position-area प्रॉपर्टी का इस्तेमाल करके, लेआउट का नया तरीका शामिल है.

इस प्रॉपर्टी की मदद से, ऐंकर एलिमेंट को उनके ऐंकर के हिसाब से रखा जा सकता है. साथ ही, यह नौ सेल वाले ग्रिड के बीच में ऐंकर एलिमेंट के साथ काम करता है.

ऐब्सलूट पोज़िशनिंग के बजाय position-area का इस्तेमाल करने के लिए, position-area प्रॉपर्टी का इस्तेमाल करें. साथ ही, इसमें फ़िज़िकल या लॉजिकल वैल्यू डालें. उदाहरण के लिए:

• ऊपर बीच में: position-area: top या position-area: block-start
• बाएं-बीच में: position-area: left या position-area: inline-start
• नीचे मध्य में: position-area: bottom या position-area: block-end
• दाईं ओर बीच में: position-area: right या position-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);
}

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

पॉपओवर और डायलॉग जैसे टॉप लेयर एलिमेंट के साथ ऐंकर का इस्तेमाल करना

ऐंकर पोज़िशनिंग, popover जैसे टॉप लेयर एलिमेंट के साथ बेहतर तरीके से काम करती है. और <dialog>. हालांकि, इन एलिमेंट को बाकी डीओएम सबट्री से अलग लेयर में रखा जाता है, लेकिन ऐंकर पोज़िशन से उन्हें वापस टेदर किया जा सकता है और स्क्रोल करके उन एलिमेंट के साथ स्क्रोल किया जा सकता है जो ऊपरी लेयर में नहीं हैं. यह लेयर वाले इंटरफ़ेस के लिए एक बड़ी उपलब्धि है.

यहां दिए गए उदाहरण में, बटन का इस्तेमाल करके टूलटिप पॉपओवर का एक सेट ट्रिगर किया गया है. बटन, ऐंकर है और टूलटिप, पोज़िशन किया गया एलिमेंट है. किसी भी दूसरे ऐंकर किए गए एलिमेंट की तरह ही, पोज़िशन किए गए एलिमेंट को स्टाइल किया जा सकता है. ऐसे खास उदाहरण के लिए, anchor-name और position-anchor बटन और टूलटिप पर इनलाइन स्टाइल हैं. डाइनैमिक कॉन्टेंट जनरेट करते समय, हर ऐंकर को एक यूनीक नाम की ज़रूरत होती है. इसलिए, ऐसा करने के लिए इनलाइनिंग सबसे आसान तरीका है.

@position-try की मदद से, ऐंकर की पोज़िशन अडजस्ट करें

शुरुआती ऐंकर पोज़िशन तय करने के बाद, अगर ऐंकर अपने ब्लॉक के किनारों तक पहुंच जाता है, तो हो सकता है कि आप उसकी पोज़िशन में बदलाव करना चाहें. ऐंकर की अन्य जगहें बनाने के लिए, position-try-fallbacks प्रॉपर्टी के साथ-साथ @position-try डायरेक्टिव का इस्तेमाल किया जा सकता है.

नीचे दिए गए उदाहरण में, मेन्यू की दाईं ओर एक सबमेन्यू दिखता है. मेन्यू और सबमेन्यू, पॉपओवर एट्रिब्यूट के साथ-साथ ऐंकर पोज़िशनिंग एपीआई का बेहतरीन इस्तेमाल करते हैं. ऐसा इसलिए होता है, क्योंकि ये मेन्यू किसी ट्रिगर बटन से ऐंकर किए जाते हैं.

इस सबमेन्यू के लिए, अगर हॉरिज़ॉन्टल तौर पर काफ़ी जगह नहीं है, तो इसे मेन्यू के नीचे ले जाया जा सकता है. ऐसा करने के लिए, पहले शुरुआती पोज़िशन सेट अप करें:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  position-area: right span-bottom;
}

इसके बाद, @position-try का इस्तेमाल करके फ़ॉलबैक ऐंकर की पोज़िशन सेट अप करें:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  posotion-area: bottom;
}

आखिर में, दोनों डिवाइसों को position-try-fallbacks से कनेक्ट करें. कुल मिलाकर, यह इस तरह दिखता है:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  position-area: right span-bottom;
  */ connect with position-try-fallbacks */
  position-try-fallbacks: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  position-area: bottom;
}

ऐंकर पोज़िशन के अपने-आप बदलने वाले कीवर्ड

अगर आपको कोई बुनियादी बदलाव करना है, जैसे कि ऊपर से नीचे या बाईं से दाईं ओर (या दोनों) फ़्लिप करना, तो कस्टम @position-try एलान बनाने का चरण छोड़ा जा सकता है. इसके बजाय, ब्राउज़र पर काम करने वाले फ़्लिप कीवर्ड का इस्तेमाल किया जा सकता है. जैसे, flip-block और flip-inline. ये कोड, पसंद के मुताबिक @position-try एलानों के लिए स्टैंड-इन की तरह काम करते हैं. साथ ही, इनका इस्तेमाल एक-दूसरे के साथ किया जा सकता है:

position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

कीवर्ड फ़्लिप करने से आपके ऐंकर कोड काफ़ी आसान हो सकते हैं. सिर्फ़ कुछ लाइनों की मदद से, पूरी तरह से काम करने वाला ऐंकर बनाया जा सकता है. इसमें, ऐंकर के लिए अलग-अलग जगहें भी चुनी जा सकती हैं:

#my-tooltip {
  position-anchor: --question-mark;
  position-area: top;
  position-try-fallbacks: 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: no-overflow का इस्तेमाल करके भी ऐंकर को उसके कंटेनर से बाहर निकलने से रोका जा सकता है.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

सुविधा का पता लगाना और पॉलीफ़िल करना

चूंकि ब्राउज़र समर्थन इस समय सीमित है, इसलिए हो सकता है कि आप कुछ सावधानियों के साथ इस API का उपयोग करना चाहें. सबसे पहले, @supports सुविधा क्वेरी का इस्तेमाल करके, सीधे सीएसएस में सहायता देखी जा सकती है. ऐसा करने का तरीका यह है कि अपने ऐंकर स्टाइल को इस तरह से रैप करें:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

इसके अलावा, ऐंकर पोज़िशन की सुविधा को Oddbird की सीएसएस ऐंकर पोज़िशनिंग पॉलीफ़िल की मदद से भी पॉलीफ़िल किया जा सकता है. यह सुविधा Firefox 54, Chrome 51, Edge 79, और Safari 10 पर काम करती है. यह पॉलीफ़िल, ऐंकर पोज़िशन की ज़्यादातर बुनियादी सुविधाओं के साथ काम करता है. हालांकि, इसे लागू करने की प्रोसेस पूरी नहीं हुई है और इसमें कुछ पुराना सिंटैक्स शामिल है. unpkg लिंक का इस्तेमाल किया जा सकता है या इसे सीधे पैकेज मैनेजर में इंपोर्ट किया जा सकता है.

सुलभता के बारे में जानकारी

हालांकि, ऐंकर पोज़िशनिंग एपीआई एक एलिमेंट को दूसरों के मुकाबले पोज़िशन करने की अनुमति देता है, लेकिन इससे एलिमेंट के बीच साफ़ तौर पर कोई मतलब नहीं बनता. अगर ऐंकर एलिमेंट और पोज़िशन किए गए एलिमेंट के बीच सेमैंटिक संबंध है, तो aria-details का इस्तेमाल करके, ऐंकर एलिमेंट से पोज़िशन किए गए एलिमेंट पर ले जाया जा सकता है. उदाहरण के लिए, पोज़िशन किया गया एलिमेंट, ऐंकर टेक्स्ट के बारे में साइडबार टिप्पणी है. स्क्रीन रीडर सॉफ़्टवेयर, 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> एलिमेंट के साथ ऐंकर पोज़िशन का इस्तेमाल किया जा रहा है, तो सही सुलभता के लिए ब्राउज़र, फ़ोकस नेविगेशन में किए गए सुधारों को हैंडल करेगा. इससे, आपको पॉपओवर या डायलॉग को डीओएम क्रम में रखने की ज़रूरत नहीं होगी. खास जानकारी में सुलभता के बारे में नोट के बारे में और पढ़ें.

इसके बारे में और पढ़ें

• सीएसएस ऐंकर पोज़िशन के साथ एलिमेंट जोड़ने के लिए एक लाइन बनाना
• फ़्यूचर सीएसएस: रोमन कोमारोव की ओर से ऐंकर पोज़िशनिंग
• अन का कोडपेन कलेक्शन, जिसमें ऐंकर के डेमो शामिल हैं
• ऐंकर पोज़िशनिंग टूल