CSS के अपवाद (Exclusions): उबाऊ लेआउट को कम उबाऊ बनाना

इस टुटोरिअल में, हम CSS के Exclusions का पता लगाएंगे. पहली झलक में, CSS Exclusions CSS Shapes की तरह ही लग सकता है क्योंकि यह भी कंटेंट को एलिमेंट के चारो ओर लपेट लेता है. तकनीकी रूप से फिर भी इसका उद्देश्य एकदम अलग है.

CSS का shapes module एक एलिमेंट के सही अकार को परिभाषित करता हैं, परन्तु कंटेंट इन आकारों के चारो और नहीं लिपटेंगे (wrap) जब तक की एलिमेंट floated न हो. दूसरी तरफ, CSS का Exclusions module, ख़ास तौर पर इसके लिए डिज़ाइन किया गया है; inline कंटेंट को एलिमेंट के चारो ओर लपेटने को स्वीकार करना वो भी बिना floating के, चाहे एलिमेंट किसी भी position में हो - absolute, relative, या fixed.

Properties

CSS का Exclusions Module कुछ नयी प्रॉपर्टीज और वैल्यूज को परिचित कराता है, अर्थात:

• wrap-flow: exclusion एरिया को सेट करना, साथ ही साथ कंटेंट कैसे इसके चारो ओर लिपटता है.
• wrap-margin: यह मार्जिन या offset को exclusion एरिया के आसपास सेट करने के लिए काफी आत्म व्याख्यात्मक (self-explanatory) है.

Browser का support

यह जानना बेहद आवश्यक है की CSS Exclusions अभी सिर्फ इंटरनेट एक्स्प्लोरर 10 या उससे ऊपर और Edge, में कार्य करता है, यह एक बार फिर से दिखाता है की माइक्रोसॉफ्ट वेब ब्राउज़र की सीमा को कैसे बड़ा रहा है (हम उनका CSS Grid के उत्थान (development) के लिए भी धन्यवाद देतें हैं). फ़िलहाल के लिए, हमें इस नयी प्रॉपर्टी का प्रयोग करने के लिए -ms- प्रीफिक्स करना पड़ेगा.

CSS Exclusions के कार्य को बेहतर ढंग से समझने के लिए, हमने एक आसान सा शुरूआती पेज बनाया जिसमे कुछ लाइन्स के कंटेंट और अंत में एक avatar image शामिल हैं.

यह वेब में काफी सामान्य पैटर्न है, तो आईये हम देखते हैं की यदि हम इसे CSS Exclusions का प्रयोग करके कुछ पोलिश कर पाएं. मान लें की आपका ब्राउज़र इसे सपोर्ट नहीं करता, हम इस परिणाम के लिए यह सोच रहे हैं:

CSS Exclusions का प्रयोग करना

सबसे पहले, आईये हम कंटेंट को दो कॉलम में व्यवस्थित कर दें और avatar image की स्थिति बीच में कर दें. इससे फर्क नहीं पड़ता की आप ने लेआउट को कैसे व्यवस्थित किया है, आप CSS Flexbox, CSS Grid, या "परंपरागत" float प्रॉपर्टी का प्रयोग कर सकते हैं.

हम ऊपर की इमेज में देख सकते हैं की डॉक्यूमेंट के फ्लो में से avatar image हटा दी गयी है और यह कंटेंट के ऊपर उसे ढकते हुए रख दी गयी है. CSS Exclusions का प्रयोग करने पर हम कंटेंट को avatar image के चारो तरफ फ्लो कर सकते हैं.

यह करने के लिए, हम avatar की wrap-flow प्रॉपर्टी को सेट करते हैं और उसकी वैल्यू both कर देते हैं.

.avatar {
   -ms-wrap-flow: both; // Works in IE and Edge.
   wrap-flow: both; // Does't not work in any browser.
}

wrap-flow प्रॉपर्टी .avatar को एक "exclusion area" बना देती है; एक ऐसा जगह जहाँ कोई कंटेंट उसके आर पार नहीं हो सकता. जैसा की आप नीचे देख सकते हैं, कंटेंट अब avatar image के दाएं और बाएं फ्लो कर रहा है.

संभव मान

start, end, maximum, minimum, और clear कुछ और स्वीकार्य वैल्यूज हैं.

पहला मान, start, कंटेंट को exclusion एरिया के शुरू के चारो ओर wrap कर देगा, पर अंत का हिस्सा खाली छोड़ देगा.

.avatar {
   -ms-wrap-flow: start;
}

हमारे पेज पर दिए गए कंटेंट से, परिणाम कुछ इस तरह दिखेगा.

end वैल्यू, जैसा की इसका नाम बताता है, इसका उल्टा काम करता है; यह कंटेंट को exclusion एरिया के अंत में चारो ओर से लपेट लेगा.

.avatar {
   -ms-wrap-flow: end;
}

 यह हमें नीचे दिया गया परिणाम देता है:

ध्यान दें: exclusion एरिया की शुरुआत और अंत कंटेंट के लिखने की दिशा निर्धारित करती है. जहाँ स्क्रिप्ट दांयें से बांयें (right to left) ओर लिखी जाती है, जैसे की हम अक्सर Arabic और Hebrew के साथ देखते हैं, कंटेंट दायीं (right) ओर से लपेटना शुरू करता है और exclusion area के बांयीं (left) ओर अंत करता है.

जापानी भाषा के साथ, जब ऊपर से नीचे की ओर लिखा जाता है, तो कंटेंट ऊपर की ओर से लिपटना शुरू होता है और नीचे की ओर अंत होता है.

तीसरी स्वीकार्य वैल्यू maximum है.

.avatar {
   -ms-wrap-flow: maximum;
}

यह कंटेंट को जहाँ कहीं भी इसे exclusion area में कंटेनर एरिया के अंदर व्यापक जगह मिलेगी उसके चारो ओर लपेट देगा 

minimum वैल्यू इसके उल्टा काम करती है.

.avatar {
   -ms-wrap-flow: minimum;
}

यहाँ, कंटेंट exclusion area के आस पास मौजूद सबसे संक्रिण  जगह (narrowest space) में से फ्लो करेगा.

अंतिम वैल्यू है clear.

.avatar {
   -ms-wrap-flow: clear;
}

यह clear के काफी सामान है जैसा की आप पहले से ही float में इसे जानते हैं, उसमे यह exclusion area को दायीं (right) और बायीं (left) ओर से क्लियर (clear) कर देगा. यह इसलिए कंटेंट को exclusion area के ऊपर या नीचे से ही जाने देगा.

Exclusions के मार्जिन

CSS के आकारों के समान ही CSS Exclusions Module भी exclusion area के मार्जिन को परिभाषित (define) करने वाली एक प्रॉपर्टी के साथ आता है, जिसका नाम है wrap-margin. margin प्रॉपर्टी के उलट, wrap-margin की वैल्यू (value) सकारात्मक (positive) ही होनी चाहिए.

.avatar {
   -ms-wrap-flow: end;
   -ms-wrap-margin: -10px; // Invalid.
   -ms-wrap-margin: 10px; // Valid.
}

इसके अलावा, wrap-margin प्रॉपर्टी हर दिशा (right, left, top, and bottom) के मार्जिन को एक एक करके सेट करने की हमें अनुमति नहीं देती. चाहे इस फीचर का परिचय भविष्य में करवाया जाए यह अब भी देखने वाली बात है.

.avatar {
   -ms-wrap-flow: end;
   -ms-wrap-margin: 10px 20px 10px 30px; // Invalid.
   -ms-wrap-margin: 10px; // Valid.
}

एक बार सेट होने के बाद, हमें exclusion area के आस पास और अधिक सफ़ेद हिस्सा नज़र आएगा.

@supports

मान लीजिये हमने अपने avtar को कंटेंट के ऊपर positioned कर दिया, CSS Excludes के सपोर्ट के बिना हमे एक अव्यवस्थित लेआउट मिलेगा. इसलिए, फालबैक के बारे में सोचना एक बुद्धिमानी का निर्णय है, और @support रूल के भीतर उचित स्टाइल से wrap करें, कुछ इस तरह:

.site-content .avatar {
  width: 180px;
  height: 180px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  margin-top: 80px;
}

/* wrap the relevant rules in a @supports declaration, just to be safe */
@supports (-ms-wrap-flow: both) {
  .site-content .avatar {
    position: absolute;
    top: 300px;
    left: 50%;
    margin-left: -90px;
    -ms-wrap-margin: 50px;
    -ms-wrap-flow: both
  }
}

अब हमारे CSS Exclusion styles सिर्फ तभी लागू होंगे यदि इन्हे ब्राउज़र सपोर्ट करेगा.

• CodePen
  जल्द सलाह: अपने CodePen demos में @supports की CSS फाइल को जोड़ो
  Ian Yates

समेटते हुए

CSS Shapes और दूसरे bleeding किनारो के वर्णन के साथ साथ CSS Exclusions हमे वेबसाइट के लेआउट को जितना हम करना चाहते थे उससे काफी अधिक एक्स्प्लोर करने की अनुमति देगा. उम्मीद है की हम ब्राउज़र के सपोर्ट में तेजी से प्रगति देखेंगे, और माइक्रोसॉफ्ट Edge की टीम सीमाओं (boundries) को और धकेलेगी (push)!

• CSS Exclusions Module स्तर 1
• CSS Exclusions और Grid Layout Rachel Andrew द्वारा