पेज के टेक्स्ट डिफ़ॉल्ट body पर सेट करें, इनहेरिट किए गए गुणों को कंपोनेंट्स तक पहुँचने दें, और लेआउट नियम सोच-समझकर लागू करें। यह गाइड दिखाती है कि यूनिवर्सल नियम को पलटने के लिए हर एलिमेंट को मजबूर किए बिना Mac पर स्थानीय HTML पेज कैसे बनाया और जाँचा जाए।

यूनिवर्सल नियम कंपोनेंट के डिफ़ॉल्ट में दखल क्यों देता है?

यूनिवर्सल सेलेक्टर * हर एलिमेंट से मेल खाता है। इसलिए उस नियम के भीतर की गई घोषणा हर मेल खाने वाले एलिमेंट पर सीधे लागू होती है; यह केवल ऐसा मान नहीं देती जिसे वंशज इनहेरिट करें। यह सीधे स्यूडो-एलिमेंट्स से भी मेल नहीं खाता, जिनके लिए *::before जैसे सेलेक्टर ज़रूरी होते हैं। यूनिवर्सल सेलेक्टर।

किसी पैराग्राफ़ और नेस्टेड टेक्स्ट स्पैन वाले कंपोनेंट के लिए यह CSS अंश देखें:

/* Illustrative fragment: assumes a .tile with text descendants. */
* {
  color: #303840;
}

.tile {
  color: #245d75;
}

टाइल को नीला टेक्स्ट रंग मिलता है। उसके पैराग्राफ़ और स्पैन को यूनिवर्सल नियम का गहरा रंग सीधे मिलता है। सामान्य इनहेरिटेंस के ज़रिए कंपोनेंट का रंग उन घोषणाओं से होकर नहीं पहुँच सकता। CSS के डिफ़ॉल्ट निर्धारण नियमों के अनुसार, जब कैस्केड किसी एलिमेंट पर उस गुण के लिए कोई मान नहीं देता, तो इनहेरिट किए जाने वाले गुण अपने पैरेंट का कंप्यूटेड मान लेते हैं। CSS Cascading and Inheritance Level 4, डिफ़ॉल्ट निर्धारण।

यह उलझन पैदा कर सकता है, क्योंकि * की स्पेसिफिसिटी शून्य होती है। स्पेसिफिसिटी, लागू कैस्केड ओरिजिन और लेयर में एक ही एलिमेंट पर प्रतिस्पर्धी घोषणाओं की तुलना करती है। पैरेंट पर मौजूद घोषणा उसके बच्चे पर मेल खाने वाला प्रतिस्पर्धी सेलेक्टर नहीं होती। इसलिए पैरेंट सेलेक्टर को अधिक विशिष्ट बनाने से इनहेरिटेंस की यह समस्या हल नहीं होती। स्पेसिफिसिटी।

उपयोगी बदलाव यह है कि यूनिवर्सल टेक्स्ट घोषणा हटाकर डिफ़ॉल्ट body पर सेट करें। इसके बाद वंशज इसे तब तक इनहेरिट कर सकते हैं, जब तक कोई कंपोनेंट या एलिमेंट दूसरा मान न दे। MDN बताता है कि color एक इनहेरिट किया जाने वाला गुण है और इनहेरिटेंस पैरेंट के कंप्यूटेड मान का अनुसरण करता है। इनहेरिटेंस।

कौन-से डिफ़ॉल्ट पेज, कंपोनेंट या हर एलिमेंट पर होने चाहिए?

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

वांछित परिणाम सुझाया गया स्थान कारण
सामान्य पेज टेक्स्ट का आधार रंग और टाइपोग्राफ़ी समान हो body इनहेरिटेंस के ज़रिए टेक्स्ट को एक साझा शुरुआती मान देता है
किसी टाइल और उसके सामान्य टेक्स्ट का रंग अलग, पर आपस में समान हो .tile उस कंपोनेंट के भीतर नया इनहेरिट किया जाने वाला मान स्थापित करता है
किसी एक कैप्शन का रंग अलग हो .caption अपवाद उसी एलिमेंट पर लागू करता है जिसे इसकी ज़रूरत है
किसी एक पैनल में पैडिंग, बॉर्डर या बैकग्राउंड हो पैनल की क्लास बॉक्स की सजावट को उसके स्वामी से जोड़कर रखता है
बॉक्स का साइज़िंग मॉडल एकसमान हो सोच-समझकर बनाया गया box-sizing नियम साइज़िंग का स्पष्ट तरीका स्थापित करता है
हेडिंग का ऐसा डिफ़ॉल्ट मार्जिन हो जिसे आसानी से बदला जा सके लक्षित हेडिंग सेलेक्टर, जिसे वैकल्पिक रूप से :where() में रखा जा सकता है डिफ़ॉल्ट को इच्छित एलिमेंट्स तक सीमित रखता है

इनहेरिटेंस हर गुण के लिए अलग होता है। यह मानने के बजाय कि body पर की गई हर घोषणा उसके वंशजों तक पहुँचती है, गुण संदर्भ में Inherited प्रविष्टि देखें। उदाहरण के लिए, बॉर्डर डिफ़ॉल्ट रूप से इनहेरिट नहीं होते। इनहेरिटेंस।

यूनिवर्सल साइज़िंग नियम फिर भी उचित हो सकता है। border-box के साथ एलिमेंट की घोषित चौड़ाई में उसकी पैडिंग और बॉर्डर शामिल होते हैं; मार्जिन उस चौड़ाई के बाहर रहते हैं। यह बॉक्स मॉडल का एक विशिष्ट निर्णय है, हर पेज डिफ़ॉल्ट को यूनिवर्सल रूप से लागू करने का कारण नहीं। box-sizing।

अपने Mac पर एक पूरी स्थानीय डेमो बनाएँ

TextEdit को सादा-पाठ मोड में या किसी मौजूदा कोड एडिटर में इस्तेमाल करें। TextEdit में File > New चुनें, फिर Format > Make Plain Text चुनें। नीचे दिया गया पूरा दस्तावेज़ पेस्ट करें, File > Save चुनें और इसका नाम page-defaults.html रखें। अगर संकेत मिले, तो Use .html चुनें। Apple इस प्रक्रिया को अपनी TextEdit HTML गाइड में बताता है।

इस उदाहरण में कृत्रिम लेबल और CSS से बनाए गए आकार हैं। यह एम्बेड की गई स्टाइलशीट वाला एक पूरा दस्तावेज़ है, इसलिए तैयार करने के लिए कोई अतिरिक्त फ़ाइल नहीं है। यहाँ कोड की जाँच की गई है; Mac ब्राउज़र में इसका रेंडरिंग चलाकर नहीं देखा गया है।

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page defaults demonstration</title>
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      color: #303840;
      background-color: #f4f5f6;
    }

    main {
      max-width: 44rem;
      margin: 0 auto;
      padding: 2rem 1rem;
    }

    h1 {
      line-height: 1.2;
    }

    .tile {
      margin: 1.5rem 0;
      padding: 1.25rem;
      border: 2px solid currentColor;
      border-radius: 0.75rem;
      color: #245d75;
      background-color: #ffffff;
    }

    .tile h2 {
      margin-top: 0;
    }

    .shape {
      width: 4rem;
      height: 4rem;
      background-color: currentColor;
    }

    .shape--round {
      border-radius: 50%;
    }

    .caption {
      color: #66523c;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape notes</h1>
    <p>Page sample: <span>Label A</span>.</p>

    <section class="tile">
      <h2>Tile B</h2>
      <div class="shape shape--round" aria-hidden="true"></div>
      <p>Component sample: <span>Label C</span>.</p>
      <p class="caption">Caption D has its own text color.</p>
    </section>

    <p>Page sample: <span>Label E</span>.</p>
  </main>
</body>
</html>

अपने ब्राउज़र में page-defaults.html खोलें। स्रोत को TextEdit में दोबारा खोलते समय, अगर आप चाहते हैं कि TextEdit मार्कअप लगातार कोड के रूप में दिखाए, तो TextEdit > Settings > Open and Save चुनें और Display HTML files as HTML code instead of formatted text सक्षम करें। Mac पर TextEdit में HTML दस्तावेज़ों के साथ काम करें।

तीन बदलावों से इनहेरिटेंस की सीमा जाँचें

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

  1. केवल body का रंग बदलकर #4b465f करें। Label A और Label E के आसपास का टेक्स्ट बदलना चाहिए। टाइल अपना रंग बनाए रखती है।
  2. पेज का रंग बहाल करें, फिर केवल .tile को color: #526637 में बदलें। उसका सामान्य हेडिंग और पैराग्राफ़ टेक्स्ट, जिसमें Label C भी शामिल है, इस बदलाव का अनुसरण करना चाहिए। Caption D अपना स्पष्ट रूप से सेट किया गया रंग बनाए रखता है।
  3. टाइल का रंग बहाल करें, फिर स्टाइलशीट की शुरुआत में अस्थायी रूप से * { color: #303840; } जोड़ें। अब Label C वाले पैराग्राफ़ को वह सीधी घोषणा मिलती है। बाद में अस्थायी नियम हटा दें।

ये जाँचें उस अंतर को स्पष्ट करती हैं जिसमें एक कंपोनेंट इनहेरिट किया जाने वाला मान स्थापित करता है और वंशज को अपनी घोषणा मिलती है। टेक्स्ट का अपेक्षित व्यवहार स्पेसिफ़िकेशन के इनहेरिटेंस और डिफ़ॉल्ट निर्धारण नियमों के अनुरूप है।

HTML पेज और उसकी स्टाइलशीट के बीच क्या अनुबंध है?

रिसोर्स लोडिंग को सेलेक्टर के व्यवहार से अलग रखें। उदाहरण में CSS को style एलिमेंट के भीतर एम्बेड किया गया है। अगर आप अलग स्टाइलशीट चाहते हैं, तो उस एलिमेंट की सामग्री को केवल सादे-पाठ वाली page-defaults.css नाम की फ़ाइल में ले जाएँ और उसे HTML फ़ाइल के साथ उसी फ़ोल्डर में सहेजें। पूरे style एलिमेंट को head के भीतर नीचे दी गई पंक्ति से बदलें। यह बदलने के लिए एक अंश है, दूसरा पूरा दस्तावेज़ नहीं।

<link rel="stylesheet" href="page-defaults.css">

stylesheet लिंक टाइप उस बाहरी CSS रिसोर्स की पहचान करता है जिसका उपयोग दस्तावेज़ को प्रस्तुत करने के लिए होता है। href में फ़ाइल का नाम उसी फ़ाइल की ओर संकेत करना चाहिए जिसे आपने वास्तव में सहेजा है; यह घोषणा फ़ाइल नहीं बनाती। HTML Standard इस संबंध को लिंक टाइप: stylesheet में परिभाषित करता है।

इस उदाहरण में, परिणामस्वरूप अनुबंध सरल है: HTML एलिमेंट और क्लास देता है, जबकि CSS उनकी प्रस्तुति तय करता है। स्टाइलशीट में .tile का नाम बदलने पर HTML में संबंधित क्लास भी अपडेट करनी होगी। CSS फ़ाइल को कहीं और ले जाने पर उसका रिसोर्स संदर्भ अपडेट करना होगा। इनमें से किसी बदलाव के लिए भी अधिक मज़बूत सेलेक्टर की ज़रूरत नहीं है।

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

:where() या कैस्केड लेयर्स का उपयोग कब करना चाहिए?

इन सुविधाओं का उपयोग तभी करें जब वे कोई अतिरिक्त समस्या हल करती हों। ऊपर दिया गया पूरा उदाहरण इनमें से किसी पर निर्भर नहीं करता।

शून्य स्पेसिफिसिटी वाले लक्षित डिफ़ॉल्ट के लिए :where() का उपयोग करें

मान लें कि पेज में अब कई हेडिंग स्तर हैं। स्टाइलशीट का यह वैकल्पिक अंश साझा स्पेसिंग तय करता है और सामान्य हेडिंग सेलेक्टरों को इसे आसानी से बदलने देता है:

/* Optional fragment: add to the example stylesheet. */
:where(h1, h2, h3) {
  margin-bottom: 0.75rem;
}

h2 {
  margin-bottom: 1rem;
}

पूरे :where() सेलेक्टर की स्पेसिफिसिटी शून्य होती है, उसके तर्कों की भी। लेकिन * की जगह :where(*) रखने से रंग की पिछली समस्या हल नहीं होती: यह फिर भी हर एलिमेंट से मेल खाता है और सीधी घोषणा देता है। उस समस्या के लिए इनहेरिटेंस का उपयोग करें। MDN बताता है कि :where() जनवरी 2021 से ब्राउज़र में व्यापक रूप से उपलब्ध है; पुराने ब्राउज़र का समर्थन करते समय उसकी संगतता तालिका देखें। :where() स्यूडो-क्लास।

:where() के समर्थन के बिना किसी ब्राउज़र के लिए, स्पेसिंग डिफ़ॉल्ट के लिए h1, h2, h3 जैसी सामान्य सेलेक्टर सूची इस्तेमाल करें। फिर उसी स्टाइलशीट और लेयर में समान स्पेसिफिसिटी वाले अपवाद बाद में रखें। इससे लक्षित डिफ़ॉल्ट बने रहते हैं, हालाँकि उनकी स्पेसिफिसिटी अब शून्य नहीं रहती। स्पेसिफिसिटी।

नियमों के समूहों के लिए स्पष्ट क्रम चाहिए तो लेयर्स का उपयोग करें

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

/* Optional fragment for browsers supporting cascade layers. */
@layer defaults, components;

@layer defaults {
  p {
    margin-bottom: 1rem;
  }
}

@layer components {
  .tile p {
    margin-bottom: 0.5rem;
  }
}

सामान्य ऑथर घोषणाओं में बाद की लेयर्स को पहले की लेयर्स पर प्राथमिकता मिलती है; सामान्य अनलेयर्ड घोषणाएँ लेयर्ड घोषणाओं से ऊपर होती हैं। इम्पॉर्टेंट घोषणाएँ लेयर क्रम उलट देती हैं, इसलिए !important जोड़ने से यह व्यवस्था बदलती है। लेयर्स प्रतिस्पर्धी नियमों को व्यवस्थित करती हैं; वे किसी सीधे स्टाइल किए गए बच्चे को पैरेंट का मान इनहेरिट नहीं करातीं। @layer एट-रूल।

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

मौजूदा स्टाइलशीट में और ओवरराइड जोड़े बिना उसे कैसे ठीक करें?

एक समय में एक गुण पर काम करें। टेक्स्ट-रंग की समस्या के लिए वह व्यापक नियम खोजें जो वंशजों को सीधे रंग देता है। यूनिवर्सल नियम से वह घोषणा हटाएँ, पेज का मान body पर तय करें और कंपोनेंट रंग उनके कंपोनेंट रूट पर रखें। एलिमेंट स्तर की घोषणाएँ केवल वहीं रखें जहाँ डिज़ाइन को अपवाद की ज़रूरत हो।

फिर डेमो से तीनों बदलाव दोहराएँ। अगर सामान्य कंपोनेंट टेक्स्ट अब भी अपने पैरेंट के मान का अनुसरण नहीं करता, तो उस वंशज को लक्षित करने वाली घोषणा खोजें। अगर कंपोनेंट का बॉर्डर बदलने पर उसके वंशजों के बॉर्डर में कोई बदलाव नहीं आता, तो यह अपेक्षित है: बॉर्डर का इनहेरिटेंस टेक्स्ट रंग के इनहेरिटेंस से अलग होता है। इनहेरिटेंस।

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

स्रोत