2022 में आपको कौन सा सीएसएस बिल्कुल पता होना चाहिए?

सच्चा ग्रीफ खुले तौर पर सोचा क्या सीएसएस होना चाहिए, आप जानते हैं, बहुत बड़ा। पिछले कुछ वर्षों में ब्राउज़र में शिप की गई सभी अच्छाइयों के साथ — कंटेनर प्रश्न! सापेक्ष रंग वाक्यविन्यास! कैस्केड परतें! तार्किक गुण! मीडिया प्रश्नों में रेंज! व्यक्तिगत परिवर्तन! :has() चयनकर्ता! — और वह सब जो संभावित क्षितिज पर है — सीएसएस टॉगल! घोंसला करने की क्रिया! रंग मिश्रण! स्क्रॉल-लिंक्ड एनिमेशन! स्कोप्ड शैलियाँ! - नए और अनुभवी फ्रंट-एंडर्स के लिए इन दिनों सीएसएस के लिए निश्चित रूप से एक अलग सीखने की अवस्था है।

एक समय ऐसा भी रहा होगा जब अधिकांश CSS गुणों को जानना संभव था और वे कैसे काम करते हैं। वे दिन लंबे चले गए, कम से कम मेरे जैसे पुराने हाथ के लिए। लेकिन इस तरह का सवाल उठता है: आपको कौन सा सीएसएस बिल्कुल जानना है?

हाल ही में विंकास स्टोनिस एक सूची में एक छुरा लिया. क्रिस एक साथ रखो CSS3 के बाद से जारी सुविधाओं के आधार पर। आपको शायद इस बात का अंदाजा है कि आप सूची में क्या शामिल करेंगे। अगर मुझे शीर्ष 5 को एक साथ रखना है और खुद को केवल संपत्तियों और चयनकर्ताओं तक सीमित रखना है, तो यह कुछ इस तरह दिख सकता है ...

writing-mode

मैं के बारे में पर्याप्त नहीं कह सकता writing-mode संपत्ति। जो बात इसे महत्वपूर्ण बनाती है - विशेष रूप से सीखने के दृष्टिकोण से - वह यह है कि यह आपको ऐसे समावेशी सिद्धांतों के लिए तैयार करता है जो उपयोगकर्ता की भाषा की परवाह किए बिना लेआउट तैयार करने के लिए जिम्मेदार होते हैं। की एक अच्छी समझ writing-mode की समझ का नेतृत्व करने जा रहा है तार्किक गुण और मूल्य, और वे, बदले में, दस्तावेज़ प्रवाह और सोच को समझने के लिए मंच तैयार करते हैं block, inline, start, तथा end भौतिक दिशाओं के बजाय।

display

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

साथ ही, display संपत्ति पूरी तरह से पूरक writing-mode. यह वही है जिसकी आपको एक बार आवश्यकता होगी writing-mode आपको दस्तावेज़ प्रवाह और तार्किक दिशाओं से अवगत कराया है। आपको किसी तत्व के सामान्य प्रवाह को बदलने के लिए एक संपत्ति की आवश्यकता होगी (जैसे ब्लॉक तत्व को इनलाइन में बदलना) या चीजों को रखना शुरू करना (जैसे लचीला लेआउट संदर्भ बनाना) और वह वह जगह है जहां display खेलने के लिए आता है।

margin / padding / border

उह, मैं यहाँ पूरी तरह से धोखा दे रहा हूँ लेकिन सीखने के बारे में सोचो margin, padding, तथा border एक साथ अपरिहार्य है। वे सभी के हिस्से हैं बॉक्स मॉडल, सभी स्पेसिंग और स्टाइलिंग में मदद करते हैं, और सभी को इससे परिचित होने की आवश्यकता होती है सीएसएस लंबाई इकाइयाँ. यह जानना कि इन गुणों को क्या करना है और वे किसी तत्व के गणना आकार में कैसे योगदान करते हैं, निश्चित रूप से आपको बहुत अधिक स्टाइल नियंत्रण देता है, और किसी भी भ्रम को दूर करता है कि एक तत्व का आकार क्यों है - एक सामान्य सीएसएस सिरदर्द!

::before और ::after

एक और जहां मैं थोड़ा धोखा दे रहा हूं। हाँ, ::before और ::after दो अलग-अलग छद्म तत्व हैं, लेकिन फिर से, मैं एक के बिना दूसरे के बारे में सीखने की कल्पना नहीं कर सकता। यह दो-फेर है!

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

@media

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

उस परे, @media CSS के सशर्त गुणों में एक अच्छा पहला कदम है। क्या हम उपयोग किए जा रहे डिवाइस के प्रकार के आधार पर एक प्रश्न लिख रहे हैं (उदाहरण के लिए, screen or print) या जब ब्राउज़र का व्यूपोर्ट एक निश्चित मानदंड को पूरा करता है (उदाहरण के लिए, width >= 768px), @media सिंटैक्स विभिन्न स्थितियों के लिए अनुकूलित लेआउट बनाने के लिए अविश्वसनीय रूप से उपयोगी है।

ओह, और हमने यह भी नहीं छुआ है कि कैसे @media पहुंच से संबंधित है, इसकी क्षमता के लिए धन्यवाद उपयोगकर्ता की प्राथमिकताओं के आधार पर शैलियों को लागू करें (जैसे, prefers-reduced-motion) इसलिए, सशर्त लेआउट तैयार करने के अलावा, मीडिया क्वेरीज़ समावेशी डिज़ाइन को समझने की दिशा में एक अच्छा अगला कदम है।

माननीय उल्लेख

सीएसएस को पांच जरूरी संपत्तियों और चयनकर्ताओं की सूची में शामिल करना कठिन है, खासकर अब जब सीएसएस पांच साल पहले की तुलना में आज अधिक शक्तिशाली है। कई अन्य आइटम हैं जिन्हें मैं वास्तव में शामिल करना चाहता था, जैसे (किसी विशेष क्रम में नहीं):

• calc()
• has()
• color
• font
• overflow
• position (विशेषकर यह)
• z-index

लेकिन मैं अपनी पसंद पर कायम हूं। गुणों की सूची को याद रखने की तुलना में CSS सीखना अधिक महत्वपूर्ण है। यह एक यात्रा है और मुझे लगता है कि मैंने जिन पांचों को चुना है, वे सीखने का एक अच्छा रास्ता बनाते हैं जो अच्छी शैली के नियम लिखने के लिए मंच तैयार करता है और सीएसएस में गहराई से गोता लगाने के लिए अगला कदम है।

अच्छा, अपना बताओ!

मेरी सूची से असहमत हैं? तुम्हे करना चाहिए! मैं शर्त लगा सकता हूं कि आपके पास कुछ स्मार्ट राय होंगी और मैं यह देखना चाहता हूं कि आपने शीर्ष 5 की सूची को कैसे पूरा किया होगा।