- हाल की वेबसाइट performance गिरावट का एक बड़ा कारण JavaScript का अत्यधिक उपयोग और tracking scripts हैं, जबकि कई मामलों में इन्हें सिर्फ HTML/CSS से ही पर्याप्त रूप से बदला जा सकता है
- हाल में जोड़ी गई सुविधाएँ जैसे CSS nesting, relative colors, नए viewport units (lvh, svh, dvh) उन कामों को आसान बनाती हैं जिनके लिए पहले JS या preprocessor पर निर्भर रहना पड़ता था
- CSS सिर्फ एक style tool नहीं, बल्कि animation, input validation, dark mode theme, accordion menu तक लागू कर सकने वाली एक शक्तिशाली भाषा है
- performance के लिहाज़ से भी CSS, GPU acceleration और अलग thread पर चलकर animation और transition effects में JS से अधिक smooth और efficient हो सकती है
- लेखक CSS को सिर्फ एक practical tool नहीं बल्कि अभिव्यक्ति और कला के माध्यम के रूप में रेखांकित करते हैं, और web developers से आधुनिक CSS की क्षमता का अधिक उपयोग करने की सलाह देते हैं
परिचय: वेब की जटिलता, और नए प्रयास
- कई वेबसाइटें JavaScript frameworks के अत्यधिक उपयोग के कारण performance गिरावट और जटिलता का सामना कर रही हैं
- React app लोड होने में कई सेकंड लेते हैं, और NextJS hydration errors पैदा करता है
node_modules फ़ोल्डर कई gigabytes जगह घेर लेता है
- बिना JavaScript के भी सिर्फ HTML और CSS से शक्तिशाली सुविधाएँ लागू की जा सकती हैं
- जटिल shopping cart या dashboard वाली e-commerce sites को छोड़ दें, तो JavaScript हमेशा अनिवार्य नहीं हो सकता
- यह लेख CSS की नई सुविधियों का परिचय देता है और developers को केवल JavaScript पर निर्भर हुए बिना अन्य संभावनाओं की खोज करने के लिए प्रेरित करता है
CSS को लेकर गलतफहमियाँ और धारणा
क्या CSS सच में कठिन और असुविधाजनक है?
- CSS को लेकर नकारात्मक धारणा अक्सर बुनियादी सीख की कमी से आती है
- कई developers CSS की बुनियाद छोड़कर JavaScript या TypeScript पर ध्यान केंद्रित करते हैं
- CSS सिर्फ एक styling tool नहीं, बल्कि शक्तिशाली सुविधाएँ देने वाली domain-specific language है
- CSS में flexbox जैसे tools के साथ जटिल layout भी आसानी से बनाए जा सकते हैं
- उदाहरण:
display: flex और justify-content: center से div को केंद्र में रखना आसान है
- browser developer tools flexbox properties को visually adjust करने के लिए widgets देते हैं
- अगर कोई सिर्फ एक पक्ष (जैसे JS) में बहुत गहराई तक जाए और CSS की अनदेखी करे, तो बोझ बढ़ना स्वाभाविक है
CSS लिखने की तकलीफ़, और बदलाव
- पहले CSS उतना सुविधाजनक नहीं था, इसलिए Sass और Tailwind जैसे tools आए
- उदाहरण:
.post > .buttons .like:hover जैसी लंबी selector chains को manage करना पड़ता था
- हाल के वर्षों में quality-of-life features (जैसे nesting) जुड़ने से अब सिर्फ मूल CSS से भी आराम से development करना संभव हुआ है
- CSS nesting संबंधित styles को एक ही जगह रखकर readability बढ़ाता है
- उदाहरण:
.post { & > .buttons { .like { &:hover { ... } } } }
- parent-child संबंध स्पष्ट हो जाता है, इसलिए छोटे और सरल class names इस्तेमाल किए जा सकते हैं
- relative colors रंगों को adjust करना आसान बनाते हैं
hsl(from #123456 h s calc(l + 10)) से brightness बदली जा सकती हैcolor-mix() से दो रंग मिलाकर dynamic colors बनाए जा सकते हैं
- media query range syntax
(width <= 768px) जैसे intuitive conditions सेट करने देता है
- lh unit line height के अनुसार styling का समर्थन करती है
- scrollbar-gutter property scrollbar के कारण होने वाले layout shift की समस्या हल करती है
- Baseline प्रमुख browsers में feature compatibility सुनिश्चित करता है
- newly available features नवीनतम browsers में काम करती हैं
- widely available features 2.5 साल पुराने browsers तक समर्थित होती हैं
- उदाहरण: CSS nesting को दिसंबर 2023 से सभी browsers में support मिला
सिर्फ CSS/HTML से विकास क्यों?
- कुछ users JavaScript को default रूप से disable रखते हैं, जैसे security या privacy कारणों से
- यदि वेबसाइट सिर्फ CSS/HTML से उपलब्ध कराई जाए, तो ऐसे users के लिए भी site का उपयोग संभव होने की संभावना बढ़ जाती है
- development और user experience दोनों के दृष्टिकोण से सिर्फ CSS/HTML इस्तेमाल करने पर speed, accessibility, CPU और battery usage में फायदे हैं
- CSS animations compositor thread पर चलती हैं, इसलिए CPU पर दबाव कम होता है
- JavaScript event loop के ज़रिए चलता है, इसलिए थोड़ा delay हो सकता है
- accessibility और usability बेहतर होती है
- button hover effects, toast animations, input validation जैसी चीजें CSS से सरलता से लागू की जा सकती हैं
CSS के व्यावहारिक उदाहरण और मुख्य सुविधाएँ
@starting-style से स्वाभाविक शुरुआती animation लागू करना
- पहले elements के entry animation लागू करने के लिए keyframes, JS triggers जैसी जटिल संरचना चाहिए होती थी
- @starting-style आने से शुरुआती state तय करना आसान हो गया है। element की initial-state animation (जैसे fade-in) आसानी से लागू की जा सकती है
transition: opacity 1s; @starting-style { opacity: 0; } से सेट किया जा सकता है- अलग
@keyframes या JavaScript के बिना भी काम करता है
- सिर्फ transition के साथ शुरुआती state बताने पर animation स्वाभाविक रूप से लागू हो जाती है
- उदाहरण: toast message की opacity और position transition को smooth बनाना
dark/light mode के लिए आसान theme setup
- color-scheme: light dark user preference के अनुसार theme अपने-आप बदलता है
- light-dark(#000, #FFF) function light/dark mode के लिए उपयुक्त रंग निर्धारित करता है
- radio buttons और :has selector से user theme selection का समर्थन किया जा सकता है
- JavaScript के बिना सिर्फ CSS से theme switching संभव है
- theme को save/load करने के लिए वैकल्पिक रूप से JavaScript जोड़ा जा सकता है
radio/checkbox और :has, :checked से custom UI बनाना
- tabs, accordion, toggles जैसी जटिल interactions भी JavaScript के बिना लागू की जा सकती हैं
- radio buttons को :checked और :has के साथ custom style किया जा सकता है
- उदाहरण:
label:has(input:checked) से selected button की style तय की जा सकती है
opacity: 0 से input element को छिपाया जा सकता है, जबकि screen reader accessibility बनी रहती है
- details element FAQ जैसे accordion menu लागू करने के लिए उपयुक्त है
name attribute से single-open state नियंत्रित की जा सकती है[open] state के अनुसार animation जोड़ी जा सकती है
input validation और state reflection
- pattern, required जैसे HTML attributes और CSS pseudo-classes (
:valid, :invalid, :user-valid आदि) के संयोजन से real-time validation और visual feedback दिया जा सकता है
- input fields के outline/border style बदलकर user experience बेहतर किया जा सकता है
- HTML के pattern attribute से input field validity check की जा सकती है
- उदाहरण:
\w{3,16} से 3–16 अक्षर, अंक या underscore की अनुमति
- CSS के :valid और :invalid validity के आधार on styling करते हैं
- :user-valid और :user-invalid केवल user के input करने के बाद style लागू करते हैं
- :has selector से input state के अनुसार दूसरे elements की styling की जा सकती है
- कुछ मामलों में (जैसे जटिल input conditions) JS की ज़रूरत पड़ सकती है, लेकिन अधिकतर स्थितियों में CSS/HTML पर्याप्त है
viewport units का सही उपयोग
- मोबाइल में address/navigation bar के दिखने-छिपने के कारण vw/vh units में accuracy issues आती हैं
- lvh/svh/dvh (largest/smallest/dynamic viewport height) जैसे नए viewport units इस्तेमाल करने की सलाह दी जाती है
- lvh: full-screen उपयोग के लिए, जैसे full background
- svh: उन buttons, links आदि के लिए जो हमेशा स्क्रीन पर दिखने चाहिए
- dvh: scroll जैसी बदलती परिस्थितियों के अनुसार flexible sizing के लिए
- keyboard overlay को interactive-widget property या VirtualKeyboard API से संभाला जा सकता है
<meta name="viewport" content="width=device-width, interactive-widget=resizes-content">- Chromium-आधारित browsers में
navigator.virtualKeyboard.overlaysContent = true
CSS wishlist: कमी महसूस होने वाली या चाही गई सुविधाएँ
- reusable blocks: class के भीतर दूसरी class apply करना (जैसे
@apply border)
- combined media query selectors:
@media और class selector का संयोजन
- nth-child variable:
span { --nth: nth-child(); } से dynamic styling
- nth-letter selector: किसी खास अक्षर की styling (जैसे
p::nth-letter(2))
- unit removal:
calc(100vw / 1px) से unit-less values बनाना
- image() function: fallback colors और image fragments का समर्थन
- body के अंदर style tag: आधिकारिक standard support से FOUC समस्या कम करना
निष्कर्ष: CSS, और वेब की कलात्मकता
- CSS सिर्फ एक tool नहीं, बल्कि रचनात्मक अभिव्यक्ति का माध्यम है
- AI tools या build chain (linter, minifier) रचनात्मकता को सीमित कर सकते हैं
- CSS एक साथ performance, accessibility, और कलात्मक अभिव्यक्ति को पूरा करता है
- यह लेख लगभग 49kB के JavaScript-रहित HTML/CSS से लिखा गया है
- सभी interactive widgets और visual elements हाथ से बनाए गए हैं
- उदाहरण: CSS click game CSS की programming-language जैसी संभावनाओं का प्रमाण है
अभी कोई टिप्पणी नहीं है.