CSS 4: नया क्या है?

आरक्षण तुरंत करने के लिए आवश्यक है कि 29 सितंबर को प्रकाशित दस्तावेज़ को "चयनकर्ता स्तर 4" कहा जाए। क्या यह सीएसएस 4 का मसौदा है? यह समझना मुश्किल है, हालांकि कुछ पहले से ही इस नाम से दस्तावेज़ को कॉल करने में कामयाब रहे हैं।

सवाल तुरंत उठ सकता है: लेकिन क्या, सीएसएस 3 समाप्त हो गया है, ऐसा क्यों होना चाहिए "संचालित"? याद रखें कि सीएसएस 2.1 के बाद से नए विनिर्देशों को मंजूरी देने की प्रक्रिया बदल गई है: एकल मानक के बजाय, तीसरा संस्करण मॉड्यूल नामक दस्तावेजों का एक संग्रह है। प्रत्येक पिछड़े संगतता को बनाए रखते हुए, दूसरे संस्करण के स्वतंत्र रूप से विकसित होता है, और फिर सिफारिश के रूप में अनुमोदित किया जाता है। आमतौर पर मॉड्यूल एक दूसरे पर भरोसा नहीं करते हैं, हालांकि कुछ में निर्भरताएं होती हैं, उदाहरण के लिए, चयनकर्ता मॉड्यूल और नाम स्थान।

इस प्रकार, मानक के चौथे संस्करण पर काम तीसरे संस्करण के विकास के साथ हाथ में जा सकता है।

मुख्य नवाचारों पर विचार करें। उनमें से कुछ डेवलपर के लिए बहुत रुचि रखते हैं जो वेब दस्तावेज़ के लेआउट के विकास के रुझान के साथ अद्यतित रहना चाहते हैं।



स्तर 4 के चयनकर्ताओं के विनिर्देशन में पहले से ही स्तर 3 से महत्वपूर्ण अंतर है। चूंकि यह केवल पहला मसौदा है, अंतिम परिणाम, ब्राउज़रों में कार्यान्वयन के लिए सिफारिशों की स्थिति को प्रभावित करते हुए, काफी भिन्न होने की संभावना है।

कुछ तत्व अन्य विनिर्देशों से जोड़े गए थे, जबकि अन्य चयनकर्ताओं के विनिर्देश में शामिल नहीं थे।

मिथ्या

पहली चीज जो आपकी आंख को पकड़ती है - विनिर्देश में छद्म तत्व शामिल नहीं हैं। स्पष्ट रूप से भविष्य में उन्हें अन्य मॉड्यूल में वर्णित किया जाएगा।

मिथ्या

CSS 3 से उपयोगकर्ता इंटरफ़ेस स्थिति छद्म कक्षाएं: मूल उपयोगकर्ता इंटरफ़ेस मॉड्यूल जोड़ा गया था। उनके मान चित्रमय इंटरफ़ेस तत्वों की स्थिति का वर्णन करते हैं: एक चेकबॉक्स या चेकबॉक्स में इसकी अनुपस्थिति, चाहे प्रवेश करें या नहीं, चाहे :read-write और :read-only HTML5 में इनपुट फॉर्म को कॉन्फ़िगर करने के लिए आवश्यक विवरण हैं। स्पष्ट रूप से, एक मॉड्यूल में छद्म तत्वों को छोड़कर सभी चयनकर्ताओं को इकट्ठा करने का निर्णय लिया गया था।

मौजूदा चयनकर्ताओं में परिवर्तन

CSS 3 में, नकार :not छद्म वर्ग केवल साधारण चयनकर्ताओं पर लागू नहीं किया जा सकता है: छद्म वर्ग, टैग, पहचानकर्ता, वर्ग और पैरामीटर चयनकर्ता। छद्म तत्व और संयोजन जैसे कि ul li या ul>li समर्थन नहीं किया गया था, और नकार के छद्म वर्ग को एम्बेड नहीं किया जा सकता था :not(:not(...)) ।

सीएसएस 4 में ये प्रतिबंध बहुत कमजोर हैं: नकारात्मक छद्म वर्ग को अब चयनकर्ताओं की सूची पर, जटिल चयनकर्ताओं पर लागू किया जा सकता है। छद्म तत्व और नेस्टेड नकारात्मक अभी भी निषिद्ध हैं।

नए छद्म वर्ग

वेबमास्टर्स की इच्छा और ब्राउज़रों के रचनाकारों की उपलब्धियों के आधार पर कई नए तत्व बनाए गए हैं।

मैच :matches()

:matches() मोज़िला छद्म वर्ग के समान है :moz-any() । इसका उपयोग उचित है यदि बड़ी संख्या में समान चयनकर्ताओं का चयन करना आवश्यक है। उदाहरण के लिए, li a:link, li a:hover, li a:visited, li a:focus बजाय li a:link, li a:hover, li a:visited, li a:focus , यह li a:matches(:link, :hover, :visited) को निर्दिष्ट करने के लिए पर्याप्त होगा li a:matches(:link, :hover, :visited) । जटिल चयनकर्ता, अनुलग्नक और उपयोग :not निषिद्ध :not ।

संरेखण छद्म वर्ग :dir

नामित छद्म वर्ग आपको पाठ की दिशा के आधार पर एक तत्व का चयन करने की अनुमति देता है। rtl सूचीबद्ध करता है (दाएं से बाएं; यह अरबी और हिब्रू है) और ltr (बाएं से दाएं)। अन्य मूल्य अमान्य नहीं हैं, लेकिन उनके कार्य निर्धारित नहीं हैं, जो भविष्य में नए मूल्यों को जोड़ देगा (शायद, वे ऊपर से नीचे और नीचे से ऊपर तक होंगे)।

हाइपरलिंक के नए छद्म वर्ग

छद्म श्रेणी :any-link() उनकी उपस्थिति की परवाह किए बिना लिंक को इंगित करता है। एक बार एक लिंक (छद्म श्रेणी :link ) का दौरा किया जाता है, जिसे अधिक अप्रयुक्त नहीं माना जाता है, इसलिए, एक समान तत्व के इनपुट की आवश्यकता थी, जो कि उपयोगी हो सकता है यदि आपको दोनों राज्यों के लिए एक ही शैली निर्दिष्ट करने की आवश्यकता है। आइटम को सर्वश्रेष्ठ नाम चुनने की संभावना के साथ चिह्नित किया गया है।

स्थानीय लिंक छद्म वर्ग

:local-link स्थानीय लिंक के लिए। जब बस उपयोग किया जाता है :local-link कोष्ठक में अभिव्यक्ति के बिना :local-link , यह एक तत्व को इंगित करेगा जो वर्तमान पृष्ठ को इंगित करता है, अर्थात्, दस्तावेज़ URL को एक खंड एंकर के बिना मिलान करने के लिए। कोष्ठक में संख्या URL में मिलान तत्वों की संख्या को इंगित करेगी, उदाहरण के लिए, संदर्भ द्वारा एक दस्तावेज www.example.com/foo/bar/baz www.example.com/foo/bar/baz a:local-link(0) एक ही डोमेन के लिंक को इंगित करेगा www.example.com www.example.com , a:local-link(1) - प्रति डोमेन और URL में पहला खंड www.example.com/foo www.example.com/foo a:local-link(2) - डोमेन और URL के पहले दो खंडों में www.example.com/foo/bar www.example.com/foo/bar

अस्थायी छद्म वर्ग

तीन समय-निर्भर छद्म वर्ग दिखाई दिए हैं :past :current और :future , समय-निर्भर प्लेबैक या टाइम लेन के साथ जुड़ा हुआ है, अर्थात, HTML दस्तावेजों के मौखिक पुनरुत्पादन के साधनों के साथ। तदनुसार :current उस तत्व को संसाधित करने का संकेत देगा, जो वर्तमान में खेल रहे टुकड़े का चयन करना संभव बनाता है :past उन तत्वों को इंगित करेगा जो पहले से ही अतीत में संसाधित हो चुके हैं, और :future में भविष्य में संसाधित होने वाले तत्वों पर प्रकाश डाला जाएगा। यू :current में एक संस्करण है जो कोष्ठक में मान लेता है।

तत्व पेड़ों के नए छद्म वर्ग

दस्तावेज़ दो नए समान छद्म-वर्गों का वर्णन करता है :: :nth-match और :nth-last-match , जिसके इनपुट मान मेल खाते हैं :nth-child और :nth-last-child : समान भाव a + b, साथ ही साथ कीवर्ड या स्ट्रिंग एक चयनकर्ता जो आपको परिणामों के सबसेट का चयन करने की अनुमति देता है। विनिर्देश से, एक विचार को समझना एक उदाहरण का उपयोग करना उतना आसान नहीं है। मान लीजिए कि एक button:nth-match(even of .active) चयनकर्ता है button:nth-match(even of .active) । यह, button:nth-child(even) विपरीत button:nth-child(even) पहले वर्ग active साथ तत्वों का एक सबसेट निर्धारित button:nth-child(even) , और उसके बाद ही यह तत्वों को अलग करेगा।

टेबल संरचना के छद्म वर्ग

ये हैं :column() :nth-column() और :nth-last-column । HTML में, सेल को एक पंक्ति में सूचीबद्ध किया जाता है और tr टैग द्वारा अलग किया जाता है, और सेल के कॉलम के अनुपात को लिस्टिंग के क्रम से निहित किया जाता है। इसलिए, स्तंभ से संबंधित सेल के आधार पर सेल की शैली निर्धारित करने के लिए, छद्म श्रेणी :column पेश किया जाता है, जिसे एक या अधिक चयनकर्ताओं पर लागू किया जा सकता है। निम्न मसौदा उदाहरण कोशिकाओं C , E और D के पीले रंग को निर्धारित करता है:

  : स्तंभ (col.selected) {पृष्ठभूमि: पीला;  }

 <तालिका>
   <कोल स्पैन = "2">
   <col वर्ग = "चयनित">
   <tr> <td> A <td> B <td> C
   <tr> <td span = "2"> D <td> E
   <tr> <td> F <td span = "2"> G
 </ तालिका> 

ड्राफ्ट :nth-column() और :nth-last-column मौजूदा लोगों की तरह ही तर्क स्वीकार करते हैं :nth-child or :nth-last-child , अर्थात, न्यूमेरिकल वैल्यूज, फॉर्म का भाव an+b , even और odd मान । उदाहरण के लिए :nth-column(odd) विषम कॉलम से संबंधित सभी सेल का चयन करेगा।

पूर्वज चयनकर्ता या वस्तु चयनकर्ता

यदि पिछले तत्वों की आवश्यकता कभी-कभी दूर की कौड़ी लगती है, तो यह बहुत समय पहले अगले तत्व को पेश करने का प्रस्ताव था।

CSS गुण हमेशा सूची में अंतिम तत्व पर लागू होते हैं: ul li.selected उस सूची के तत्वों को इंगित करेगा जिसमें चयनित वर्ग है। लेकिन इसमें निहित तत्वों के गुणों के आधार पर पूरी सूची की शैली निर्धारित करने का कोई तरीका नहीं है।

ड्राफ्ट उस तरीके का भी वर्णन करता है जिसमें आप चुन सकते हैं कि आप किस तत्व को गुण लागू करना चाहते हैं। फिलहाल, डॉलर के प्रतीक $ को सूचक के साथ चुना जाता है जिसे वांछित आइटम में जोड़ा जाना प्रस्तावित है, हालांकि मेलिंग सूची पर चर्चा संभव है।

मान लीजिए आपको एक सूची शैली सेट करने की आवश्यकता है जिसमें एक selected वर्ग के साथ एक तत्व है। ऑब्जेक्ट चयनकर्ता आसानी से आपको ऐसा करने की अनुमति देगा:

$ul li.selected {
background: white;
}

यह दस्तावेज़ " लेवल 4 सिलेक्टर्स " का वर्तमान ड्राफ्ट है , जिसमें से राज्य महत्वपूर्ण बदलावों को कर सकता है और कर सकता है, और व्यक्तिगत टुकड़ों के पूरे अर्थ को समझना अभी भी मुश्किल है।

डेविड स्टोरी द्वारा प्रकाशनों के आधार पर, W3C वर्किंग ग्रुप के एक सदस्य और Webmonkey.com के लेखक स्कॉट गिलबर्टसन।