भविष्य की तलाश: CSS4

CSS4 की अवधारणा, जो लोकप्रियता प्राप्त कर रही है, वास्तव में कहीं से नहीं आई थी, जैसे हम CSS3 की वास्तविकता के लिए इस्तेमाल किया करते थे, जो अभी भी कुछ समय के लिए हमारे पास रहेगा (वास्तव में लंबे समय तक)। ब्राउज़र निर्माता मानक की उन्नत सुविधाओं को लागू करने के लिए भारी प्रयास कर रहे हैं, और फ्रंट-एंड डेवलपर्स (फ्रंट-एंड?) स्टाइल शीट के साथ अधिक कुशल काम के लिए नए और नए टूल बना रहे हैं। लेकिन अब, CSS4 के बारे में सुनकर आप सोच रहे हैं, “अरे, CSS3 के बारे में क्या? क्या वह अभी भी जीवित है? "

हम सभी ने लंबे समय तक कड़ी मेहनत की, और अंत में हम वास्तविक परियोजनाओं में CSS3 का उपयोग करने के लिए नीचे उतर गए, और अब यह सिर्फ पुराना है? "बिल्कुल नहीं!" मैं जवाब दूंगा। यह सब विकास का परिणाम है, जो केवल सभी सीएसएस को संपूर्ण रूप से मदद करेगा, क्योंकि "स्तर 3" और "स्तर 4" दोनों ही परिभाषाएं हैं जो विनिर्देश दस्तावेजों के एक सेट को छिपाते हैं।

हमें स्तर 4 की आवश्यकता क्यों है? CSS3 के बारे में क्या सुना जाता है?

स्तर 4 बस W3C दस्तावेज़ संख्या है। क्या आपने स्तर 1 प्रभाव फिल्टर के लिए नए चश्मे के बारे में कुछ भी सुना है? वे कहां गए? CSS3 में? शायद CSS4 में? या शायद CSS1 में, क्योंकि "स्तर 1" वहां दिखाई देता है? यह सब महत्वपूर्ण नहीं है, क्योंकि CSS सिर्फ CSS है । चयनकर्ता विनिर्देश के चौथे स्तर तक पहुंचने वाला पहला दस्तावेज़ है, जो अभी भी विकास के अधीन है। विनिर्देश संख्या में आने पर प्रत्येक दस्तावेज अपने आप होता है। वे एक दूसरे से स्वतंत्र रूप से विकसित होते हैं।

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

CSS3 HTML5 को समझेगा: और मेरा मतलब विशिष्ट संस्करण नहीं है, बल्कि समग्र रूप से भाषा है। HTML5, वास्तव में, मार्कअप भाषा का अगला संस्करण है, जिसने नए तत्वों के लिए समर्थन जोड़ा है। लेकिन जब लोग इसके बारे में बात करते हैं, तो उनका मतलब कुछ भी हो सकता है: ऑडियो एपीआई और वेब सॉकेट्स से शुरू करना और जियोलोकेशन के साथ समाप्त होना (जो संयोगवश, HTML5 विनिर्देश में बिल्कुल भी शामिल नहीं है)।

वही CSS3 के लिए चला जाता है: कुछ के लिए, यह जादू जैसा दिखता है, जिसका उपयोग हम आधुनिक डेमो पेज बनाने के लिए करते हैं। आपको यह जानने की ज़रूरत नहीं है कि border-radius या box-shadow विनिर्देशन क्या है यदि आप जानते हैं कि उनका सही उपयोग कैसे किया जाए। नए चयनकर्ताओं के साथ एक ऐसी ही स्थिति "चयनकर्ता" विनिर्देश का एक और (अगला) संस्करण है।

चयनकर्ता क्या हैं?

विनिर्देशन में, चयनकर्ताओं को टेम्पलेट के रूप में वर्णित किया जाता है जो पेड़ के DOM तत्वों के अनुरूप होते हैं। स्तर 4 के अधिकांश चयनकर्ता छद्म वर्ग हैं। चयनकर्ता सीएसएस के अस्तित्व की शुरुआत से ही दिखाई दिए, और कई नए दिलचस्प परिवर्धन प्राप्त करते हुए, स्तर 4 पर सफलतापूर्वक मौजूद रहे। चलो अभ्यास करने के लिए आगे बढ़ते हैं और देखते हैं कि वहां क्या दिलचस्प है। मैं पूरे दस्तावेज़ का वर्णन नहीं करूंगा - केवल "4 लेवल" के इनोवेशन।

लॉजिकल कॉम्बिनेटर :: माचिस,: नहीं

आइए तार्किक छद्म वर्गों के साथ शुरू करें। उनमें से पहला :: मैच, सबसे अधिक संभावना जिसे आप पहले से जानते हैं : -मोज़-कोई () मोज़िला से , फ़ायरफ़ॉक्स में वापस लाया गया था। इस चयनकर्ता के लिए धन्यवाद, हम एक सीएसएस दस्तावेज़ में तत्वों को समूह और पा सकते हैं। इसकी आवश्यकता क्यों है? ठीक है, उदाहरण के लिए, अगर हमें एक झपट्टा में कई लिंक इकट्ठा करने की आवश्यकता है।
इसके बजाय:

 ul.menu li a:link, ul.menu li a:hover, ul.menu li a:visited, ul.menu li a:focus { color: red; } 

आप इस तरह लिख सकते हैं:

 ul.menu li a:matches(:link, :hover, :visited, :focus) { color: red; } 

सरल, सही? इस तथ्य के बावजूद कि यह उदाहरण देहाती दिखता है, यह छद्म वर्ग की संभावित विशेषताओं को दर्शाता है: मैचों और अधिक जटिल परिस्थितियों में इसका उपयोग किया जा सकता है:

 article:matches(.active, .visible, #important) { background: red; } 

दूसरा चयनकर्ता, जिसे हम देखेंगे, वास्तव में CSS3 में वापस पेश किया गया था, लेकिन यह वास्तव में स्तर 4 पर शक्तिशाली बन गया। मेरा मतलब है कि छद्म वर्ग: नहीं, जो अब एक पैरामीटर के रूप में चयनकर्ताओं की सूची ले सकता है:

 p:not(.active, .visible) { color: red; } 

यह कोड उन सभी पैराग्राफों को लाल कर देगा जिनमें कक्षाएं नहीं हैं : .active या। visible ।

लिंक से निपटने के लिए छद्म कक्षाएं :: कोई भी लिंक और: स्थानीय-लिंक

इन छद्म वर्गों के लिए धन्यवाद, लिंक शैलियों पर हमारा अधिक नियंत्रण होगा। पहला :: कोई भी लिंक (अस्थायी नाम, बदला जा सकता है) - एक की परिभाषाओं को जोड़ता a:link और a:visited किया ताकि आपको लिखना न हो:

 a:link, a:visited { color: red; } 

अब यह महत्वपूर्ण नहीं है कि लिंक का दौरा किया जाए या नहीं। उसकी एक नियमित लिंक शैली होगी:

 a:any-link { color: red; } 

दूसरा छद्म वर्ग :local-link अधिक दिलचस्प है। उदाहरण के लिए, वे अपने स्वयं के स्टाइल को आपके व्यक्तिगत पेज की ओर इशारा करते हुए एक लिंक दे सकते हैं, जो अन्य सभी लिंक को बरकरार रखता है:

 nav :local-link { text-decoration: none; } 

इस छद्म वर्ग के लिए धन्यवाद, वर्तमान पृष्ठ की ओर इशारा करने वाले लिंक को रेखांकित नहीं किया जाएगा, जिससे मेनू या पथ में स्थित स्टील से भिन्न होते हैं।
यहाँ एक और उपयोग मामला है:

 :not(:local-link(0)) { color: red; } 

यह नियम सभी बाहरी लिंक पर लागू होगा। (आप चाहें तो उन्हें जोड़ सकते हैं, कह सकते हैं, एक आइकन या बैकग्राउंड इमेज)

जैसा कि आप देख सकते हैं, इस अंतिम उदाहरण में :local-link उपयोग एक पैरामीटर के साथ किया जाता है। कोष्ठक में संख्या पथ के URL में भाग को निर्धारित करती है जिसके साथ प्रत्येक पाया लिंक मैप किया जाएगा।
यह सुनने में थोड़ा अटपटा लगता है, लेकिन जितना आसान लगता है:

 nav :local-link(0) { color: red; } nav :local-link(1) { color: green; } nav :local-link(2) { color: blue; } nav :local-link(3) { color: yellow; } nav :local-link(4) { color: gray; } 

मान लें कि वर्तमान पृष्ठ पता है: end3r.com/2012/10/20/some-title end3r.com/2012/10/20/some-title , और आपके पास निम्न मेनू लिंक हैं:

• होम [http://end3r.com/]
• 2012 [http://end3r.com/2012/]
• अक्टूबर 2012 [http://end3r.com/2012/10/]
• 20 अक्टूबर, 2012 [http://end3r.com/2012/10/20/]
• लेख [http://end3r.com/2012/10/20/some-title/]

पहला लिंक लाल, दूसरा हरा, तीसरा नीला, चौथा पीला और पांचवाँ ग्रे होगा।

समय-परिभाषित छद्म-कक्षाएं :: अतीत, वर्तमान ,: भविष्य

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

 p:current { background: yellow; } 

यह कोड पीले रंग की पृष्ठभूमि के साथ बोले गए शब्दों को उजागर करता है।
दूसरा आवेदन WebVTT वीडियो प्रारूप के लिए उपशीर्षक है। उदाहरण के लिए, आप रंग या किसी अन्य गुण को बदल सकते हैं। जैसा कि आप अनुमान लगा सकते हैं कि अतीत और: भविष्य के छद्म वर्ग, उन तत्वों से संबंधित हैं जिन्हें पहले आवाज दी गई थी, और जो आगे आवाज उठाई जाएगी।

अनिर्धारित राज्य छद्म वर्ग :: अनिश्चित

जबकि कई उपयोगी छद्म-वर्गों को फार्म तत्वों के डिजाइन पर लागू किया जा सकता है, जैसे :enabled :disabled या :checked , एक नया एक है :indeterminate । जैसा कि सभी जानते हैं, चेकबॉक्स और रेडियो बटन में दो अवस्थाएँ हो सकती हैं: स्थापित और स्थापित नहीं। प्रत्येक राज्य को छद्म वर्गों द्वारा परिभाषित किया जा सकता है: जाँच - स्थापित के लिए और: नहीं (: जाँच) - स्थापित नहीं करने के लिए। लेकिन क्या होगा यदि आप एक ऐसे तत्व को स्टाइल करना चाहते हैं जो अभी तक उपयोग नहीं किया गया है। वास्तव में, न तो स्थापित राज्य और न ही स्थापित राज्य उससे निर्धारित किया जा सकता है। कुछ मामलों में, यह उपयोगी है, उदाहरण के लिए, उपयोगकर्ता को यह याद दिलाने के लिए कि उसने कुछ याद किया। इस प्रकार, हम उन तत्वों को स्टाइल कर सकते हैं जो अभी तक उपयोग नहीं किए गए हैं और एक डिफ़ॉल्ट स्थिति नहीं है:

 input.checkbox:indeterminate { background: #ccc; } 

इसी प्रकार, आप प्रगति पट्टी की स्थिति का निर्धारण कर सकते हैं यदि इसकी वर्तमान स्थिति अज्ञात है:

 progress:indeterminate { background: #ccc; } 

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

पेड़ की संरचनाओं के लिए छद्म कक्षाएं :: nth-match ,: nth-last-match

ये छद्म वर्ग पहली बार स्तर 4 में दिखाई दिए, और वे बहुत दिलचस्प हैं। का उपयोग कर :nth-match , आप पहले से कहीं अधिक सुविधाओं को प्राप्त कर सकते हैं। जिज्ञासु यह कैसे काम करता है? ठीक है, कल्पना कीजिए कि मैं एनटी-चाइल्ड छद्म वर्ग लेता हूं, जो तत्वों का चयन करता है और इसे छद्म वर्ग की शक्ति के साथ संयोजित करता है :matches , और आपको अपने प्रश्न का उत्तर मिलता है।

मान लें कि आपके पास लिंक की एक सूची है, जिनमें से कुछ में एक .active वर्ग है, और आप केवल इस वर्ग के साथ लिंक का भी चयन करना चाहते हैं। हम तत्वों को प्राप्त करने के लिए nth-child(even) का उपयोग कर सकते हैं, लेकिन यह पर्याप्त नहीं है, क्योंकि हमें वर्ग के साथ संदर्भों की आवश्यकता है। उपयुक्त नहीं :matches(.active) , क्योंकि इस मामले में, हम सामान्य रूप से वर्ग के साथ सभी लिंक सक्रिय करते हैं। इस मामले में, यह हमारी मदद करेगा :nth-match :

 li a:nth-match(even of .active) { color: red; } 

हां, अब हम सभी तत्वों के .active वर्ग के साथ केवल लिंक का चयन कर सकते हैं।
यह बहुत ही सरल उदाहरण है। आइए इसे ए + बी अभिव्यक्ति का उपयोग करके थोड़ा जटिल करें:

 p:nth-match(2n+1 of .active, .visible, #important) { color: red; } 

चयनकर्ताओं का यह संयोजन अधिक जटिल अभिव्यक्ति का उपयोग करने वाले तत्वों की खोज करता है। छद्म वर्ग

 :nth-last-match 

के रूप में ही काम करता है: nth-match, लेकिन DOM ट्री के अंत से खोज शुरू करता है।

छद्म-वर्ग :: स्तंभ,: nth-column ,: nth-last-column

आइए सारणीबद्ध डेटा के लिए कुछ छद्म कक्षाएं लागू करने का प्रयास करें। हम सभी जानते हैं कि लेआउट के लिए तालिकाओं का उपयोग करना अच्छा नहीं है, लेकिन डेटा के लिए वे उत्कृष्ट हैं।
HTML टेबल पंक्ति-उन्मुख हैं, अर्थात कॉलम पंक्तियों के अंदर वर्णित हैं। स्तंभ-उन्मुख तालिका बनाना संभव है, लेकिन तब आपके पास एकल पंक्तियाँ नहीं होंगी, इसके अलावा, पंक्ति-उन्मुख तालिकाएँ अधिक लोकप्रिय होंगी। सीएसएस शैली का उपयोग करने में सक्षम होना उपयोगी होगा, उदाहरण के लिए, ऐसी तालिका में व्यक्तिगत कॉलम। मान लीजिए कि आप अपनी पृष्ठभूमि के रंग को सम और विषम कॉलम सेट करना चाहते हैं। बेशक, हम अतिरिक्त कक्षाओं का उपयोग कर सकते हैं, या मार्कअप को जटिल कर सकते हैं, लेकिन "4 लेवल" से नए चयनकर्ताओं की मदद से हम इसे कुछ पंक्तियों में छद्म श्रेणी बना सकते हैं:

 :column(.total) { background: red; } :nth-column(even) { background: blue; } 

यह छोटा कोड प्रत्येक सेल के लिए लाल कॉलम सेट करता है, जिसमें एक कॉलम में स्थित टोटल क्लास और टेबल के प्रत्येक कॉलम में स्थित प्रत्येक सेल के लिए नीला रंग होता है।
अब, हम पंक्तियों के समान पंक्तियों का चयन कर सकते हैं, यहां तक ​​कि पागल नियमों का भी उपयोग कर सकते हैं, जैसे :: nth-column (3n + 2)। बस याद रखें कि स्तंभ DOM ट्री में उनका अनुसरण करने के आधार पर डिज़ाइन किए गए हैं, न कि वे जिस तरह पृष्ठ पर प्रदर्शित किए गए हैं। बेशक, न केवल टेबल को अंततः इन छद्म वर्गों से लाभ होगा, स्तंभ लेआउट रास्ते में हैं।

माता-पिता (बच्चा) चयनकर्ता:

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

आइए इसे कुछ बुनियादी उदाहरणों का उपयोग करके कार्रवाई में देखें। मान लीजिए हमारे पास एक मेनू है जिसमें सरल लिंक की एक सूची शामिल है। हम इसे जारी करना चाहते हैं, लेकिन यह पूरी तरह से php में सर्वर की ओर उत्पन्न होता है, और हमारे पास कोड तक पहुंच नहीं है। समस्या तब उत्पन्न होती है जब हम सक्रिय मेनू आइटम के ली तत्व को डिजाइन करना चाहते हैं, इस तथ्य के बावजूद कि निष्क्रिय वर्ग ली तत्व पर नहीं होगा, बल्कि लिंक पर ही होगा। ज्ञात मुद्दा, है ना? ऐसी स्थिति में, सक्रिय तत्व के लिए जिम्मेदार तत्व को लिंक से ली तत्व तक स्थानांतरित करना सबसे आसान तरीका है। लेकिन यह हमें शोभा नहीं देता, क्योंकि हमारे पास सर्वर कोड तक पहुंच नहीं है।

सीएसएस नियम विवरण की सामान्य संरचना में, कुछ तत्व अंतिम तत्व पर लागू होते हैं। Ul li a.active के नियम में - यह वर्ग .active का एक लिंक होगा, जो कि li तत्व में स्थित है, जो ul तत्व में स्थित है। नियम p p स्पैन में - यह स्पैन एलिमेंट होगा जो p एलिमेंट के अंदर होता है, आदि। मूल चयनकर्ता के लिए धन्यवाद, इस आदेश का उल्लंघन हो सकता है:

 ul li! a.active { color: red; } 

अब, हम तत्व ली की व्यवस्था कर सकते हैं, भले ही उसके बच्चे के पास एक सक्रिय वर्ग हो। किसी तत्व में मूल सेक्टर जोड़ते समय, हम कहते हैं कि हम इसे स्टाइल करना चाहते हैं, न कि अंतिम तत्व।
एक अन्य उदाहरण: आप किसी स्थान पर किसी विशिष्ट वर्ग के साथ लिंक जोड़कर पृष्ठ की पृष्ठभूमि बदल सकते हैं:

 body! header a.styleSwitcher:hover { background: red; } 

यह कोड बैकग्राउंड करेगा ( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

• ( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !
• ( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !
• ( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !
• ( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !

( - ) .styleSwitcher, . , , JS . , CSS – .

: ( 29 2011) , ($li). ( 22 2012) , , (li!). , . , , . , , , .

, jQuery cssParentSelector .

:
, ? , . . , , . , , CSS , JS .


, «4- » . , , . , . : . , , .


, , . , , , .
, , , Sel – , . , , .

«4 »
:
CSS4 Media Queries CSS4 Background CSS4 Images CSS4 Text
, , , , – W3C. , , , .

:
, , : W3C « 4 ». , . David Storey - W3C.

?
, , – , . ? , CSS, - ? : , , , , , . , !