सीएसएस बनाम जावास्क्रिप्ट: ट्रस्ट बनाम नियंत्रण

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

यहाँ मेरी बात के नोट्स हैं।

एक उबाऊ लड़ाई

दूसरे दिन मैंने "कैप्टन अमेरिका: सिविल वॉर" फिर से देखा। और एक बार फिर इसने मुझे बोर कर दिया और मुझे इसकी अवधारणा नहीं मिली। सुपर हीरो को अपने संपार्श्विक क्षति के लिए जिम्मेदार होने का विचार नया नहीं है। उन पर नियंत्रण के लिए पूछना कोई नई बात नहीं है। "इनक्रेडिबल्स" ने इसके साथ बहुत अच्छा काम किया।

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

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

Giana Blantin ने इसे अच्छी तरह से लगाया:

क्या ये दो समूह हो सकते हैं:
 "सीएसएस इतना आसान है, यह कोडिंग भी नहीं है"
 "सीएसएस बहुत कठिन है, हमें इसे जेएस के साथ बदलने की आवश्यकता है!"
 कृपया आपस में बात करें?

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

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

कौन गलती पर है और कौन सहिष्णु होना चाहिए?

सीएसएस, HTML की तरह बहुत गलती सहिष्णु है। यह भ्रामक हो सकता है। इसका मतलब यह है कि अंत उपयोगकर्ताओं को डेवलपर की गलतियों से पीड़ित नहीं होना चाहिए।

सीएसएस के साथ निर्मित उत्पाद तब भी दिखाई देते हैं जब डेवलपर ने गलती की। वे सही नहीं दिखते, लेकिन वे काम करते हैं। जब एक सीएसएस पार्सर एक संपत्ति का सामना करता है तो यह समझ में नहीं आता है - यह इसे छोड़ देता है। जब यह एक मूल्य का सामना करता है तो यह साथ सौदा नहीं कर सकता है या संपत्ति समर्थन नहीं करती है - यह इसे छोड़ देता है। इस तरह हम पीछे की ओर संगत बने रहते हैं।

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

आपको पर्यावरण को जानने की आवश्यकता नहीं है और आपको यह निर्णय लेने की आवश्यकता नहीं है। ओएस, ब्राउज़र और शामिल प्रॉक्सी आपके लिए ये निर्णय लेते हैं।

जावास्क्रिप्ट दोष सहिष्णु नहीं है। यह विनाशकारी हो सकता है। जावास्क्रिप्ट का उपयोग करते समय आप बहुत अधिक नियंत्रण में होते हैं। लेकिन आप बहुत अधिक जिम्मेदार हैं।

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

दूसरे शब्दों में:

  • सीएसएस - आप अपनी शैली लागू करते हैं और आपको उम्मीद है कि यह काम किया है।
  • जावास्क्रिप्ट - आप स्टाइल को नियंत्रित करते हैं और आप यह सत्यापित कर सकते हैं कि यह काम किया है

CSS का अर्थ है वेब के "स्क्विशनेस" को गले लगाना, जैसा कि ब्रैड फ्रॉस्ट ने लगाया था। वेब एक निश्चित कैनवास नहीं है जिस पर आप पिक्सेल सेट कर सकते हैं। इस पर बहुत सी चीजें आपके नियंत्रण से बाहर हैं:

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

यह चुनौतीपूर्ण हो सकता है और अक्सर हम अपने उत्पादों को चलाने वाले पर्यावरण को नियंत्रित करना चाहते हैं - यदि केवल हमारी पवित्रता को बनाए रखने के लिए। इसका मतलब यह है कि हम बहुत से संभावित उपयोगकर्ताओं को रोकते हैं।

इस अज्ञात वातावरण में हमें यह तय करना होगा कि अपनी प्रदर्शन समस्याओं से निपटने के लिए कौन काम करता है:

  • CSS - यह ब्राउज़र का काम है कि वह अच्छा प्रदर्शन करे, GPU संसाधनों का उपयोग करे और कार्यक्षमता को छोड़ दे।
  • जावास्क्रिप्ट - समर्थन के लिए परीक्षण करना आपका काम है और प्रतिपादन सुनिश्चित करने के लिए, पेंटिंग और रिफ्लो तेज है। और सिंक में एनीमेशन रखने के लिए।

सीएसएस उस पर बहुत अच्छा है और ब्राउज़र निर्माताओं ने इंटरफ़ेस प्रदर्शन को ट्विक करने में बहुत प्रयास किया है।

तो हम सीएसएस का अनुमान क्यों लगाते हैं और जावास्क्रिप्ट के लाभों को अधिक महत्व देते हैं? मुझे लगता है कि एक बात का दोष एक क्लासिक - इंटरनेट एक्सप्लोरर है।

सीएसएस और उसका ऊबड़ इतिहास

सीएसएस को तेजी से बढ़ना था और उन ब्राउज़रों का समर्थन नहीं मिला जिनके लिए एक विश्वसनीय उपकरण होना आवश्यक था।

सीएसएस पहले बहुत सीमित था और दृश्य HTML और विशेषताओं के प्रतिस्थापन के रूप में था। उन सभी फ़ॉन्ट, bgcolor, संरेखित, केंद्र, मानव संसाधन और मित्रों को देखा। पैच ब्राउज़र समर्थन और डीबगिंग विकल्पों के बिना बहुत ही विषम त्रुटियां इसकी मदद नहीं करती हैं। हमें पता था कि चीजें गलत थीं लेकिन हम इस बारे में कुछ नहीं कर सकते थे। यहां तक ​​कि हम किसी को भी ब्राउज़र निर्माता के रूप में नहीं पूछ सकते हैं जो प्रतिक्रिया के लिए उपलब्ध नहीं हैं

जब आईफोन बाहर आया तो सीएसएस अपने दिन सुर्खियों में था। "एचटीएमएल 5 भविष्य है" कहानी को अतिरिक्त कार्यक्षमता की बहुत आवश्यकता थी। Apple ने वहां शॉट्स को कॉल किया और मानकीकरण में बहुत अधिक समय लगा "वेबकिट केवल"।

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

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

यह वह नहीं है जिसे आप एक विश्वसनीय आधार रेखा कहते हैं या एक यह समझने में आसान था कि क्या आप "वेब मूल" नहीं हैं?

हमें ब्राउज़र समर्थन की परवाह किए बिना सीएसएस काम करने की आवश्यकता थी

हमारा समाधान जावास्क्रिप्ट के साथ पैच करना था। हम स्थितियों को पढ़ सकते हैं और उन्हें HTML बनाने और स्टाइल लागू करने पर प्रतिक्रिया दे सकते हैं। जैसा कि जावास्क्रिप्ट एक प्रोग्रामिंग भाषा है, जो भी हो रहा है, उस पर हमारा पूरा नियंत्रण है। हमारे पास शर्तें, लूप, तुलनाएं हैं - सभी चीजें जो एक प्रोग्रामर सीएसएस में याद करती हैं। यह, एक हद तक एक अवधारणा के रूप में सीएसएस की गलतफहमी है। एक चयनकर्ता जो कई तत्वों से मेल खाता है - संक्षेप में - एक लूप। हम एक संग्रह में एक तत्व को लक्षित करने के लिए: nth-child () का भी उपयोग कर सकते हैं।

सामान्य तौर पर सीएसएस लीप और सीमा में जा रहा है क्योंकि हमें इसे पैच करने के लिए जावास्क्रिप्ट का उपयोग करना था। विशेष रूप से निराशाजनक ब्राउज़र समर्थन एक बहुत छोटी समस्या है।

  • सदाबहार ब्राउज़र एक चीज़ हैं - सभी ब्राउज़र लगातार अपग्रेड पथ पर हैं। हम ब्राउज़र निर्माताओं से भी सीखते हैं कि लाइन के नीचे क्या आ रहा है।
  • ब्राउज़र टूलिंग सीएसएस क्या लागू होता है में विस्तृत जानकारी देता है। हमें एनीमेशन एडिटर और कलर पिकर जैसे विजुअल टूल भी मिलते हैं।
फ़ायरफ़ॉक्स डेवलपर टूल में सीएसएस एनिमेशन के लिए विजुअल एडिटर
  • ब्राउज़रों में सीएसएस समर्थन अच्छी तरह से प्रलेखित है: caniuse.com एक अविश्वसनीय संसाधन है। यह न केवल दिखाता है कि कौन सा ब्राउज़र और कौन सा वातावरण क्या समर्थन करता है। यह कार्यान्वयन में बग की व्याख्या करता है, ऐनक और बग रिपोर्ट के लिंक प्रदान करता है। यहां तक ​​कि इसके पास प्रलेखन और डेवलपर टूल में इस जानकारी को एम्बेड करने के लिए एक एपीआई है।
विजुअल स्टूडियो कोड के लिए एक एक्सटेंशन का उपयोग करके आप सीधे ब्राउज़र में सुविधाओं के ब्राउज़र समर्थन के बारे में जानकारी प्राप्त कर सकते हैं। आप सीखते हैं कि आप कोड करते समय किसको ब्लॉक करते हैं।
  • हमारे पास लगभग सभी ब्राउज़रों के लिए समर्थन चैनल और बग ट्रैकिंग है। कुछ भी आपको ट्विटर का उपयोग करके बग दर्ज करने की अनुमति देते हैं। ब्राउज़र निर्माताओं की टीम सोशल मीडिया पर सक्रिय हैं और पहुंच योग्य हैं।
  • एसईएस और लेस जैसे प्री-प्रोसेसर ने सीएसएस कल्पना को तेजी से नया करने के लिए गर्मी को बदल दिया है। बहुत कुछ jQuery के आज के जावास्क्रिप्ट से प्रेरित है, ये कार्यक्षमता लोगों को चाहते हैं।
  • सीएसएस को अधिक बनाए रखने के लिए समुदाय बहुत समय बिताता है। निकोल सुलिवन द्वारा ऑब्जेक्ट ओरिएंटेड सीएसएस जैसे दृष्टिकोण और ब्रैड फ्रॉस्ट द्वारा एटॉमिक डिज़ाइन उम्र के लिए लगभग रहे हैं और जटिलता के लिए मदद करनी चाहिए।

CSS आपके लिए क्या कर सकता है

यहां कुछ अद्भुत चीजें हैं जो सीएसएस अब कर सकता है और आपको उपयोग करने पर विचार करना चाहिए।

सीएसएस मूल्यों का मूल्यांकन

सीएसएस में हमेशा गायब होने वाली एक चीज मूल्यों की गणना करने का एक तरीका था। क्लासिक उदाहरण एक बिल्कुल तैनात तत्व है जो 100% चौड़ा है लेकिन पैडिंग की आवश्यकता है। पुराने दिनों में हमें ऐसा करने की आवश्यकता थी कि किसी अन्य तत्व को घोंसला बनाकर उस पर पैडिंग लागू करें। कुछ समय के लिए हालांकि हम उसके लिए CSS calc () का उपयोग कर सकते हैं और calc की चौड़ाई (100% - 1em) लागू कर सकते हैं।

गणना बहुत अच्छी तरह से ब्राउज़रों में समर्थित हैं। उनका उपयोग करने के बारे में कोई योग्यता नहीं होनी चाहिए।

मीडिया के प्रश्नों

CSS Media Queries आपको दस्तावेज़ के व्यूपोर्ट के परिवर्तनों पर प्रतिक्रिया करने की अनुमति देती है। संक्षेप में उनका मतलब है कि जब आप व्यूपोर्ट एक निश्चित मापदंड को पूरा करते हैं तो आप अपनी शैली शीट का हिस्सा लागू करते हैं। यह एक ऐसा व्यूपोर्ट हो सकता है जो कम से कम एक निश्चित चौड़ाई या अधिकतम ऊंचाई पर हो। आप चित्र या स्क्रीन के लैंडस्केप ओरिएंटेशन के लिए भी देख सकते हैं या यदि दस्तावेज़ एक प्रिंटआउट है।
 CSS Media Queries में matchMedia के बराबर JavaScript भी है। यह आपको मांग पर सामग्री लोड करने की अनुमति देता है। एक मीडिया क्वेरी की समस्या यह है कि ब्राउज़र मैच की परवाह किए बिना ब्लॉक में छवियों को लोड करते हैं।

उत्पन्न सामग्री

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

यह ग्राफिक एकल DIV तत्व का उपयोग करके बनाया गया है

एनिमेशन और बदलाव

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

व्यूपोर्ट यूनिट्स

जब आप विस्तार से अनुभवों को परिभाषित करना चाहते हैं तो मीडिया क्वेरीज़ समझ में आती हैं। इसके बजाय, आप उपलब्ध स्थान के अनुसार तत्वों को देखने के लिए व्यूपोर्ट इकाइयों का उपयोग कर सकते हैं। व्यूपोर्ट चौड़ाई (vw) पूर्ण व्यूपोर्ट चौड़ाई का एक प्रतिशत है। तो एक 480px चौड़ी स्क्रीन पर 10vw 10% या 48px है। यह% इकाई से अलग है, जो मूल तत्व का प्रतिशत है और व्यूपोर्ट नहीं है। नेस्टेड प्रतिशत छोटा हो जाएगा, vw नहीं होगा। व्यूपोर्ट ऊंचाई (vh) पूर्ण व्यूपोर्ट ऊंचाई का एक प्रतिशत है। तुम भी अपने आप को स्वतंत्र का उपयोग कर स्वतंत्र कर सकते हैं मेरे vmin और vmax का उपयोग कर। ये या तो vw और vh के छोटे या बड़े लेते हैं। व्यूपोर्ट इकाइयों के समर्थन में एकमात्र निगर यह है कि एज और vmax को एज सपोर्ट नहीं करता है।

सीएसएस ट्रिक्स में एक शानदार लेख है कि शक्तिशाली व्यूपोर्ट इकाइयां कैसे हो सकती हैं। रिज़ॉल्यूशन इंडिपेंडेंट से लेकर व्यूपोर्ट डिपेंडेंट टाइपोग्राफी तक आप अत्यधिक लचीली इंटरफेस बनाने के लिए व्यूपोर्ट यूनिट का उपयोग कर सकते हैं।

flexbox

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

रिएक्ट के फ्लेक्सबॉक्स संपादक के साथ निर्माण इस तकनीक का उपयोग करने वाले तत्वों को बिछाने की शक्ति को दर्शाता है

फ्लेक्सबॉक्स फ्रॉग्जी नामक एक गेम भी है। यह एक सुखद और सुलभ तरीके से अवधारणाओं को सिखाता है और बच्चों के लिए सीएसएस के साथ शुरू करने के लिए बहुत अच्छा है।

फ्लेक्सबॉक्स के बारे में एक महान बात यह है कि विभिन्न घटनाओं में एक जोई गिलेनवाटर ने दिया है। मुझे सबसे ज्यादा जो बात पसंद है, वह यह है कि ज़ो कैसे दिखाता है कि उन्होंने उत्पादन में फ्लेक्सबॉक्स का उपयोग कैसे किया। उदाहरण बुकिंग.कॉम से हैं और यह उन ब्राउज़रों के लिए कमियां दिखाता है जो इसका समर्थन नहीं करते हैं।

सीएसएस ग्रिड

यदि Flexbox एक पंक्ति या स्तंभ में लेआउट तत्वों का उत्तर है, तो CSS ग्रिड इसे अगले स्तर पर ले जा रहा है। इसका उपयोग करके आप एक परिभाषित ग्रिड में तत्वों को दो आयामों में, दोनों पंक्तियों और स्तंभों में रख सकते हैं। ग्रिड कुछ समय से पक रहा है और अब अंत में बोर्ड भर में समर्थित है।

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

यदि आप चुनौतियों के साथ बेहतर सीखते हैं, तो आप CSS ग्रिड गार्डन को चलाकर CSS ग्रिड को समझ सकते हैं।

ऑनलाइन सीएसएस ग्रिड के बारे में कुछ "अवश्य देखना" चाहिए। पहले एक राहेल एंड्रयू द्वारा फिर से "सीएसएस ग्रिड लेआउट" है।

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

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

सीएसएस कस्टम गुण (चर)

CSS की सबसे अधिक मांग वाली विशेषताओं में से एक Sass और Less जैसे पूर्वप्रक्रमकों का एक लंबे समय के लिए चर है। अब हमारे पास CSS Custom Properties हैं जो सीएसएस के बारे में मुझे सबसे ज्यादा उत्साहित करती हैं। आप अपने दस्तावेज़ में एक बार पुनः प्रयोग करने योग्य सेटिंग्स को परिभाषित कर सकते हैं और उन्हें भर में लागू कर सकते हैं। इसके लिए सबसे आम उपयोग मामला कस्टम रंग और आकार है। लेकिन आप आगे जाकर फोंट और अन्य टाइपोग्राफी को परिभाषित कर सकते हैं। आप सीएसएस में उनकी गणना के लिए उनका उपयोग भी कर सकते हैं। यह पहले संभव नहीं था। एक अद्भुत विशेषता यह है कि जावास्क्रिप्ट के साथ कस्टम गुण गतिशील रूप से भी सेट किए जा सकते हैं।

जावास्क्रिप्ट के साथ कस्टम सीएसएस गुण कैसे पढ़ें और लिखें - (ली वेरो की बात का अंश)

यदि आप सीएसएस कस्टम गुणों की अद्भुत शक्ति के बारे में सभी सीखना चाहते हैं तो एक ऐसी बात है जिसे आपको याद नहीं करना चाहिए। ले वेरो की "सीएसएस चर: संस्करण (- उपशीर्षक)" सूचना का खजाना है।

सीएसएस फ़ीचर क्वेरी

CSS का एक और बहुत ही स्वागत योग्य फ़ीचर क्वेरी था। ये काफी हद तक Media Queries की तरह काम करते हैं। @Supports का उपयोग करके आप जांचते हैं कि क्या वर्तमान उपयोगकर्ता एजेंट एक निश्चित सुविधा का समर्थन करता है। आप तब CSS के एक ब्लॉक को परिभाषित करते हैं जो केवल तब लागू होता है जब फीचर सपोर्ट होता है। यह अजीब लग सकता है क्योंकि सीएसएस की गलती सहिष्णु प्रकृति को पहले से ही ध्यान रखना चाहिए। हालांकि यह क्या करता है जो आपको अधिक दानेदार नियंत्रण देता है। जब आप "नहीं" कीवर्ड का उपयोग कर एक निश्चित सुविधा के लिए कोई समर्थन नहीं है, तो यह आपको एक कमबैक को परिभाषित करने की अनुमति देता है।

सीएसएस और जावास्क्रिप्ट?

CSS और JavaScript एक साथ काम करना शक्तिशाली और सही काम है। जहाँ तक CSS आया है, यह अभी भी सब कुछ नहीं कर सकता है। ऐसे परिदृश्य हैं जहां सीएसएस की प्रकृति बहुत विपरीत है जो हम हासिल करना चाहते हैं।

जैसा कि क्रिस्टियानो रस्तेली अपने "सीएसएस पर शांति रहने दो" चर्चा में बताते हैं, "पृथक्करण की चिंता" की पोषित विशेषता एक मॉड्यूल दुनिया में लागू नहीं होती है।

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

सीएसएस और जावास्क्रिप्ट एक गैर-घटक दुनिया में एक साथ काम कर रहे हैं

दस्तावेज़-आधारित समाधानों का निर्माण करते समय सीएसएस की शक्ति में खुदाई नहीं करने का कोई बहाना नहीं है। CSS को सीएसएस में पढ़ा नहीं जा सकता है, जानकारी लाने के लिए आप जावास्क्रिप्ट का उपयोग कर सकते हैं और करना चाहिए। हालांकि यह कम से कम घुसपैठ तरीके से ऐसा करना समझदारी है।

CSS और JS बनाने का पदानुक्रम इस परिदृश्य में दूसरे के साथ काम करता है:

  • जब आप कर सकते हैं तो CSS का उपयोग करें - उन चीज़ों का उपयोग करके जो आपने यहाँ देखीं
  • यदि आपको सीएसएस के साथ संवाद करने की आवश्यकता है, तो कस्टम गुण बदलने पर विचार करें
  • यदि वह विकल्प नहीं है, तो क्लासलिस्ट का उपयोग करके मूल तत्वों पर कक्षाएं लागू करें।
  • बहुत अंतिम उपाय के रूप में, आप शैली को सीधे बदल सकते हैं
एक उत्कृष्ट उदाहरण है कि जावास्क्रिप्ट में माउस की स्थिति को कैसे पढ़ा जाए और इसे सीएसएस कस्टम गुणों में संग्रहीत किया जाए - (ली वेरो की बात का अंश)

जब भी आप शैलियों को गतिशील रूप से बदलते हैं, तो याद रखें कि आप ब्राउज़र के खिलाफ काम कर रहे हैं। प्रत्येक शैली में परिवर्तन के परिणाम में परिणाम, प्रतिपादन और पेंटिंग है। पॉल लुईस और दास सूरमा CSSTriggers नामक एक आसान मार्गदर्शिका बनाए रखते हैं। यह विस्तार से वर्णन करता है कि सीएसएस किस ब्राउज़र में सजा का परिणाम बदलता है।

CSS Triggers आपको विभिन्न शैली परिवर्तनों के प्रभावों की जानकारी देता है

संक्षेप में

सीएसएस पहले की तुलना में बहुत अधिक विश्वसनीय है और इसके लिए बहुत कुछ नहीं बचा है जो कि अलग होना चाहिए। याद रखने वाली मुख्य बात यह है कि सीएसएस उन चीजों को करने के लिए नहीं है जो जावास्क्रिप्ट करता है। यहां तक ​​कि लेआउट भाषाएँ भी सीएसएस के काम करने के तरीके और उसी जरूरत को कवर नहीं करती हैं। यह करने के लिए एक बहुत कठिन काम है और यह इसे अच्छी तरह से करता है। जब आप CSS का उपयोग करते हैं, तो ब्राउज़र आपके सेटअप की परवाह किए बिना आपके अंतिम उपयोगकर्ताओं की जरूरतों को पूरा करने में आपकी मदद करता है। यह वेब का एक मुख्य सिद्धांत है और W3C HTML डिज़ाइन सिद्धांतों में परिभाषित किया गया है:

सैद्धांतिक शुद्धता से अधिक विनिर्देशक के कार्यान्वयन पर लेखकों के ऊपर उपयोगकर्ता

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

सीएसएस लोगों को प्रेरित करने के लिए प्रेरक और सक्रिय

इस बात पर शोध करते समय मैंने वेब पर शानदार लोगों द्वारा लिखे और बनाए गए संसाधनों पर वापस जाना जारी रखा। यहाँ उन लोगों के बारे में कोई विशेष आदेश नहीं है जिन्हें आप अपने सीएसएस ज्ञान के साथ खरोंच करना चाहते हैं। मुझे उनमें से प्रत्येक को धन्यवाद देना है। वे हम सभी के लिए वेब को आसान बना रहे हैं।

  • इटैलिक एडरिनोकुन (@ireaderinokun) अपने ब्लॉग, बिट्सोफको.ड पर बहुत आसान और बिंदु सीएसएस जानकारी बिट्स को लिखता है।
  • एना ट्यूडर (@anatudor) एक डेवलपर है जो सीएसएस में हास्यास्पद जटिल और सुंदर एनिमेशन बनाता है। उसका कोडपेन सबसे अक्सर लोगों में से एक है और वह सीएसएस इंजनों के लिए क्या करता है ब्राउज़र निर्माताओं के लिए उनके प्रदर्शन का परीक्षण करने के लिए एक बड़ी मदद है
  • जेन सिमंस (@jensimmons) एक सीएसएस लेआउट और डिजाइन विशेषज्ञ है जो मोज़िला के लिए काम कर रहा है
  • राहेल एंड्रयू (@rachelandrew) मुझे # 1 सीएसएस ग्रिड विशेषज्ञ है
  • क्रिस Coyier (@chriscoyier) अद्भुत सीएसएस संसाधन सीएसएस ट्रिक्स और इंटरैक्टिव डेवलपमेंट प्लेग्राउंड कोडपेन के संस्थापक हैं
  • सारा ड्रैसनर (@sarah_edo) एक एनीमेशन और डिज़ाइन विशेषज्ञ है जो बनाए रखने योग्य उत्पादों के निर्माण पर केंद्रित है
  • Zoe M. Gillenwater (@zomigi) प्रोडक्शन में ब्लीडिंग एज CSS का उपयोग कर एक लीड डेवलपर है
  • ब्रैड फ्रॉस्ट (@brad_frost) परमाणु डिजाइन के लेखक हैं, अपनी परियोजनाओं के लिए सीएसएस का उपयोग करने और फिर से उपयोग करने का एक स्केलेबल तरीका है।
  • राहेल नाबर्स (@rachelnabors) एक हास्य कलाकार और एनीमेशन विशेषज्ञ है जो विभिन्न तकनीकों के वेब एनिमेशन और गुणों के बारे में लिख रहा है।
  • Una Kravets (@una) CSS और इसकी नई विशेषताओं में विशेषज्ञता करने वाला एक डेवलपर है। वह एक पॉडकास्टर भी है और सीएसएस और अन्य दृश्य प्रौद्योगिकियों की नब्ज पर उसकी उंगली बहुत ज्यादा है
  • LE Verou (@leaverou) उत्कृष्ट CSS रहस्य पुस्तक के लेखक हैं, MIT के एक शोधकर्ता और W3C के CSS कार्य समूह द्वारा आमंत्रित विशेषज्ञ हैं। वह अपने शोध में हास्यास्पद है और समय की एक छोटी राशि में बहुत सारी महान जानकारी के वितरण में निर्मम है।
  • सारा सोइदान (@sarasoueidan) एक डेवलपर है जो नवीनतम तकनीकों का उपयोग करने के लिए उत्तरदायी डिजाइन और व्यावहारिक दृष्टिकोण पर एक विशेषज्ञ है।

मैं रोजाना इन लोगों (दूसरों के साथ) से प्रेरित होता रहता हूं, और आशा करता हूं कि आपको भी यही अनुभव मिलने लगेगा