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

Una Kravets

पब्लिश करने की तारीख: 10 मई, 2024

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 125.
  • एज: 125.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: यह सुविधा काम नहीं करती. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

इस एपीआई के मुख्य हिस्से में, ऐंकर और पोज़िशन किए गए एलिमेंट के बीच का संबंध होता है. ऐंकर एक ऐसा एलिमेंट होता है जिसे anchor-name प्रॉपर्टी का इस्तेमाल करके, रेफ़रंस पॉइंट के तौर पर तय किया जाता है. पोज़िशन किया गया एलिमेंट, position-anchor प्रॉपर्टी का इस्तेमाल करके किसी ऐंकर के हिसाब से रखा गया एलिमेंट होता है. इसके अलावा, पोज़िशनिंग लॉजिक में साफ़ तौर पर anchor-name का इस्तेमाल करके भी एलिमेंट को पोज़िशन किया जा सकता है.

ऐंकर एलिमेंट और पोज़िशन किए गए एलिमेंट.

ऐंकर सेट अप करना

ऐंकर बनाना आसान है. चुने गए एलिमेंट पर 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);
}

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

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

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

  /* Anchor styles here */

}

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

नतीजा

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

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