पब्लिश होने की तारीख: 29 अक्टूबर, 2025
Chrome 143 से, ऐंकर की गई कंटेनर क्वेरी का इस्तेमाल किया जा सकता है. इससे यह पता चलता है कि ऐंकर किया गया एलिमेंट, फ़ॉलबैक ऐंकर पोज़िशनिंग का इस्तेमाल कब कर रहा है. इस पोस्ट में, उस समस्या के बारे में बताया गया है जिसे यह सुविधा हल करती है.
सीएसएस ऐंकर पोज़िशनिंग एपीआई, किसी एलिमेंट (जैसे कि पॉपओवर) को दूसरे एलिमेंट (ऐंकर) से जोड़ने का एक बेहतरीन तरीका है. साथ ही, यह पोज़िशन-ट्राई-फ़ॉलबैक का एक सेट तय करता है. इसका इस्तेमाल तब किया जाता है, जब एलिमेंट के पास जगह नहीं होती. उदाहरण के लिए, अगर आपका ऐंकर्ड एलिमेंट शुरू में सबसे ऊपर दिखने के लिए स्टाइल किया गया है, लेकिन स्क्रोल करने पर वह स्क्रीन के किनारे पर पहुंच जाता है, तो ब्राउज़र "फ़्लिपिंग" को मैनेज कर सकता है, ताकि वह व्यूपोर्ट में बना रहे.
हालांकि, ऐंकर पोज़िशनिंग स्पेसिफ़िकेशन के लेवल 1 में एक अहम कमी थी: सीएसएस, एलिमेंट को फ़ॉलबैक पोज़िशन पर ले जा सकती थी. हालांकि, उसे यह पता नहीं चलता था कि कौनसी फ़ॉलबैक पोज़िशन चुनी गई है. इसका मतलब है कि उस आखिरी पोज़िशन के आधार पर, अलग-अलग स्टाइल लागू नहीं की जा सकती थीं. अगर टूलटिप नीचे से ऊपर की ओर फ़्लिप हो जाती है, तो उसका ऐरो अब भी गलत दिशा में दिखेगा. इसे JavaScript की मदद से ठीक किया जा सकता है.
सीएसएस ऐंकर पोज़िशन लेवल 2 स्पेसिफ़िकेशन में तय की गई ऐंकर की गई कंटेनर क्वेरी, इस समस्या को हल करती है. इससे सीएसएस ऐंकर पोज़िशनिंग को कॉन्टेक्स्ट की जानकारी मिलती है, जो पहले नहीं मिलती थी.
यह कैसे काम करता है: फ़ॉलबैक के लिए क्वेरी करना
ऐंकर की गई कंटेनर क्वेरी की मदद से, स्टाइल लागू की जा सकती हैं. ये स्टाइल इस बात पर आधारित होती हैं कि ब्राउज़र ने ऐंकर की पोज़िशनिंग को कैसे हल किया.
इसे सीएसएस की दो नई सुविधाओं के साथ सेट अप किया गया है:
container-type: anchored: इसे पोज़िशन किए गए एलिमेंट (उदाहरण के लिए, टूलटिप) पर लागू करें. इससे यह एक क्वेरी कंटेनर में बदल जाता है, जिसे ऐंकर की पोज़िशनिंग की स्थिति के बारे में "पता" होता है.@container anchored(fallback: ...): इस नए ऐट-रूल सिंटैक्स की मदद से, यह क्वेरी की जा सकती है कि आखिर में position-try-fallbacks का कौनसा विकल्प इस्तेमाल किया गया.
मान लें कि आपके पास एक टूलटिप है, जिसे आपको सबसे नीचे रखना है. हालांकि, अगर ऐसा नहीं हो पाता है, तो उसे सबसे ऊपर रखा जाएगा. यह कोड:
- शुरुआत में,
.tooltipको ऐंकर (--my-anchor) के सबसे नीचे रखने की कोशिश करता है. - अगर यह फ़िट नहीं होता है, तो फ़ॉलबैक इसे सबसे ऊपर ले जाता है.
@containerक्वेरी से इसका पता चलता है. टॉप फ़ॉलबैक लागू होने पर,anchored(fallback: top)क्वेरी सही हो जाती है.- इसकी मदद से, ::before छद्म-तत्व के कॉन्टेंट को "ऊपर की ओर" वाले ऐरो (▲) से बदलकर "नीचे की ओर" वाला ऐरो (▼) किया जा सकता है. साथ ही, इसकी पोज़िशन को अडजस्ट किया जा सकता है.
/* The element our tooltip is anchored to */
.anchor {
anchor-name: --my-anchor;
}
/* The positioned element (tooltip) */
.tooltip {
/* Use anchor positioning to set fallbacks */
position: absolute;
margin-top: 1rem;
position-anchor: --my-anchor;
position-area: bottom;
position-try-fallbacks: flip-block; /* Reposition in the block direction */
/* Make it an anchored query container */
container-type: anchored;
/* Add a default "up" arrow */
&::before {
content: '▲';
position: absolute;
bottom: 100%; /* Sits on top of the tooltip, pointing up */
}
}
/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
.tooltip::before {
/* The 'top' fallback was used, so flip the arrow */
content: '▼';
bottom: auto;
top: 100%; /* Move the arrow below the tooltip */
}
}
यह सब सीएसएस में किया जाता है. इसमें JavaScript, ऑब्ज़र्वर या अतिरिक्त क्लास का इस्तेमाल नहीं किया जाता. ध्यान दें: अगर पॉपओवर एपीआई का इस्तेमाल किया जा रहा है, तो आपको अपने ऐंकर के नाम साफ़ तौर पर बताने की ज़रूरत नहीं होगी, क्योंकि ऐंकर के बीच संबंध अपने-आप बन जाता है.
यहां दिए गए डेमो को देखें. इसमें बॉर्डर हैक का इस्तेमाल करके, सीएसएस ट्राएंगल बनाया गया है. साथ ही, ऐंकर की गई क्वेरी की मदद से ट्राएंगल की पोज़िशन बदली गई है:
नतीजा
ऐंकर की गई क्वेरी से, सीएसएस ब्राउज़र को किसी एलिमेंट की मौजूदा ऐंकर पोज़िशन के बारे में पता चलता है. इसका मतलब है कि आपके पास ज़्यादा बेहतर और कॉन्टेक्स्ट के हिसाब से काम करने वाले कॉम्पोनेंट बनाने का विकल्प है. टूलटिप ऐरो सिर्फ़ एक उदाहरण है. इसके अलावा, ये काम भी किए जा सकते हैं:
- जब मेन्यू फ़्लिप हो, तब उसके बैकग्राउंड का रंग बदलें.
- बॉर्डर स्टाइल को ऐंकर के सबसे नज़दीकी किनारे पर ले जाएं.
- पॉपओवर के बॉर्डर-रेडियस में बदलाव करें, ताकि "अटैच किया गया" कोना स्क्वेयर हो.
- किसी एलिमेंट को अलग-अलग तरीके से ऐनिमेट करें. यह इस बात पर निर्भर करता है कि वह किस फ़ॉलबैक पोज़िशन पर स्नैप करता है.
यह ऐंकर पोज़िशनिंग और कॉम्पोनेंट लाइब्रेरी के लिए एक बड़ी उपलब्धि है. इससे कम कोड के साथ ज़्यादा मज़बूत और सेल्फ-कंटेन्ड यूज़र इंटरफ़ेस (यूआई) एलिमेंट बनाए जा सकते हैं.