सीएसएस की मदद से स्टाइल करना

Blockly ऐप्लिकेशन, एचटीएमएल और एसवीजी एलिमेंट से बने होते हैं. इन एलिमेंट को सीएसएस क्लास के साथ लेबल किया जाता है. इससे यह पता चलता है कि वे क्या दिखाते हैं (जैसे, blocklyBlock, blocklyField) और उनकी स्थिति क्या है (जैसे, blocklyEditing, blocklySelected). Blockly, सीएसएस के नियमों का डिफ़ॉल्ट सेट भी उपलब्ध कराता है.

सीएसएस का इस्तेमाल करके, अपने ऐप्लिकेशन को स्टाइल किया जा सकता है:

• Blockly के सीएसएस नियमों को अपने नियमों से बदलें.
• ज़्यादा जानकारी के लिए, Blockly कॉम्पोनेंट में अपनी सीएसएस क्लास जोड़ें.
• कस्टम कॉम्पोनेंट को स्टाइल करने के लिए, सीएसएस क्लास और नियमों का इस्तेमाल करें.

ध्यान दें: Blockly अब भी थीम के साथ काम करता है. हालांकि, Blockly ऐप्लिकेशन को स्टाइल करने का सबसे अच्छा तरीका सीएसएस का इस्तेमाल करना है.

सीएसएस क्लास

Blockly ऐप्लिकेशन, स्टाइल किए जाने वाले एलिमेंट की पहचान करने के लिए सीएसएस क्लास का इस्तेमाल करते हैं. यह टाइप (एलिमेंट) सिलेक्टर की तुलना में ज़्यादा कंट्रोल देता है.

Blockly की सीएसएस क्लास

Blockly, सीएसएस क्लास का इस्तेमाल करता है. इससे, Blockly को इस्तेमाल किए जाने वाले एचटीएमएल और SVG एलिमेंट के बारे में इस तरह की जानकारी मिलती है.

• टाइप. Blockly की ज़्यादातर सीएसएस क्लास से यह पता चलता है कि कोई एलिमेंट क्या दिखाता है. उदाहरण के लिए, किसी ब्लॉक के रूट एलिमेंट को blocklyBlock के तौर पर लेबल किया जाता है. कुछ एलिमेंट को कई क्लास के साथ लेबल किया जाता है. इनमें से हर क्लास, पिछली क्लास की तुलना में ज़्यादा सटीक होती है. उदाहरण के लिए, टेक्स्ट इनपुट फ़ील्ड के रूट एलिमेंट को blocklyField, blocklyInputField, और blocklyTextInputField के तौर पर लेबल किया गया है. किसी कॉम्पोनेंट के लिए टाइप क्लास, पूरे जीवनकाल में एक जैसी रहती हैं.

• राज्य. Blockly, सीएसएस क्लास का इस्तेमाल करके कॉम्पोनेंट की स्थिति के बारे में भी बताता है. उदाहरण के लिए, जब कर्सर किसी टेक्स्ट इनपुट फ़ील्ड पर होता है, तो उसके रूट एलिमेंट को blocklyEditing क्लास के साथ लेबल किया जाता है. कर्सर को हटाए जाने पर, इस क्लास को हटा दिया जाता है.

• ज़्यादा जानकारी. Blockly, कुछ सीएसएस क्लास का इस्तेमाल करके अतिरिक्त जानकारी देता है. उदाहरण के लिए, <div> में ऐसी क्लास होती हैं जो वर्कस्पेस के मौजूदा रेंडरर और थीम का नाम देती हैं. ये क्लास आम तौर पर, ऐप्लिकेशन के बंद होने तक एक जैसी रहती हैं.

Blockly किन सीएसएस क्लास का इस्तेमाल करता है, यह जानने का सबसे आसान तरीका यह है कि अपने ब्राउज़र के डेवलपर टूल खोलें और अपने ऐप्लिकेशन में इस्तेमाल किए गए एलिमेंट की जांच करें.

कस्टम सीएसएस क्लास

Blockly कॉम्पोनेंट को ज़्यादा खास बनाने के लिए, कस्टम सीएसएस क्लास का इस्तेमाल किया जा सकता है.

फ़ाइल फ़ोल्डर

किसी वर्कस्पेस के इंजेक्शन <div> में सीएसएस क्लास जोड़ने या हटाने के लिए, WorkspaceSvg.addClass या WorkspaceSvg.removeClass को कॉल करें.

टूलबॉक्स

टूलबॉक्स में मौजूद किसी बटन या लेबल में सीएसएस क्लास जोड़ने के लिए, टूलबॉक्स की JSON परिभाषा में web-class कुंजी का इस्तेमाल करें. ज़्यादा जानकारी के लिए, बटन और लेबल लेख पढ़ें.

कैटगरी के अलग-अलग हिस्सों के लिए इस्तेमाल की गई सीएसएस क्लास को बदलने के लिए, कैटगरी की JSON परिभाषा में cssConfig कुंजी का इस्तेमाल करें. इससे आपको अलग-अलग कैटगरी को स्टाइल करने की सुविधा मिलती है. ज़्यादा जानकारी के लिए, कैटगरी सीएसएस देखें.

ब्लॉक

किसी कस्टम ब्लॉक में सीएसएस क्लास जोड़ने के लिए, classes कुंजी में स्ट्रिंग या स्ट्रिंग की ऐरे पास करें.

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String",
    }
  ],
  "classes": "myStringLengthBlock",
  "output": "Number",
  "colour": 160,
}]);

BlockSvg.addClass या BlockSvg.removeClass को कॉल करके, किसी ब्लॉक के <g> एलिमेंट से सीएसएस क्लास को जोड़ा या हटाया भी जा सकता है.

लेबल फ़ील्ड

लेबल फ़ील्ड या क्रम से लगाने लायक लेबल फ़ील्ड के लिए इस्तेमाल किए गए <text> एलिमेंट से सीएसएस क्लास जोड़ने या हटाने के लिए, FieldLabel.setClass को कॉल करें. लेबल के कंस्ट्रक्टर को क्लास का नाम भी पास किया जा सकता है.

सीएसएस क्लास और कस्टम कॉम्पोनेंट

कस्टम कॉम्पोनेंट बनाते समय, कस्टम सीएसएस क्लास जोड़ने के लिए इनमें से किसी एक तरीके का इस्तेमाल करें:

• अगर आपका कॉम्पोनेंट, Field या Icon का सबक्लास है, तो initView तरीके को बदलें. उदाहरण के लिए:

  class MyCustomField extends Blockly.FieldTextInput {
    ...
  
    initView() {
      super.initView();
  
      // Add custom CSS class so we can style the field.
      if (this.fieldGroup_) {
        Blockly.utils.dom.addClass(this.fieldGroup_, 'myCustomField');
      }
    }
  }
  

  ज़्यादा जानकारी के लिए, सीएसएस की मदद से फ़ील्ड को कस्टमाइज़ करना या आइकॉन का व्यू बनाना लेख पढ़ें.

• SVG एलिमेंट बनाते समय, अपनी क्लास को Blockly.utils.dom.createSvgElement पर पास करें:

  this.svgRoot = Blockly.utils.dom.createSvgElement(Svg.G, {'class': 'myCustomComponent'});
  

• एचटीएमएल एलिमेंट बनाते समय, Blockly.utils.dom.addClass का इस्तेमाल करें:

  const myDiv = document.createElement('div');
  Blockly.utils.dom.addClass(myDiv, 'myInformation');
  

कोर्स बनाने के बाद, क्लास जोड़ने या हटाने के लिए Blockly.utils.dom.addClass या Blockly.utils.dom.removeClass का इस्तेमाल करें.

setMyHighlight(highlight) {
  if (highlight) {
    Blockly.utils.dom.addClass(this.svgRoot, 'myHighlight');
  } else {
    Blockly.utils.dom.removeClass(this.svgRoot, 'myHighlight');
  }
}

चेतावनी: दूसरों के लिखे गए कॉम्पोनेंट में क्लास जोड़ने या उनसे क्लास हटाने के लिए, dom.addClass या dom.removeClass का इस्तेमाल न करें. इनमें Blockly भी शामिल है. इसकी वजह से, उम्मीद से अलग नतीजे मिल सकते हैं.

सीएसएस नियमों का बैकग्राउंड

अगर आपको SVG स्टाइलिंग प्रॉपर्टी और सीएसएस कैस्केड के बारे में पता है, तो इस सेक्शन को छोड़ा जा सकता है.

एसवीजी स्टाइलिंग प्रॉपर्टी बनाम सीएसएस प्रॉपर्टी

एसवीजी एलिमेंट को एसवीजी स्टाइलिंग प्रॉपर्टी का इस्तेमाल करके स्टाइल किया जाता है. इनका इस्तेमाल, SVG एलिमेंट (इन्हें प्रज़ेंटेशन एट्रिब्यूट भी कहा जाता है) पर एट्रिब्यूट के तौर पर या सीएसएस के नियमों में किया जा सकता है. इसलिए, यहां दिए गए सभी फ़ंक्शन एक ही काम करते हैं.

<!-- SVG file with presentation attributes. -->
<circle fill="red" ... />

<!-- SVG file with <style> tag. -->
<style>
  circle {fill:red;}
</style>
<circle ... />

/* External CSS file.*/
circle {fill:red;}

<!-- SVG file with inline style. -->
<circle style="fill:red;" ... />

एसवीजी स्टाइलिंग प्रॉपर्टी की सूची, सीएसएस प्रॉपर्टी की सूची से मिलती-जुलती है, लेकिन उससे अलग है:

• एक ही कॉन्सेप्ट, एक ही नाम. उदाहरण के लिए, SVG और CSS, दोनों में direction का इस्तेमाल किया जाता है. इससे यह तय किया जाता है कि टेक्स्ट LTR है या RTL.
• एक ही कॉन्सेप्ट, अलग-अलग नाम. उदाहरण के लिए, SVG में फ़िल कलर तय करने के लिए fill का इस्तेमाल किया जाता है. वहीं, CSS में background-color का इस्तेमाल किया जाता है.
• सिर्फ़ सीएसएस. सीएसएस में कई ऐसी प्रॉपर्टी होती हैं जो एसवीजी में नहीं होतीं. जैसे, margin और padding.
• सिर्फ़ SVG. एसवीजी में कुछ ऐसी प्रॉपर्टी होती हैं जो सीएसएस में नहीं होतीं. जैसे, x और y.

इसलिए, अगर आपको किसी SVG एलिमेंट को स्टाइल करना है, तो SVG स्टाइलिंग प्रॉपर्टी का इस्तेमाल करें. अगर आपको किसी एचटीएमएल एलिमेंट को स्टाइल करना है, तो सीएसएस प्रॉपर्टी का इस्तेमाल करें.

सीएसएस कैस्केड

सीएसएस कैस्केड, सीएसएस नियमों की प्राथमिकताएं तय करता है. इससे यह तय होता है कि अगर किसी प्रॉपर्टी और एलिमेंट पर एक से ज़्यादा नियम लागू होते हैं, तो कौनसा नियम इस्तेमाल करना है. यहां दिए गए कैस्केड में, कैस्केड के उन हिस्सों के बारे में बताया गया है जिनका इस्तेमाल Blockly सबसे ज़्यादा करता है. इससे आपको इस सवाल का जवाब मिल सकता है कि "मेरी सीएसएस काम क्यों नहीं कर रही है?"

आसान कैस्केड

यह तय करने के लिए कि किसी एलिमेंट और प्रॉपर्टी पर कौनसा नियम लागू होता है, यह तरीका अपनाएं. जब सिर्फ़ एक नियम रह जाए, तब इसे बंद कर दें:

1. प्रॉपर्टी और एलिमेंट पर लागू होने वाले सभी नियमों को इकट्ठा करता है.
2. अगर किसी नियम में !important एनोटेशन है, तो उन सभी नियमों को खारिज करें जिनमें !important एनोटेशन नहीं है.

3. ऐसे नियम चुनें जिनमें खास जानकारी सबसे ज़्यादा हो.

   • एसवीजी प्रज़ेंटेशन एट्रिब्यूट की स्पेसिफ़िसिटी शून्य होती है.
   • <style> टैग या बाहरी स्टाइलशीट में मौजूद नियमों की खास जानकारी का हिसाब सामान्य तरीके से लगाया जाता है.
   • इनलाइन स्टाइल (style एट्रिब्यूट से सेट की गई स्टाइल) की प्राथमिकता, किसी भी सिलेक्टर से ज़्यादा होती है.

4. दस्तावेज़ में सबसे आखिर में दिखने वाला नियम चुनें.

5. अगर कोई नियम लागू नहीं होता है, तो एलिमेंट के पैरंट से प्रॉपर्टी की वैल्यू इनहेरिट करें.

यह एल्गोरिदम, कैस्केड के इन हिस्सों पर ध्यान नहीं देता:

• transition प्रॉपर्टी, जिसे सबसे ज़्यादा प्राथमिकता दी जाती है. Blockly इनमें से कुछ का इस्तेमाल करता है.
• @media ऐट-रूल. Blockly इनमें से किसी एक का इस्तेमाल करता है.
• ब्राउज़र या उपयोगकर्ता के तय किए गए नियम.
• @scope और @layer ऐट-नियम और animation प्रॉपर्टी, जिनका इस्तेमाल Blockly नहीं करता.

सीएसएस के नियम

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

Blockly की सीएसएस से जुड़े नियम

Blockly, सीएसएस के नियमों का डिफ़ॉल्ट सेट उपलब्ध कराता है. इन नियमों को कैसे और कहाँ जोड़ा जाता है, इससे इनकी प्राथमिकता पर असर पड़ता है.

स्टाइल टैग

Blockly के ज़्यादातर सीएसएस नियम, दो <style> टैग में तय किए जाते हैं. ऐसा इसलिए है, क्योंकि ये टैग पेज में सबसे ऊपर मौजूद होते हैं. इसलिए, इनमें मौजूद नियमों को, पेज में बाद में मौजूद नियमों की तुलना में कम प्राथमिकता दी जाती है.

Blockly.css.register rules

Blockly को इंजेक्ट करने पर, यह <head> टैग के चाइल्ड के तौर पर <style> टैग जोड़ता है. इस टैग में मौजूद नियम यहां से लिए गए हैं:

• Blockly.css नेमस्पेस. इन नियमों को देखने के लिए, core/css.ts खोलें और let content खोजें.
• अलग-अलग कॉम्पोनेंट, जो कॉम्पोनेंट के हिसाब से सीएसएस के नियम जोड़ने के लिए Blockly.css.register को कॉल करते हैं. css.register इन नियमों को content स्ट्रिंग के आखिर में जोड़ता है. इसलिए, इनकी प्राथमिकता उन नियमों से ज़्यादा होती है जिन्हें पहले जोड़ा गया था और जिनकी खास जानकारी एक जैसी है. इन नियमों को देखने के लिए, Blockly.css.register को कॉल करें देखें.

अगर आपको इन नियमों का इस्तेमाल नहीं करना है, तो css कॉन्फ़िगरेशन विकल्प को false पर सेट करें. ऐसे में, सीएसएस के नियमों का दूसरा सेट उपलब्ध कराने की ज़िम्मेदारी आपकी होगी.

रेंडर करने के नियम

रेंडरर के इंस्टेंस बनने पर, यह <head> टैग के चाइल्ड के तौर पर, <style> टैग जोड़ता है. इसमें रेंडरर के लिए खास सीएसएस नियम होते हैं. ध्यान दें कि ये नियम हमेशा जोड़े जाते हैं. इन पर css कॉन्फ़िगरेशन विकल्प का कोई असर नहीं पड़ता. इन नियमों को देखने के लिए, अपने रेंडरर में getCss_ तरीके को खोजें.

इनलाइन स्टाइल

इनलाइन स्टाइल, style एट्रिब्यूट के साथ तय की जाती हैं. इन्हें आम तौर पर तब बनाया जाता है, जब किसी कॉम्पोनेंट के लिए डीओएम बनाया जाता है. आंशिक सूची के लिए, यह GitHub क्वेरी देखें.

इनलाइन स्टाइल, सीधे तौर पर उस एलिमेंट पर लागू होती हैं जिस पर वे दिखती हैं. साथ ही, इनकी प्राथमिकता किसी भी सिलेक्टर से ज़्यादा होती है. इस वजह से, आम तौर पर इन वैल्यू को बदलने के लिए, आपको !important एनोटेशन का इस्तेमाल करना पड़ता है.

SVG प्रज़ेंटेशन एट्रिब्यूट

SVG प्रज़ेंटेशन एट्रिब्यूट, SVG स्टाइलिंग प्रॉपर्टी होती हैं. इनका इस्तेमाल SVG एलिमेंट के एट्रिब्यूट के तौर पर किया जाता है. इनमें कोई खास जानकारी नहीं होती और इनमें !important एनोटेशन नहीं हो सकता. इसलिए, Blockly के सभी नियमों में इनकी प्राथमिकता सबसे कम होती है. Blockly आम तौर पर, इन्हें createSvgElement को कॉल करने के लिए बनाता है.

अपने सीएसएस नियम जोड़ना

Blockly की तरह ही, इन तरीकों का इस्तेमाल करके अपने सीएसएस नियम जोड़े जा सकते हैं:

• Blockly को इंजेक्ट करने से पहले, Blockly.css.register को कॉल करें. आपके नियम, Blockly के नियमों के बाद जोड़े जाएंगे. साथ ही, ये नियम Blockly के उन नियमों से ज़्यादा प्राथमिकता वाले होंगे जो एक जैसे हैं.
• <head> टैग के बाद में चाइल्ड के तौर पर, <style> टैग या बाहरी स्टाइल शीट का लिंक जोड़ें. Blockly, अपने नियमों को <head> टैग के पहले दो चाइल्ड के तौर पर जोड़ता है. इसलिए, आपके नियमों को Blockly के नियमों के मुकाबले ज़्यादा प्राथमिकता मिलेगी. हालांकि, ऐसा तब होगा, जब दोनों नियमों की शर्तें एक जैसी हों.
• कस्टम कॉम्पोनेंट में मौजूद एलिमेंट में स्टाइल जोड़ने के लिए, इनलाइन स्टाइल का इस्तेमाल करें. इन नियमों की प्राथमिकता, सिलेक्टर वाले किसी भी नियम से ज़्यादा होगी.
• कस्टम कॉम्पोनेंट में, SVG एलिमेंट पर प्रज़ेंटेशन एट्रिब्यूट का इस्तेमाल करें. इन नियमों की प्राथमिकता, सिलेक्टर वाले नियमों की तुलना में कम होगी.

समस्या का हल

अगर आपकी सीएसएस काम नहीं कर रही है, तो इसकी ये वजहें हो सकती हैं:

• आपने किसी SVG एलिमेंट पर सीएसएस प्रॉपर्टी या किसी एचटीएमएल एलिमेंट पर SVG स्टाइलिंग प्रॉपर्टी का इस्तेमाल किया हो. एसवीजी स्टाइलिंग प्रॉपर्टी बनाम सीएसएस प्रॉपर्टी देखें.

• आपके नियम की प्राथमिकता, किसी दूसरे नियम की तुलना में कम है. आम तौर पर, ऐसा खास जानकारी के कम होने की वजह से होता है. इस समस्या को ठीक करने के ये तरीके हैं:

  • टाइप (एलिमेंट) चुनने वाले टूल के बजाय, क्लास चुनने वाले टूल का इस्तेमाल करें.
  • एक से ज़्यादा सिलेक्टर का इस्तेमाल करें.
  • अगर हो सके, तो अपने टारगेट एलिमेंट में कस्टम क्लास जोड़ें और इस क्लास का इस्तेमाल अपने नियम में करें.
  • आखिरी विकल्प के तौर पर, अपने नियम में !important एनोटेशन जोड़ें. अगर किसी मिलते-जुलते नियम को इनलाइन स्टाइल (style एट्रिब्यूट) का इस्तेमाल करके तय किया गया है, तो आपके पास सिर्फ़ यही विकल्प होता है.

• आपके नियम की प्राथमिकता, किसी दूसरे नियम की प्राथमिकता के बराबर है. हालांकि, यह नियम पेज पर पहले दिखता है. अगर नियम को ज़्यादा सटीक नहीं बनाया जा सकता, तो उसे पेज में बाद में ले जाएं.

सीएसएस के दो तरह के नियमों को बदला नहीं जा सकता:

• transition नियम में सेट की गई प्रॉपर्टी.
• !important नियम, ब्राउज़र के हिसाब से तय किए जाते हैं.