पेश है सीएसएस ऐंकर पोज़िशनिंग एपीआई

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

Chrome 125 में ऐंकर पोज़िशन की सुविधा उपलब्ध है.

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

इस एपीआई के मुख्य हिस्से में, ऐंकर और रैंकिंग वाले एलिमेंट के बीच संबंध की जानकारी होती है. ऐंकर एक ऐसा एलिमेंट होता है जिसे 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);
}

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

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);
}

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

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

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

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

@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;
}

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

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

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

नतीजा

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

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

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