CSS

ब्राउज़र यह निर्धारित करता है कि CSS नियमों की विशिष्टता के आधार पर किसी तत्व पर कौन सी शैलियाँ दिखानी हैं। हम मानते हैं कि ब्राउज़र ने पहले ही उन नियमों को निर्धारित कर लिया है जो किसी विशेष तत्व से मेल खाते हैं। मिलान करने वाले नियमों में, प्रत्येक नियम के लिए विशिष्टता, चार कॉमा-सेपरेटेड मान, a, b, c, d की गणना निम्नलिखित के आधार पर की जाती है:

1. a यह है कि क्या इनलाइन शैलियों का उपयोग किया जा रहा है। यदि गुण घोषणा तत्व पर एक इनलाइन शैली है, तो a 1 है, अन्यथा 0।
2. b आईडी चयनकर्ताओं की संख्या है।
3. c कक्षाओं, विशेषताओं और छद्म-कक्षाओं के चयनकर्ताओं की संख्या है।
4. d टैग और छद्म-तत्व चयनकर्ताओं की संख्या है।

परिणामी विशिष्टता एक स्कोर नहीं है, बल्कि मानों का एक मैट्रिक्स है जिसे कॉलम दर कॉलम तुलना की जा सकती है। यह निर्धारित करने के लिए चयनकर्ताओं की तुलना करते समय कि किसकी विशिष्टता सबसे अधिक है, बाएं से दाएं देखें, और प्रत्येक कॉलम में उच्चतम मान की तुलना करें। इसलिए कॉलम b में एक मान कॉलम c और d में मानों को ओवरराइड करेगा, चाहे वे कुछ भी हों। जैसे, 0,1,0,0 की विशिष्टता 0,0,10,10 से अधिक होगी।

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

मैं कम विशिष्टता वाले CSS नियम लिखूंगा ताकि यदि आवश्यक हो तो उन्हें आसानी से ओवरराइड किया जा सके। CSS UI घटक लाइब्रेरी कोड लिखते समय, यह महत्वपूर्ण है कि उनकी विशिष्टता कम हो ताकि लाइब्रेरी के उपयोगकर्ता उन्हें केवल विशिष्टता बढ़ाने या !important का सहारा लेने के लिए बहुत जटिल CSS नियमों का उपयोग किए बिना ओवरराइड कर सकें।

• रीसेट करना - रीसेट करने का मतलब तत्वों पर सभी डिफ़ॉल्ट ब्राउज़र स्टाइलिंग को हटाना है। उदाहरण के लिए, सभी तत्वों के मार्जिन, पैडिंग, फ़ॉन्ट-साइज़ को समान पर रीसेट किया जाता है। आपको सामान्य टाइपोग्राफिक तत्वों के लिए स्टाइलिंग को फिर से घोषित करना होगा।
• सामान्य करना - सामान्य करना उपयोगी डिफ़ॉल्ट शैलियों को "अनस्टाइलिंग" करने के बजाय संरक्षित करता है। यह सामान्य ब्राउज़र निर्भरताओं के लिए बग्स को भी ठीक करता है।

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

फ़्लोट एक CSS पोजिशनिंग प्रॉपर्टी है। फ़्लोट किए गए तत्व पृष्ठ के प्रवाह का हिस्सा बने रहते हैं, और अन्य तत्वों की स्थिति को प्रभावित करेंगे (उदाहरण के लिए टेक्स्ट फ़्लोट किए गए तत्वों के चारों ओर प्रवाहित होगा), पोज़िशन: एब्सोल्यूट तत्वों के विपरीत, जिन्हें पृष्ठ के प्रवाह से हटा दिया जाता है।

CSS क्लियर प्रॉपर्टी का उपयोग बाएं/दाएं/दोनों फ़्लोट किए गए तत्वों के नीचे स्थित होने के लिए किया जा सकता है।

यदि एक मूल तत्व में फ़्लोट किए गए तत्वों के अलावा कुछ भी नहीं है, तो उसकी ऊंचाई शून्य हो जाएगी। इसे कंटेनर में फ़्लोट किए गए तत्वों के बाद लेकिन कंटेनर के बंद होने से पहले फ़्लोट को साफ़ करके ठीक किया जा सकता है।

.clearfix हैक फ़्लोट को साफ़ करने के लिए एक चतुर CSS छद्म चयनकर्ता (::after) का उपयोग करता है। मूल पर ओवरफ़्लो सेट करने के बजाय, आप इसमें एक अतिरिक्त वर्ग clearfix लागू करते हैं। फिर इस CSS को लागू करें:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

वैकल्पिक रूप से, मूल तत्व को overflow: auto या overflow: hidden प्रॉपर्टी दें जो बच्चों के अंदर एक नया ब्लॉक फ़ॉर्मेटिंग संदर्भ स्थापित करेगा और यह अपने बच्चों को शामिल करने के लिए विस्तारित होगा।

CSS में z-index प्रॉपर्टी उन तत्वों के ऊर्ध्वावाधर स्टैकिंग क्रम को नियंत्रित करती है जो ओवरलैप होते हैं। z-index केवल उन तत्वों को प्रभावित करता है जिनका position मान static नहीं है।

किसी भी z-index मान के बिना, तत्व DOM में उनके प्रकट होने के क्रम में स्टैक होते हैं (एक ही पदानुक्रम स्तर पर सबसे निचला वाला शीर्ष पर दिखाई देता है)। गैर-स्थैतिक पोजिशनिंग (और उनके बच्चे) वाले तत्व हमेशा डिफ़ॉल्ट स्थैतिक पोजिशनिंग वाले तत्वों के शीर्ष पर दिखाई देंगे, HTML पदानुक्रम की परवाह किए बिना।

एक स्टैकिंग संदर्भ एक तत्व है जिसमें परतों का एक सेट होता है। एक स्थानीय स्टैकिंग संदर्भ के भीतर, उसके बच्चों के z-index मान उस तत्व के सापेक्ष सेट होते हैं न कि दस्तावेज़ मूल के सापेक्ष। उस संदर्भ के बाहर की परतें - यानी एक स्थानीय स्टैकिंग संदर्भ के सहोदर तत्व - उसके भीतर की परतों के बीच नहीं बैठ सकतीं। यदि एक तत्व B तत्व A के शीर्ष पर बैठता है, तो तत्व A का एक बाल तत्व, तत्व C, तत्व B से कभी भी अधिक नहीं हो सकता है, भले ही तत्व C का z-index तत्व B से अधिक हो।

प्रत्येक स्टैकिंग संदर्भ स्व-निहित है - तत्व की सामग्री स्टैक होने के बाद, पूरे तत्व को मूल स्टैकिंग संदर्भ के स्टैकिंग क्रम में माना जाता है। कुछ CSS गुण एक नया स्टैकिंग संदर्भ ट्रिगर करते हैं, जैसे 1 से कम opacity, none नहीं filter, और none नहीं transform।

_नोट: एक तत्व को स्टैकिंग संदर्भ बनाने के लिए वास्तव में क्या योग्य बनाता है, नियमों के इस लंबे सेट में सूचीबद्ध है।

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

यह जानना महत्वपूर्ण है कि एक ब्लॉक फ़ॉर्मेटिंग संदर्भ कैसे स्थापित किया जाए, क्योंकि ऐसा किए बिना, कंटेनर बॉक्स में [फ़्लोटेड बच्चे] नहीं होंगे। यह मार्जिन ढहने के समान है, लेकिन अधिक कपटपूर्ण है क्योंकि आपको अजीब तरीकों से पूरे बॉक्स ढहते हुए मिलेंगे।

एक BFC एक HTML बॉक्स है जो निम्नलिखित में से कम से कम एक शर्त को पूरा करता है:

• फ़्लोट का मान कोई नहीं है।
• पोज़िशन का मान न तो स्थैतिक है और न ही सापेक्ष।
• डिस्प्ले का मान टेबल-सेल, टेबल-कैप्शन, इनलाइन-ब्लॉक, फ़्लेक्स, या इनलाइन-फ़्लेक्स, ग्रिड, या इनलाइन-ग्रिड है।
• ओवरफ़्लो का मान दृश्यमान नहीं है।

एक BFC में, प्रत्येक बॉक्स का बायां बाहरी किनारा कंटेनिंग ब्लॉक के बाएं किनारे को छूता है (दाएं-से-बाएं फ़ॉर्मेटिंग के लिए, दाएं किनारे छूते हैं)।

एक BFC में आसन्न ब्लॉक-स्तर के बक्सों के बीच ऊर्ध्वाधर मार्जिन ढह जाते हैं। [मार्जिन ढहने] पर और पढ़ें।

• खाली दिव विधि - <div style="clear:both;"></div>।
• क्लियरफ़िक्स विधि - ऊपर .clearfix वर्ग देखें।
• overflow: auto या overflow: hidden विधि - मूल एक नया ब्लॉक फ़ॉर्मेटिंग संदर्भ स्थापित करेगा और अपने फ़्लोट किए गए बच्चों को शामिल करने के लिए विस्तारित होगा।

बड़े प्रोजेक्ट में, मैं एक उपयोगिता .clearfix वर्ग लिखूंगा और उन्हें उन जगहों पर उपयोग करूंगा जहां मुझे इसकी आवश्यकता है। overflow: hidden बच्चों को क्लिप कर सकता है यदि बच्चे मूल से लंबा है और बहुत आदर्श नहीं है।

CSS स्प्राइट्स कई छवियों को एक एकल बड़ी छवि में जोड़ते हैं। यह आइकनों के लिए आमतौर पर इस्तेमाल की जाने वाली तकनीक है (जीमेल इसका उपयोग करता है)। इसे कैसे लागू करें:

1. एक स्प्राइट जनरेटर का उपयोग करें जो कई छवियों को एक में पैक करता है और उसके लिए उपयुक्त CSS उत्पन्न करता है।
2. प्रत्येक छवि में background-image, background-position और background-size गुणों के साथ एक संबंधित CSS वर्ग होगा।
3. उस छवि का उपयोग करने के लिए, अपने तत्व में संबंधित वर्ग जोड़ें।

फायदे:

• कई छवियों के लिए HTTP अनुरोधों की संख्या कम करें (प्रति स्प्राइटशीट केवल एक एकल अनुरोध की आवश्यकता होती है)। लेकिन HTTP2 के साथ, कई छवियों को लोड करना अब कोई बड़ी समस्या नहीं है।
• उन संपत्तियों का अग्रिम डाउनलोडिंग जो तब तक डाउनलोड नहीं की जाएंगी जब तक उनकी आवश्यकता न हो, जैसे कि छवियां जो केवल :hover छद्म-राज्यों पर दिखाई देती हैं। पलक झपकना नहीं देखा जाएगा।

• समस्या और आपत्तिजनक ब्राउज़र की पहचान करने के बाद, एक अलग स्टाइल शीट का उपयोग करें जो केवल तभी लोड होता है जब उस विशिष्ट ब्राउज़र का उपयोग किया जा रहा हो। हालांकि इस तकनीक के लिए सर्वर-साइड रेंडरिंग की आवश्यकता होती है।
• Bootstrap जैसी पुस्तकालयों का उपयोग करें जो आपके लिए इन स्टाइलिंग समस्याओं को पहले ही संभाल लेती हैं।
• अपने कोड में विक्रेता उपसर्गों को स्वचालित रूप से जोड़ने के लिए ऑटोप्रेफ़िक्सर का उपयोग करें।
• Reset CSS या Normalize.css का उपयोग करें।
• यदि आप Postcss (या एक समान ट्रांसपाइलिंग लाइब्रेरी) का उपयोग कर रहे हैं, तो ऐसे प्लगइन्स हो सकते हैं जो आपको आधुनिक CSS सिंटैक्स (और यहां तक कि W3C प्रस्तावों) का उपयोग करने का विकल्प चुनने की अनुमति देते हैं जो आपके कोड के उन वर्गों को संबंधित सुरक्षित कोड में बदल देंगे जो आपके द्वारा उपयोग किए गए लक्ष्यों में काम करेंगे।

• ग्रेसफुल डिग्रेडेशन - आधुनिक ब्राउज़रों के लिए एक एप्लिकेशन बनाने का अभ्यास जबकि यह सुनिश्चित करना कि यह पुराने ब्राउज़रों में कार्यात्मक बना रहे।
• प्रोग्रेसिव एन्हांसमेंट - उपयोगकर्ता अनुभव के एक आधार स्तर के लिए एक एप्लिकेशन बनाने का अभ्यास, लेकिन जब एक ब्राउज़र इसे सपोर्ट करता है तो कार्यात्मक एन्हांसमेंट जोड़ना।
• सुविधा समर्थन की जांच के लिए [caniuse.com] का उपयोग करें।
• स्वचालित विक्रेता उपसर्ग सम्मिलन के लिए ऑटॉप्रिफिक्सर।
• [मॉडर्निज़र] का उपयोग करके सुविधा का पता लगाना।
• CSS सुविधा प्रश्नों का उपयोग करें [@support]

ये तकनीकें पहुंच (a11y) से संबंधित हैं।

• width: 0; height: 0। तत्व को स्क्रीन पर बिल्कुल भी कोई जगह नहीं लेने दें, जिसके परिणामस्वरूप यह नहीं दिखता है।
• position: absolute; left: -99999px। इसे स्क्रीन के बाहर रखें।
• text-indent: -9999px। यह केवल ब्लॉक तत्वों के भीतर टेक्स्ट पर काम करता है। यह एक व्यापक रूप से इस्तेमाल की जाने वाली और प्रसिद्ध चाल है, लेकिन इसमें [कुछ कमियां] हैं जैसे कि प्रदर्शन समस्याओं का कारण बनना, इसलिए आप इसके बजाय text-indent: 100% का उपयोग करने पर विचार कर सकते हैं।
• मेटा टैग। उदाहरण के लिए Schema.org, RDF, और JSON-LD का उपयोग करके।
• WAI-ARIA। एक W3C तकनीकी विनिर्देश जो वेब पृष्ठों की पहुंच को कैसे बढ़ाया जाए, इसे निर्दिष्ट करता है।

भले ही WAI-ARIA आदर्श समाधान हो, मैं एब्सोल्यूट पोजिशनिंग दृष्टिकोण के साथ जाऊंगा, क्योंकि इसमें सबसे कम कमियां हैं, यह अधिकांश तत्वों के लिए काम करता है और यह एक आसान तकनीक है।

फ़्लेक्स के लोकप्रिय होने से पहले (लगभग 2014), फ़्लोट-आधारित ग्रिड सिस्टम सबसे विश्वसनीय था क्योंकि इसमें अभी भी वैकल्पिक मौजूदा सिस्टम (फ़्लेक्स, ग्रिड) में सबसे अधिक ब्राउज़र समर्थन था। Bootstrap 4 तक Bootstrap फ़्लोट दृष्टिकोण का उपयोग कर रहा था जो फ़्लेक्स-आधारित दृष्टिकोण में बदल गया। लेखन के अनुसार (2020), फ़्लेक्स ग्रिड सिस्टम बनाने के लिए अनुशंसित दृष्टिकोण है और इसमें [अच्छा ब्राउज़र समर्थन] है।

साहसी लोगों के लिए, वे [CSS ग्रिड लेआउट] में देख सकते हैं, जो चमकदार नए ग्रिड प्रॉपर्टी का उपयोग करता है; यह ग्रिड लेआउट बनाने के लिए फ़्लेक्स से भी बेहतर है और भविष्य में ऐसा करने का वास्तविक तरीका होगा।

हाँ। एक उदाहरण एक निश्चित ब्रेकपॉइंट से आगे एक स्टैक्ड पिल नेविगेशन को एक फिक्स्ड-बॉटम टैब नेविगेशन में बदलना होगा।

हाँ, इनलाइन CSS, एक एम्बेडेड CSS अनुभाग, या एक बाहरी CSS फ़ाइल का उपयोग करके आकृतियों को रंगने के कई तरीके हैं (वस्तु पर विशेषताओं को निर्दिष्ट करना सहित)। अधिकांश SVG जो आपको वेब पर मिलेंगे वे इनलाइन CSS का उपयोग करते हैं, लेकिन प्रत्येक प्रकार से जुड़े फायदे और नुकसान हैं।

मूल रंग नोड पर दो विशेषताओं को सेट करके किया जा सकता है: fill और stroke। fill वस्तु के अंदर का रंग सेट करता है और stroke वस्तु के चारों ओर खींची गई रेखा का रंग सेट करता है। आप उसी CSS रंग नामकरण योजनाओं का उपयोग कर सकते हैं जिनका आप HTML में उपयोग करते हैं, चाहे वह रंग नाम हों (यानी लाल), RGB मान (यानी rgb(255,0,0)), हेक्स मान, RGBA मान, आदि।

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

उपरोक्त fill="purple" एक प्रेजेंटेशनल विशेषता का एक उदाहरण है। दिलचस्प बात यह है कि, style="fill: purple" जैसे इनलाइन शैलियों के विपरीत जो एक विशेषता भी होती है, प्रेजेंटेशनल विशेषताओं को एक स्टाइलशीट में परिभाषित CSS शैलियों द्वारा [ओवरराइड] किया जा सकता है। तो, यदि आपने svg { fill: blue; } जैसा कुछ किया, तो यह हमारे द्वारा परिभाषित बैंगनी फिल को ओवरराइड कर देगा।

हाँ, @media गुणों के चार प्रकार हैं (स्क्रीन सहित):

• all - सभी मीडिया प्रकार के उपकरणों के लिए
• print - प्रिंटर के लिए
• speech - स्क्रीन रीडर के लिए जो पृष्ठ को जोर से "पढ़ते" हैं
• screen - कंप्यूटर स्क्रीन, टैबलेट, स्मार्ट-फ़ोन आदि के लिए

यहां print मीडिया प्रकार के उपयोग का एक उदाहरण दिया गया है:

@media print {
  body {
    color: black;
  }
}

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

[BEM (ब्लॉक एलिमेंट मॉडिफायर)] कार्यप्रणाली यह सलाह देती है कि हर चीज का एक ही वर्ग हो, और, जहां आपको पदानुक्रम की आवश्यकता हो, उसे वर्ग के नाम में भी शामिल किया जाए, यह स्वाभाविक रूप से चयनकर्ता को कुशल और ओवरराइड करने में आसान बनाता है।

ध्यान रखें कि कौन से CSS गुण [रिफ्लो], रिपेंट और कंपोजिटिंग को ट्रिगर करते हैं। जहां संभव हो, लेआउट को बदलने वाली शैलियों को लिखने से बचें (रिफ्लो ट्रिगर करें)।

फायदे:

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

नुकसान:

• प्रीप्रोसेसिंग के लिए उपकरणों की आवश्यकता होती है। री-कंपाइलेशन का समय धीमा हो सकता है।
• वर्तमान में और संभावित रूप से उपयोग करने योग्य CSS नहीं लिखना। उदाहरण के लिए, [वेबपैक] के साथ [postcss-loader] जैसी किसी चीज़ का उपयोग करके, आप संभावित रूप से भविष्य-संगत CSS लिख सकते हैं, जिससे आप सैस चर के बजाय CSS चर जैसी चीजों का उपयोग कर सकते हैं। इस प्रकार, आप नए कौशल सीख रहे हैं जो मानक बनने पर / जब वे मानक बन जाते हैं तो भुगतान कर सकते हैं।

पसंद:

• ज्यादातर ऊपर बताए गए फायदे।
• जावास्क्रिप्ट में कम लिखा गया है, जो नोड के साथ अच्छी तरह से काम करता है।

नापसंद:

• मैं नोड-सैस के माध्यम से सैस का उपयोग करता हूं, जो C++ में लिखे गए लिबसैस के लिए एक बाइंडिंग है। नोड संस्करणों के बीच स्विच करते समय मुझे इसे अक्सर फिर से संकलित करना पड़ता है।
• लेस में, वेरिएबल नामों को @ से उपसर्गित किया जाता है, जिसे @media, @import और @font-face नियम जैसे मूल CSS कीवर्ड के साथ भ्रमित किया जा सकता है।

@font-face का उपयोग करें और विभिन्न फ़ॉन्ट-वेट के लिए फ़ॉन्ट-फ़ैमिली को परिभाषित करें।

यह हिस्सा [कुशल CSS लिखने] के बारे में ऊपर से संबंधित है। ब्राउज़र सेलेक्टर को सबसे दाएं (मुख्य सेलेक्टर) से बाएं तक मिलाते हैं। ब्राउज़र DOM में तत्वों को मुख्य सेलेक्टर के अनुसार फ़िल्टर करते हैं और मिलान निर्धारित करने के लिए अपने मूल तत्वों को ऊपर ले जाते हैं। सेलेक्टर चेन की लंबाई जितनी कम होगी, ब्राउज़र उतनी ही तेज़ी से यह निर्धारित कर सकता है कि वह तत्व सेलेक्टर से मेल खाता है या नहीं।

उदाहरण के लिए इस सेलेक्टर p span के साथ, ब्राउज़र सबसे पहले सभी <span> तत्वों को ढूंढते हैं और <p> तत्व को ढूंढने के लिए अपने मूल को रूट तक ऊपर ले जाते हैं। एक विशेष <span> के लिए, जैसे ही उसे <p> मिलता है, वह जानता है कि <span> मेल खाता है और अपना मिलान बंद कर सकता है।

एक CSS छद्म-तत्व एक चयनकर्ता में जोड़ा गया एक कीवर्ड है जो आपको चयनित तत्व (ओं) के एक विशिष्ट हिस्से को स्टाइल करने की अनुमति देता है। उनका उपयोग सजावट (:first-line, :first-letter) के लिए या मार्कअप (content: ... के साथ संयुक्त) में तत्वों को जोड़ने के लिए किया जा सकता है बिना मार्कअप (:before, :after) को संशोधित किए।

• :first-line और :first-letter का उपयोग टेक्स्ट को सजाने के लिए किया जा सकता है।
• .clearfix हैक में ऊपर दिखाए अनुसार clear: both के साथ एक शून्य-स्थान तत्व जोड़ने के लिए उपयोग किया जाता है।
• टूलटिप्स में त्रिकोणीय तीर :before और :after का उपयोग करते हैं। चिंताओं के पृथक्करण को प्रोत्साहित करता है क्योंकि त्रिभुज को स्टाइलिंग का हिस्सा माना जाता है और वास्तव में DOM का नहीं।

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

CSS बॉक्स मॉडल निम्नलिखित की गणना के लिए जिम्मेदार है:

• एक ब्लॉक तत्व कितनी जगह लेता है।
• क्या बॉर्डर और/या मार्जिन ओवरलैप होते हैं या ढह जाते हैं।
• एक बॉक्स के आयाम।

बॉक्स मॉडल के निम्नलिखित नियम हैं:

• एक ब्लॉक तत्व के आयाम चौड़ाई, ऊंचाई, पैडिंग, बॉर्डर और मार्जिन द्वारा गणना किए जाते हैं।
• यदि कोई ऊंचाई निर्दिष्ट नहीं है, तो एक ब्लॉक तत्व उसमें निहित सामग्री जितना ऊंचा होगा, प्लस पैडिंग (जब तक कि फ़्लोट्स न हों, जिसके लिए नीचे देखें)।
• यदि कोई चौड़ाई निर्दिष्ट नहीं है, तो एक गैर-फ़्लोटेड ब्लॉक तत्व अपने मूल की चौड़ाई को फिट करने के लिए विस्तारित होगा, पैडिंग घटाकर।
• एक तत्व की ऊंचाई सामग्री की ऊंचाई द्वारा गणना की जाती है।
• एक तत्व की चौड़ाई सामग्री की चौड़ाई द्वारा गणना की जाती है।
• डिफ़ॉल्ट रूप से, पैडिंग और बॉर्डर एक तत्व की चौड़ाई और ऊंचाई का हिस्सा नहीं होते हैं।

• डिफ़ॉल्ट रूप से, तत्वों पर box-sizing: content-box लागू होता है, और केवल सामग्री के आकार को ध्यान में रखा जाता है।
• box-sizing: border-box यह बदलता है कि तत्वों की चौड़ाई और ऊंचाई की गणना कैसे की जाती है, बॉर्डर और पैडिंग भी गणना में शामिल होते हैं।
• एक तत्व की ऊंचाई अब सामग्री की ऊंचाई + ऊर्ध्वाधर पैडिंग + ऊर्ध्वाधर बॉर्डर चौड़ाई द्वारा गणना की जाती है।
• एक तत्व की चौड़ाई अब सामग्री की चौड़ाई + क्षैतिज पैडिंग + क्षैतिज बॉर्डर चौड़ाई द्वारा गणना की जाती है।
• हमारे बॉक्स मॉडल के हिस्से के रूप में पैडिंग और बॉर्डर को ध्यान में रखना डिजाइनरों को ग्रिड में सामग्री की कल्पना कैसे करते हैं, इसके साथ बेहतर तालमेल बिठाता है।

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item।

| display | विवरण | | :-- | :-- | | none | एक तत्व को प्रदर्शित नहीं करता है (तत्व अब दस्तावेज़ के लेआउट को प्रभावित नहीं करता है)। सभी बाल तत्व भी अब प्रदर्शित नहीं होते हैं। दस्तावेज़ को ऐसे प्रस्तुत किया जाता है जैसे कि तत्व दस्तावेज़ ट्री में मौजूद ही न हो | | block | तत्व ब्लॉक दिशा में पूरी पंक्ति का उपभोग करता है (जो आमतौर पर क्षैतिज होता है) | | inline | तत्व एक दूसरे के बगल में बिछाए जा सकते हैं | | inline-block | inline के समान, लेकिन width और height सेट करने जैसी कुछ block प्रॉपर्टीज़ की अनुमति देता है | | table | <table> तत्व की तरह व्यवहार करता है | | table-row | <tr> तत्व की तरह व्यवहार करता है | | table-cell | <td> तत्व की तरह व्यवहार करता है | | list-item | <li> तत्व की तरह व्यवहार करता है जो इसे list-style-type और list-style-position को परिभाषित करने की अनुमति देता है |

मैं अच्छी माप के लिए ब्लॉक के साथ एक तुलना भी करूंगा।

| | ब्लॉक | इनलाइन-ब्लॉक | इनलाइन | | --- | --- | --- | --- | | आकार | अपने मूल कंटेनर की चौड़ाई भरता है। | सामग्री पर निर्भर करता है। | सामग्री पर निर्भर करता है। | | पोजिशनिंग | एक नई लाइन पर शुरू होता है और उसके बगल में कोई HTML तत्व सहन नहीं करता है (सिवाय जब आप फ़्लोट जोड़ते हैं) | अन्य सामग्री के साथ प्रवाहित होता है और उसके बगल में अन्य तत्वों की अनुमति देता है। | अन्य सामग्री के साथ प्रवाहित होता है और उसके बगल में अन्य तत्वों की अनुमति देता है। | | चौड़ाई और ऊंचाई निर्दिष्ट कर सकते हैं | हाँ | हाँ | नहीं। यदि सेट किया गया है तो अनदेखा कर देगा। | | vertical-align के साथ संरेखित किया जा सकता है | नहीं | हाँ | हाँ | | मार्जिन और पैडिंग | सभी पक्षों का सम्मान किया जाता है। | सभी पक्षों का सम्मान किया जाता है। | केवल क्षैतिज पक्षों का सम्मान किया जाता है। ऊर्ध्वाधर पक्ष, यदि निर्दिष्ट हैं, तो लेआउट को प्रभावित नहीं करते हैं। यह जो ऊर्ध्वाधर स्थान लेता है वह line-height पर निर्भर करता है, भले ही border और padding सामग्री के चारों ओर दृष्टिगत रूप से दिखाई दें। | | फ़्लोट | - | - | एक ब्लॉक तत्व जैसा हो जाता है जहाँ आप ऊर्ध्वाधर मार्जिन और पैडिंग सेट कर सकते हैं। |

एक स्थित तत्व एक ऐसा तत्व है जिसकी परिकलित position प्रॉपर्टी या तो relative, absolute, fixed या sticky है।

• static - डिफ़ॉल्ट स्थिति; तत्व पृष्ठ में सामान्य रूप से प्रवाहित होगा। top, right, bottom, left और z-index प्रॉपर्टीज़ लागू नहीं होती हैं।
• relative - तत्व की स्थिति को स्वयं के सापेक्ष समायोजित किया जाता है, लेआउट को बदले बिना (और इस प्रकार तत्व के लिए एक अंतर छोड़ देता है जहाँ वह स्थित न होने पर होता)।
• absolute - तत्व को पृष्ठ के प्रवाह से हटा दिया जाता है और यदि कोई हो, तो उसके निकटतम स्थित पूर्वज के सापेक्ष, या अन्यथा प्रारंभिक कंटेनिंग ब्लॉक के सापेक्ष एक निर्दिष्ट स्थिति में रखा जाता है। एब्सोल्यूटली स्थित बॉक्स में मार्जिन हो सकते हैं, और वे किसी अन्य मार्जिन के साथ ढहते नहीं हैं। ये तत्व अन्य तत्वों की स्थिति को प्रभावित नहीं करते हैं।
• fixed - तत्व को पृष्ठ के प्रवाह से हटा दिया जाता है और व्यूपोर्ट के सापेक्ष एक निर्दिष्ट स्थिति में रखा जाता है और स्क्रॉल करने पर हिलता नहीं है।
• sticky - स्टिकी पोजिशनिंग रिलेटिव और फिक्स्ड पोजिशनिंग का एक हाइब्रिड है। तत्व को relative स्थित माना जाता है जब तक कि यह एक निर्दिष्ट सीमा को पार न कर जाए, जिस बिंदु पर इसे fixed स्थित माना जाता है।

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

हाँ। फ्लेक्सबॉक्स मुख्य रूप से 1-आयामी लेआउट के लिए है जबकि ग्रिड 2-आयामी लेआउट के लिए है।

फ्लेक्सबॉक्स CSS में कई सामान्य समस्याओं को हल करता है, जैसे कंटेनर के भीतर तत्वों का लंबवत केंद्रण, स्टिकी फ़ूटर, आदि। Bootstrap और Bulma फ्लेक्सबॉक्स पर आधारित हैं, और आजकल लेआउट बनाने का शायद यही अनुशंसित तरीका है। पहले फ्लेक्सबॉक्स का प्रयास किया था, लेकिन flex-grow का उपयोग करने में कुछ ब्राउज़र असंगति समस्याओं (सफारी) का सामना करना पड़ा, और मुझे inline-blocks और प्रतिशत में चौड़ाई की गणना करने के लिए गणित का उपयोग करके अपने कोड को फिर से लिखना पड़ा, यह एक अच्छा अनुभव नहीं था।

ग्रिड-आधारित लेआउट बनाने के लिए ग्रिड अब तक का सबसे सहज तरीका है (इसे बेहतर होना चाहिए!) लेकिन ब्राउज़र समर्थन इस समय व्यापक नहीं है।

ध्यान दें कि ये दो दृष्टिकोण अनन्य नहीं हैं।

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

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

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

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

एक मोबाइल-प्रथम रणनीति के 2 मुख्य फायदे हैं:

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

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

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

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

इन दोनों विधियों में कुछ मुद्दे हैं जिन पर विचार करने की आवश्यकता है:

• उत्तरदायी डिज़ाइन काफी चुनौतीपूर्ण हो सकता है, क्योंकि आप अनिवार्य रूप से सभी स्थितियों को फिट करने के लिए एक एकल, हालांकि उत्तरदायी लेआउट का उपयोग कर रहे हैं। मीडिया क्वेरी ब्रेकपॉइंट्स को कैसे सेट किया जाए, यह ऐसी ही एक चुनौती है। क्या आप मानकीकृत ब्रेकपॉइंट मानों का उपयोग करते हैं? या, क्या आप उन ब्रेकपॉइंट्स का उपयोग करते हैं जो आपके विशेष लेआउट के लिए समझ में आते हैं? यदि वह लेआउट बदलता है तो क्या होगा?
• अनुकूली डिज़ाइन में आम तौर पर उपयोगकर्ता एजेंट सूंघना, या DPI का पता लगाना, आदि की आवश्यकता होती है, जिनमें से सभी अविश्वसनीय साबित हो सकते हैं।

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

ब्राउज़र डिफ़ॉल्ट रूप से डिवाइस रिज़ॉल्यूशन के अनुसार DOM तत्वों को रेंडर करते हैं, छवियों को छोड़कर।

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

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

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

यह ध्यान रखना महत्वपूर्ण है कि जो ब्राउज़र HTML5 के srcset (यानी IE11) का समर्थन नहीं करते हैं, वे इसे अनदेखा कर देंगे और इसके बजाय src का उपयोग करेंगे। यदि हमें वास्तव में IE11 का समर्थन करने की आवश्यकता है और हम प्रदर्शन कारणों से इस सुविधा को प्रदान करना चाहते हैं, तो हम एक जावास्क्रिप्ट पॉलीफ़िल का उपयोग कर सकते हैं, जैसे।

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

translate() CSS transform का एक मान है। transform या opacity को बदलने से ब्राउज़र रिफ़्लो या रिपेंट ट्रिगर नहीं होता है बल्कि कंपोज़िशन ट्रिगर होता है; जबकि एब्सोल्यूट पोजिशनिंग को बदलने से रिफ़्लो ट्रिगर होता है। transform ब्राउज़र को तत्व के लिए एक GPU परत बनाने का कारण बनता है लेकिन एब्सोल्यूट पोजिशनिंग प्रॉपर्टीज़ को बदलने से CPU का उपयोग होता है। इसलिए translate() अधिक कुशल है और चिकनी एनिमेशन के लिए कम पेंट समय देगा।

translate() का उपयोग करते समय, तत्व अभी भी अपनी मूल जगह पर कब्जा करता है (कुछ हद तक position: relative की तरह), एब्सोल्यूट पोजिशनिंग को बदलने के विपरीत।