सीएसएस दस्तावेज़ नियम (@document) में एक गहरी डुबकी, वेब डेवलपर्स को लक्षित वेब दस्तावेज़ों पर विशिष्ट शैलियों को लागू करने, उपयोगकर्ता अनुभव को बढ़ाने और वेबसाइट प्रदर्शन को अनुकूलित करने के लिए सशक्त बनाना।
सीएसएस दस्तावेज़ नियम में महारत हासिल करना: विशिष्ट दस्तावेज़ों के लिए शैलियों को अनुकूलित करना
वेब विकास के लगातार विकसित हो रहे परिदृश्य में, सीएसएस वेब सामग्री की प्रस्तुति को नियंत्रित करने के लिए शक्तिशाली उपकरण प्रदान करना जारी रखता है। ऐसा ही एक उपकरण, जिसे अक्सर अनदेखा किया जाता है लेकिन अविश्वसनीय रूप से उपयोगी है, सीएसएस दस्तावेज़ नियम है, जिसे @document द्वारा दर्शाया गया है। यह नियम आपको उन दस्तावेज़ों पर विशिष्ट शैलियों को लागू करने की अनुमति देता है जो कुछ मानदंडों से मेल खाते हैं, जो लक्षित स्टाइलिंग और बेहतर उपयोगकर्ता अनुभवों के लिए संभावनाएं खोलते हैं।
सीएसएस दस्तावेज़ नियम क्या है?
@document नियम, सीएसएस सशर्त नियम मॉड्यूल स्तर 3 का हिस्सा है, आपको सीएसएस नियमों को परिभाषित करने में सक्षम बनाता है जो केवल उनके यूआरएल या यूआरएल विशेषताओं के आधार पर विशिष्ट दस्तावेज़ों पर लागू होते हैं। मीडिया क्वेरीज़ के विपरीत, जो विभिन्न उपकरणों या स्क्रीन आकारों को लक्षित करते हैं, @document नियम विशिष्ट वेब पृष्ठों या पृष्ठों के सेट को लक्षित करता है। यह विशेष रूप से मूल्यवान है जब आपको विभिन्न डोमेन, विशिष्ट सबडोमेन या यहां तक कि किसी वेबसाइट के भीतर अलग-अलग फ़ाइलों पर होस्ट किए गए पृष्ठों पर अद्वितीय स्टाइलिंग लागू करने की आवश्यकता होती है।
इसे एक अत्यधिक विशिष्ट चयनकर्ता के रूप में सोचें जो दस्तावेज़ स्तर पर संचालित होता है, जो आपको अपनी वेब सामग्री की उपस्थिति पर बारीक नियंत्रण देता है। यह कई साइटों पर ब्रांडेड अनुभव बनाने, पुरानी सामग्री को संभालने और यहां तक कि विश्व स्तर पर रोल आउट करने से पहले वेबसाइट के विशिष्ट अनुभागों पर नए डिजाइनों का परीक्षण करने के लिए एक शक्तिशाली उपकरण है।
@document नियम का सिंटैक्स
@document नियम का मूल सिंटैक्स इस प्रकार है:
@document <match-function> {
/* CSS rules */
}
यहां घटकों का विवरण दिया गया है:
@document: यह कीवर्ड दस्तावेज़ नियम शुरू करता है।<match-function>: यह उन मानदंडों को निर्दिष्ट करता है जिन्हें शैलियों को लागू करने के लिए दस्तावेज़ के यूआरएल को पूरा करना होगा। कई मिलान फ़ंक्शन उपलब्ध हैं, जैसा कि हम नीचे देखेंगे।{ /* CSS rules */ }: इस ब्लॉक में सीएसएस नियम शामिल हैं जो लागू किए जाएंगे यदि दस्तावेज़ का यूआरएल निर्दिष्ट मानदंडों से मेल खाता है। ये नियम मानक सीएसएस सिंटैक्स का पालन करते हैं।
मिलान फ़ंक्शन: लक्ष्य दस्तावेज़ों को परिभाषित करना
@document नियम का हृदय इसके मिलान कार्यों में निहित है। ये फ़ंक्शन उन शर्तों को परिभाषित करते हैं जिन्हें संबद्ध सीएसएस नियमों को लागू करने के लिए दस्तावेज़ के यूआरएल को पूरा करना होगा। आइए सामान्य मिलान कार्यों की जांच करें:
1. url()
url() फ़ंक्शन उस दस्तावेज़ से मेल खाता है जिसका यूआरएल निर्दिष्ट यूआरएल के बिल्कुल समान है। यह सबसे सटीक मिलान विधि है।
@document url("https://www.example.com/specific-page.html") {
body {
background-color: #f0f0f0;
}
}
इस उदाहरण में, background-color केवल https://www.example.com/specific-page.html पर स्थित दस्तावेज़ के body पर लागू किया जाएगा।
2. url-prefix()
url-prefix() फ़ंक्शन किसी भी ऐसे दस्तावेज़ से मेल खाता है जिसका यूआरएल निर्दिष्ट उपसर्ग से शुरू होता है। यह पूरे निर्देशिकाओं या सबडोमेन पर शैलियों को लागू करने के लिए उपयोगी है।
@document url-prefix("https://www.example.com/blog/") {
h1 {
color: #007bff;
}
}
यहां, www.example.com पर /blog/ निर्देशिका के भीतर सभी पृष्ठों के h1 तत्वों को रंग #007bff के साथ स्टाइल किया जाएगा।
3. domain()
domain() फ़ंक्शन किसी भी ऐसे दस्तावेज़ से मेल खाता है जिसका डोमेन निर्दिष्ट डोमेन के समान है। यह पूरे डोमेन में शैलियों को लागू करने के लिए उपयोगी है।
@document domain("example.com") {
a {
font-weight: bold;
}
}
इस मामले में, example.com डोमेन के भीतर किसी भी पृष्ठ पर सभी लिंक (a तत्व) का font-weight bold होगा।
4. regexp()
regexp() फ़ंक्शन आपको यूआरएल से मिलान करने के लिए नियमित अभिव्यक्तियों का उपयोग करने की अनुमति देता है। यह सबसे लचीली और शक्तिशाली मिलान क्षमता प्रदान करता है।
@document regexp("https://.*\.example\.com/.*\.pdf") {
body {
margin: 20px;
}
}
यह उदाहरण example.com के सबडोमेन पर होस्ट किए गए किसी भी पीडीएफ दस्तावेज़ के body पर 20px का margin लागू करता है। नियमित अभिव्यक्ति के भीतर विशेष वर्णों के एस्केपिंग पर ध्यान दें।
@document नियम के व्यावहारिक अनुप्रयोग
उपयोगकर्ता अनुभव को बढ़ाने और वेबसाइट रखरखाव को सुव्यवस्थित करने के लिए @document नियम को विभिन्न परिदृश्यों में लागू किया जा सकता है। यहां कुछ व्यावहारिक उदाहरण दिए गए हैं:
1. कई वेबसाइटों पर ब्रांडिंग स्थिरता
कल्पना कीजिए कि आपकी कंपनी की कई वेबसाइटें हैं, जिनमें से प्रत्येक का अपना विशिष्ट उद्देश्य है। आप उन सभी पर एक सुसंगत ब्रांडिंग अनुभव सुनिश्चित करने के लिए @document नियम का उपयोग कर सकते हैं।
/* Common branding styles */
@document domain("example.com"), domain("example.net"), domain("example.org") {
body {
font-family: Arial, sans-serif;
color: #333;
}
.logo {
background-image: url("https://www.example.com/images/logo.png");
}
}
यह कोड स्निपेट example.com, example.net और example.org डोमेन पर होस्ट की गई सभी वेबसाइटों पर समान फ़ॉन्ट परिवार, टेक्स्ट रंग और लोगो लागू करता है। यह एक एकीकृत ब्रांड पहचान सुनिश्चित करता है, भले ही कोई उपयोगकर्ता विशिष्ट वेबसाइट पर जा रहा हो।
2. पुरानी सामग्री को स्टाइल करना
कई वेबसाइटों में पुरानी सामग्री होती है जो वर्तमान डिज़ाइन मानकों के अनुरूप नहीं होती है। @document नियम का उपयोग वेबसाइट के बाकी हिस्सों को प्रभावित किए बिना इन पुराने पृष्ठों पर विशिष्ट शैलियों को लागू करने के लिए किया जा सकता है।
/* Styling for legacy content */
@document url-prefix("https://www.example.com/legacy/") {
.old-table {
border: 1px solid #ccc;
width: 100%;
}
}
यह उदाहरण मूल HTML में संशोधन की आवश्यकता के बिना, /legacy/ निर्देशिका के भीतर .old-table क्लास वाली तालिकाओं में एक बॉर्डर और चौड़ाई लागू करता है, जिससे उनकी उपस्थिति में सुधार होता है।
3. ए/बी टेस्टिंग
ए/बी टेस्टिंग करते समय, आप उपयोगकर्ताओं के एक सबसेट के लिए वेबसाइट के एक विशिष्ट पृष्ठ या अनुभाग पर विभिन्न शैलियों को लागू करना चाह सकते हैं। @document नियम का उपयोग इन परीक्षण पृष्ठों को लक्षित करने के लिए किया जा सकता है।
/* A/B testing styles */
@document url("https://www.example.com/landing-page-test.html") {
.cta-button {
background-color: #28a745; /* Green button */
color: white;
}
}
/* Original styles (served to most users) */
.cta-button {
background-color: #007bff; /* Blue button */
color: white;
}
इस परिदृश्य में, https://www.example.com/landing-page-test.html पर आने वाले आगंतुकों को एक हरा कॉल-टू-एक्शन बटन दिखाई देगा, जबकि अन्य उपयोगकर्ताओं को डिफ़ॉल्ट नीला बटन दिखाई देगा। यह आपको पूरी वेबसाइट को प्रभावित किए बिना यह ट्रैक करने की अनुमति देता है कि कौन सा बटन बेहतर प्रदर्शन करता है।
4. एक आईफ्रेम के भीतर बाहरी वेबसाइटों को स्टाइल करना
यदि आप किसी अन्य वेबसाइट से सामग्री को एक आईफ्रेम का उपयोग करके एम्बेड कर रहे हैं, तो आप इसे अपनी साइट के डिज़ाइन के साथ बेहतर फिट बनाने के लिए कुछ बुनियादी स्टाइलिंग लागू करना चाह सकते हैं। @document नियम इसमें मदद कर सकता है, हालांकि इसकी प्रभावशीलता आईफ्रेम की उत्पत्ति और एम्बेडेड साइट की सामग्री सुरक्षा नीति (CSP) पर निर्भर करती है।
/* Styling content within an iframe from another domain */
@document domain("another-example.com") {
body {
font-size: 14px;
}
}
यह एक आईफ्रेम के भीतर another-example.com से लोड की गई सामग्री के फ़ॉन्ट आकार को बदलने का प्रयास करेगा। ध्यान दें कि यह समान-मूल नीति और CSP प्रतिबंधों के अधीन है। यदि another-example.com में एक प्रतिबंधात्मक CSP है, तो ये शैलियाँ लागू नहीं की जा सकती हैं।
5. विशिष्ट सामग्री प्रबंधन प्रणालियों (CMS) के लिए शैलियों को अनुकूलित करना
विभिन्न सीएमएस प्लेटफ़ॉर्म अक्सर अलग-अलग HTML संरचनाएं उत्पन्न करते हैं या विशिष्ट सीएसएस क्लास शामिल करते हैं। आप किसी विशेष सीएमएस द्वारा उत्पन्न पृष्ठों को लक्षित करने और विशिष्ट स्टाइलिंग समायोजन लागू करने के लिए url-prefix के साथ संयुक्त @document का उपयोग कर सकते हैं।
/* Targeting pages generated by a specific CMS */
@document url-prefix("https://www.example.com/cms-generated-pages/") {
.cms-content p {
line-height: 1.6;
}
}
यह उदाहरण /cms-generated-pages/ निर्देशिका के अंतर्गत स्थित पृष्ठों पर .cms-content क्लास के भीतर पैराग्राफ की लाइन ऊंचाई को बढ़ाता है, जो एक विशिष्ट सीएमएस द्वारा उत्पन्न होने के लिए माने जाते हैं। यह उस सीएमएस द्वारा उत्पन्न सामग्री की प्रस्तुति को ठीक करने की अनुमति देता है।
अन्य सीएसएस तकनीकों के साथ @document का संयोजन
अधिक परिष्कृत और अनुकूलनीय स्टाइलिंग समाधान बनाने के लिए @document नियम का उपयोग अन्य सीएसएस तकनीकों के साथ प्रभावी ढंग से किया जा सकता है।
1. मीडिया क्वेरीज़ के साथ @document का उपयोग करना
आप दस्तावेज़ यूआरएल और डिवाइस या स्क्रीन आकार दोनों के आधार पर अलग-अलग शैलियों को लागू करने के लिए मीडिया क्वेरीज़ के साथ @document को जोड़ सकते हैं।
@document domain("example.com") {
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
}
यह उदाहरण example.com डोमेन के भीतर सभी पृष्ठों के लिए 768px या उससे कम की स्क्रीन चौड़ाई वाले उपकरणों पर फ़ॉन्ट आकार को कम करता है।
2. सीएसएस चर (कस्टम गुण) का लाभ उठाना
सीएसएस चर आपको पुन: प्रयोज्य मानों को परिभाषित करने की अनुमति देते हैं जिन्हें आसानी से अपडेट किया जा सकता है। आप विशिष्ट दस्तावेज़ों के लिए विभिन्न सीएसएस चर मान सेट करने के लिए @document का उपयोग कर सकते हैं।
/* Setting CSS variables for a specific subdomain */
@document url-prefix("https://blog.example.com/") {
:root {
--primary-color: #ff6600; /* Orange */
--secondary-color: #333;
}
}
/* Using the variables in other styles */
body {
background-color: var(--primary-color);
color: var(--secondary-color);
}
इस उदाहरण में, blog.example.com सबडोमेन पर सभी पृष्ठों के लिए प्राथमिक और द्वितीयक रंग क्रमशः नारंगी और गहरे भूरे रंग पर सेट हैं। फिर इन चर का उपयोग बॉडी पृष्ठभूमि और टेक्स्ट रंग को स्टाइल करने के लिए किया जाता है। यह दृष्टिकोण रखरखाव को बढ़ाता है और वेबसाइट के विभिन्न हिस्सों में शैलियों के आसान अनुकूलन की अनुमति देता है।
3. @document के साथ !important का उपयोग करना
हालांकि आम तौर पर हतोत्साहित किया जाता है, @document नियमों के भीतर !important का उपयोग कुछ स्थितियों में आपके सीएसएस में कहीं और परिभाषित शैलियों को ओवरराइड करने के लिए आवश्यक हो सकता है। हालांकि, विशिष्टता संबंधी समस्याओं से बचने के लिए इसका उपयोग सावधानी से करें।
@document url("https://www.example.com/special-page.html") {
.override-style {
color: red !important;
}
}
यह निर्दिष्ट पृष्ठ पर .override-style क्लास वाले तत्वों के टेक्स्ट रंग को अन्य शैली घोषणाओं की परवाह किए बिना, जबरदस्ती लाल पर सेट कर देगा। इसका उपयोग संयम से करें और केवल तभी करें जब बिल्कुल आवश्यक हो।
ब्राउज़र अनुकूलता
@document नियम को आधुनिक ब्राउज़रों में अच्छा समर्थन है। हालांकि, पुराने ब्राउज़र इसका समर्थन नहीं कर सकते हैं। अपनी परियोजनाओं में इसे लागू करने से पहले हमेशा Can I use जैसे संसाधनों पर नवीनतम ब्राउज़र अनुकूलता जानकारी की जांच करें। यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, तो दस्तावेज़ यूआरएल के आधार पर विशिष्ट शैलियों को लागू करने के लिए सर्वर-साइड स्क्रिप्टिंग या जावास्क्रिप्ट जैसी वैकल्पिक तकनीकों का उपयोग करने पर विचार करें।
@document का उपयोग करने के लिए सर्वोत्तम अभ्यास
यह सुनिश्चित करने के लिए कि @document नियम का आपका उपयोग प्रभावी और बनाए रखने योग्य है, निम्नलिखित सर्वोत्तम प्रथाओं पर विचार करें:
- विशिष्टता: सीएसएस विशिष्टता के प्रति सचेत रहें।
@documentनियम के भीतर परिभाषित शैलियों को कहीं और परिभाषित अधिक विशिष्ट चयनकर्ताओं द्वारा ओवरराइड किया जा सकता है। - रखरखाव क्षमता: प्रत्येक
@documentनियम के उद्देश्य को समझाने के लिए स्पष्ट और वर्णनात्मक टिप्पणियों का उपयोग करें। यह आपको और अन्य डेवलपर्स को भविष्य में कोड को समझने और बनाए रखने में मदद करेगा। - संगठन: पठनीयता और संगठन को बेहतर बनाने के लिए अपनी सीएसएस फ़ाइलों में संबंधित
@documentनियमों को एक साथ समूहित करें। - परीक्षण: यह सुनिश्चित करने के लिए कि वे इच्छित दस्तावेज़ों पर सही ढंग से लागू हैं, अपने
@documentनियमों का अच्छी तरह से परीक्षण करें। - अति प्रयोग से बचें:
@documentनियम का अत्यधिक उपयोग न करें। यदि संभव हो, तो वांछित स्टाइलिंग प्राप्त करने के लिए अधिक पारंपरिक सीएसएस चयनकर्ताओं और तकनीकों का उपयोग करें।@documentनियम तब सबसे प्रभावी होता है जब आपको बहुत विशिष्ट दस्तावेज़ों या दस्तावेज़ों के सेट को लक्षित करने की आवश्यकता होती है। - प्रदर्शन: जबकि प्रदर्शन प्रभाव आम तौर पर नगण्य होता है, जटिल
regexp()कार्यों के अत्यधिक उपयोग से संभावित रूप से प्रतिपादन प्रदर्शन प्रभावित हो सकता है। दक्षता के लिए अपनी नियमित अभिव्यक्तियों को अनुकूलित करें।
@document नियम के विकल्प
हालांकि @document नियम एक शक्तिशाली उपकरण है, ऐसे वैकल्पिक दृष्टिकोण हैं जिनका उपयोग आप समान परिणाम प्राप्त करने के लिए कर सकते हैं, खासकर जब पुराने ब्राउज़रों या जटिल परिदृश्यों से निपट रहे हों।
1. सर्वर-साइड स्क्रिप्टिंग
PHP, Python या Node.js जैसी सर्वर-साइड स्क्रिप्टिंग भाषाओं का उपयोग करके, आप अनुरोधित यूआरएल का पता लगा सकते हैं और यूआरएल के आधार पर अलग-अलग सीएसएस फाइलें या इनलाइन शैलियाँ परोस सकते हैं। यह दृष्टिकोण अधिकतम लचीलापन प्रदान करता है लेकिन सर्वर-साइड कोड परिवर्तनों की आवश्यकता होती है।
2. जावास्क्रिप्ट
आप वर्तमान यूआरएल का पता लगाने और दस्तावेज़ पर गतिशील रूप से सीएसएस क्लास या शैलियाँ लागू करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। यह दृष्टिकोण अच्छा लचीलापन प्रदान करता है और इसे पूरी तरह से क्लाइंट-साइड पर लागू किया जा सकता है, लेकिन इसके लिए जावास्क्रिप्ट निष्पादन की आवश्यकता होती है।
3. सीएसएस प्रीप्रोसेसर (Sass, Less)
Sass और Less जैसे CSS प्रीप्रोसेसर आपको कुछ शर्तों के आधार पर अलग-अलग CSS नियम उत्पन्न करने के लिए चर और सशर्त कथनों का उपयोग करने की अनुमति देते हैं। जबकि वे दस्तावेज़-आधारित मिलान का सीधे समर्थन नहीं करते हैं, आप समान परिणाम प्राप्त करने के लिए सर्वर-साइड स्क्रिप्टिंग या जावास्क्रिप्ट के संयोजन में उनका उपयोग कर सकते हैं।
निष्कर्ष
@document नियम वेब डेवलपर्स के लिए एक मूल्यवान उपकरण है जो विशिष्ट वेब दस्तावेज़ों की स्टाइलिंग पर सटीक नियंत्रण चाहते हैं। इसके सिंटैक्स, मिलान फ़ंक्शन और व्यावहारिक अनुप्रयोगों को समझकर, आप इसका लाभ ब्रांडेड अनुभव बनाने, पुरानी सामग्री को स्टाइल करने, ए/बी परीक्षण करने और विभिन्न सीएमएस प्लेटफार्मों के लिए शैलियों को अनुकूलित करने के लिए उठा सकते हैं। जबकि ब्राउज़र अनुकूलता पर विचार किया जाना चाहिए, और वैकल्पिक दृष्टिकोण मौजूद हैं, @document नियम आपकी वेब परियोजनाओं की अनूठी जरूरतों के अनुरूप अपने सीएसएस को तैयार करने का एक शक्तिशाली और कुशल तरीका बना हुआ है। रखरखाव, संगठन और इष्टतम प्रदर्शन सुनिश्चित करने के लिए सर्वोत्तम प्रथाओं का पालन करना याद रखें। इसकी संभावनाओं का अन्वेषण करें और अपनी वेबसाइट की प्रस्तुति पर नियंत्रण के एक नए स्तर को अनलॉक करें। यह किसी भी वेब डेवलपर के टूलकिट में एक शक्तिशाली उपकरण है जब इसे सही ढंग से और उचित रूप से उपयोग किया जाता है।