CSS সহ স্টাইল

ব্লকলি অ্যাপ্লিকেশনগুলি HTML এবং SVG উপাদান দিয়ে তৈরি। এই উপাদানগুলিতে CSS ক্লাস লেবেল করা থাকে যা তারা কী প্রতিনিধিত্ব করে (যেমন blocklyBlock , blocklyField ) এবং তাদের অবস্থা (যেমন blocklyEditing , blocklySelected ) তা সনাক্ত করে। ব্লকলি CSS নিয়মের একটি ডিফল্ট সেটও প্রদান করে।

আপনার অ্যাপ্লিকেশন স্টাইল করার জন্য আপনি CSS ব্যবহার করতে পারেন:

  • ব্লকলির সিএসএস নিয়মগুলিকে আপনার নিজস্ব নিয়ম দিয়ে ওভাররাইড করুন।
  • অতিরিক্ত সুনির্দিষ্টতার জন্য ব্লকলি উপাদানগুলিতে আপনার নিজস্ব CSS ক্লাস যোগ করুন।
  • কাস্টম কম্পোনেন্ট স্টাইল করতে CSS ক্লাস এবং নিয়ম ব্যবহার করুন।

সিএসএস ক্লাস

ব্লকলি অ্যাপ্লিকেশনগুলি স্টাইল করার জন্য উপাদানগুলি সনাক্ত করতে CSS ক্লাস ব্যবহার করে। এটি টাইপ (উপাদান) নির্বাচকদের তুলনায় আরও সূক্ষ্ম নিয়ন্ত্রণ প্রদান করে।

ব্লকলি সিএসএস ক্লাস

ব্লকলি CSS ক্লাস ব্যবহার করে HTML এবং SVG উপাদান সম্পর্কে নিম্নলিখিত ধরণের তথ্য প্রদান করে।

  • প্রকার। বেশিরভাগ ব্লকলি সিএসএস ক্লাস একটি উপাদান কী প্রতিনিধিত্ব করে তা সনাক্ত করে। উদাহরণস্বরূপ, একটি ব্লকের মূল উপাদানকে blocklyBlock লেবেল করা হয়। কিছু উপাদানকে একাধিক ক্লাস দিয়ে লেবেল করা হয়, প্রতিটি শেষেরটির চেয়ে বেশি নির্দিষ্ট। উদাহরণস্বরূপ, একটি টেক্সট ইনপুট ক্ষেত্রের মূল উপাদানকে blocklyField , blocklyInputField এবং blocklyTextInputField লেবেল করা হয়। টাইপ ক্লাসগুলি একটি উপাদানের জীবনকাল ধরে একই থাকে।

  • State। ব্লকলি কোনও কম্পোনেন্টের অবস্থা নির্দিষ্ট করার জন্য CSS ক্লাসও ব্যবহার করে। উদাহরণস্বরূপ, যখন কার্সারটি একটি টেক্সট ইনপুট ফিল্ডে থাকে, তখন এর রুট এলিমেন্টটিকে blocklyEditing ক্লাস দিয়ে লেবেল করা হয়। যখন কার্সারটি সরানো হয়, তখন এই ক্লাসটি সরানো হয়।

  • অতিরিক্ত তথ্য। অতিরিক্ত তথ্য প্রদানের জন্য ব্লকলি কয়েকটি CSS ক্লাস ব্যবহার করে। উদাহরণস্বরূপ, injection <div> এ এমন ক্লাস রয়েছে যা ওয়ার্কস্পেসের বর্তমান রেন্ডারার এবং থিমের নাম প্রদান করে। এই ক্লাসগুলি সাধারণত অ্যাপ্লিকেশনের জীবনকাল ধরে একই থাকে।

ব্লকলি কোন CSS ক্লাস ব্যবহার করে তা আবিষ্কার করার সবচেয়ে সহজ উপায় হল আপনার ব্রাউজারের ডেভেলপার টুলগুলি খুলে আপনার অ্যাপ্লিকেশন দ্বারা ব্যবহৃত উপাদানগুলি পরীক্ষা করা।

কাস্টম CSS ক্লাস

ব্লকলি কম্পোনেন্টগুলিকে আরও সুনির্দিষ্টতা প্রদানের জন্য আপনি কাস্টম CSS ক্লাস ব্যবহার করতে পারেন।

কর্মক্ষেত্র

একটি ওয়ার্কস্পেসের ইনজেকশন <div> থেকে একটি CSS ক্লাস যোগ করতে বা অপসারণ করতে, WorkspaceSvg.addClass অথবা WorkspaceSvg.removeClass কল করুন।

টুলবক্স

টুলবক্সের একটি বোতাম বা লেবেলে একটি CSS ক্লাস যোগ করতে, টুলবক্সের JSON সংজ্ঞায় web-class কী ব্যবহার করুন। আরও তথ্যের জন্য, বোতাম এবং লেবেল দেখুন।

কোনও বিভাগের বিভিন্ন অংশের জন্য ব্যবহৃত CSS ক্লাসগুলিকে ওভাররাইড করতে, আপনার বিভাগের JSON সংজ্ঞায় cssConfig কী ব্যবহার করুন। এটি আপনাকে পৃথক বিভাগগুলিকে স্টাইল করার অনুমতি দেয়। আরও তথ্যের জন্য, বিভাগ CSS দেখুন।

ব্লক

একটি কাস্টম ব্লকে CSS ক্লাস যোগ করতে, 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> এলিমেন্ট থেকে একটি CSS ক্লাস যোগ বা অপসারণ করতে পারেন।

লেবেল ক্ষেত্র

লেবেল ফিল্ড বা সিরিয়ালাইজেবল লেবেল ফিল্ড দ্বারা ব্যবহৃত <text> উপাদান থেকে একটি CSS ক্লাস যোগ করতে বা অপসারণ করতে, FieldLabel.setClass কল করুন। আপনি লেবেলের কনস্ট্রাক্টরে একটি ক্লাসের নামও পাস করতে পারেন।

সিএসএস ক্লাস এবং কাস্টম উপাদান

একটি কাস্টম কম্পোনেন্ট তৈরি করার সময়, কাস্টম CSS ক্লাস যোগ করার জন্য নিম্নলিখিত পদ্ধতিগুলির মধ্যে একটি ব্যবহার করুন:

  • যদি আপনার কম্পোনেন্টটি 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');
    }
  }
}

    আরও তথ্যের জন্য, CSS দিয়ে ক্ষেত্রগুলি কাস্টমাইজ করা অথবা আইকনের দৃশ্য তৈরি করা দেখুন।

  • একটি SVG উপাদান তৈরি করার সময়, আপনার ক্লাসটি Blockly.utils.dom.createSvgElement এ পাস করুন:

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

  • HTML এলিমেন্ট তৈরি করার সময়, 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');
  }
}

CSS নিয়মের পটভূমি

যদি আপনি SVG স্টাইলিং বৈশিষ্ট্য এবং CSS ক্যাসকেড বোঝেন, তাহলে আপনি এই বিভাগটি এড়িয়ে যেতে পারেন।

SVG স্টাইলিং প্রোপার্টি বনাম CSS প্রোপার্টি

SVG এলিমেন্টগুলিকে SVG স্টাইলিং প্রোপার্টি দিয়ে স্টাইল করা হয়। এগুলো SVG এলিমেন্টে (উদাহরণস্বরূপ প্রেজেন্টেশন অ্যাট্রিবিউট ) অথবা CSS রুলে অ্যাট্রিবিউট হিসেবে ব্যবহার করা যেতে পারে। সুতরাং, নিচের সকলেই একই কাজ করে।

<!-- 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 প্রোপার্টিগুলির তালিকার সাথে সম্পর্কিত কিন্তু ভিন্ন:

  • একই ধারণা, একই নাম। উদাহরণস্বরূপ, SVG এবং CSS উভয়ই টেক্সট LTR নাকি RTL তা নির্দিষ্ট করার জন্য direction ব্যবহার করে।
  • একই ধারণা, ভিন্ন নাম। উদাহরণস্বরূপ, SVG পূরণের রঙ নির্দিষ্ট করতে fill ব্যবহার করে; CSS background-color ব্যবহার করে।
  • শুধুমাত্র CSS। CSS-এর অনেক বৈশিষ্ট্য আছে যা SVG-তে নেই, যেমন margin এবং padding ।
  • শুধুমাত্র SVG। SVG-এর কিছু বৈশিষ্ট্য আছে যা CSS-এ নেই, যেমন x এবং y ।

সুতরাং, যদি আপনি একটি SVG উপাদান স্টাইল করেন, তাহলে SVG স্টাইলিং বৈশিষ্ট্য ব্যবহার করুন। যদি আপনি একটি HTML উপাদান স্টাইল করেন, তাহলে CSS বৈশিষ্ট্য ব্যবহার করুন।

সিএসএস ক্যাসকেড

CSS ক্যাসকেড CSS নিয়মের অগ্রাধিকার নির্ধারণ করে, যা নির্ধারণ করে যে যদি একটি নির্দিষ্ট সম্পত্তি এবং উপাদানের ক্ষেত্রে একাধিক নিয়ম প্রযোজ্য হয় তবে কোন নিয়ম ব্যবহার করা উচিত। নিম্নলিখিত সরলীকৃত ক্যাসকেডটি ব্লকলি দ্বারা সর্বাধিক ব্যবহৃত ক্যাসকেডের অংশগুলিকে অন্তর্ভুক্ত করে এবং "কেন আমার CSS কাজ করে না?" এই প্রশ্নের সমাধান করতে আপনাকে সাহায্য করতে পারে।

সরলীকৃত ক্যাসকেড

কোন নির্দিষ্ট উপাদান এবং সম্পত্তির ক্ষেত্রে কোন নিয়ম প্রযোজ্য তা নির্ধারণ করতে, এই পদক্ষেপগুলি অনুসরণ করুন এবং যখন কেবল একটি নিয়ম অবশিষ্ট থাকে তখন থামুন:

  1. সম্পত্তি এবং উপাদানের ক্ষেত্রে প্রযোজ্য সমস্ত নিয়ম সংগ্রহ করুন।
  2. যদি কোন নিয়মে !important টীকা থাকে, তাহলে যেসব নিয়মে !important টীকা নেই সেগুলো বাতিল করুন।

  3. সর্বোচ্চ সুনির্দিষ্টতার সাথে নিয়মগুলি বেছে নিন।

    • SVG উপস্থাপনা বৈশিষ্ট্যগুলির একটি নির্দিষ্টতা শূন্য।
    • <style> ট্যাগ বা বহিরাগত স্টাইলশিটের নিয়মগুলির নির্দিষ্টতা সাধারণত গণনা করা হয়।
    • ইনলাইন স্টাইল ( style অ্যাট্রিবিউট দ্বারা সেট করা স্টাইল) এর নির্দিষ্টতা যেকোনো নির্বাচকের চেয়ে বেশি।

  4. ডকুমেন্টের শেষে প্রদর্শিত নিয়মটি নির্বাচন করুন।

  5. যদি কোন নিয়ম প্রযোজ্য না হয়, তাহলে উপাদানের প্যারেন্ট থেকে সম্পত্তির মান উত্তরাধিকার সূত্রে প্রাপ্ত করুন।

এই অ্যালগরিদম ক্যাসকেডের নিম্নলিখিত অংশগুলি বিবেচনা করে না:

  • transition প্রপার্টি, যার অগ্রাধিকার সর্বোচ্চ। ব্লকলি এর মধ্যে কয়েকটি ব্যবহার করে।
  • @media at-rule। ব্লকলি এইগুলির মধ্যে একটি ব্যবহার করে।
  • ব্রাউজার বা ব্যবহারকারী দ্বারা নির্দিষ্ট নিয়ম।
  • @scope এবং @layer at-rules এবং animation বৈশিষ্ট্য, যা ব্লকলি ব্যবহার করে না।

সিএসএস নিয়ম

CSS নিয়মগুলি আপনার অ্যাপ্লিকেশনটি কীভাবে স্টাইল করা হবে তা নির্দিষ্ট করে। ব্লকলি নিয়মের একটি ডিফল্ট সেট প্রদান করে যা আপনি আপনার নিজস্ব নিয়ম দিয়ে ওভাররাইড করতে পারেন।

ব্লকলি সিএসএস নিয়ম

ব্লকলি সিএসএস নিয়মের একটি ডিফল্ট সেট প্রদান করে। এই নিয়মগুলি কীভাবে এবং কোথায় যুক্ত করা হবে তা তাদের অগ্রাধিকারকে প্রভাবিত করে।

স্টাইল ট্যাগ

ব্লকলির বেশিরভাগ CSS নিয়ম দুটি <style> ট্যাগে নির্দিষ্ট করা আছে। যেহেতু এই ট্যাগগুলি পৃষ্ঠার উপরের দিকে থাকে, তাই এগুলির নিয়মগুলি পৃষ্ঠার পরে একই নির্দিষ্টতার নিয়মগুলির তুলনায় কম অগ্রাধিকার পায়।

Blockly.css.register নিয়ম

যখন ব্লকলি ইনজেক্ট করা হয়, তখন এটি <head> ট্যাগের চাইল্ড হিসেবে একটি <style> ট্যাগ যোগ করে। এই ট্যাগের নিয়মগুলি এখানে থেকে এসেছে:

  • Blockly.css নেমস্পেস। এই নিয়মগুলি দেখতে, core/css.ts খুলুন এবং let content অনুসন্ধান করুন।
  • পৃথক উপাদান, যা কম্পোনেন্ট-নির্দিষ্ট CSS নিয়ম যোগ করার জন্য Blockly.css.register কল করে। যেহেতু css.register এই নিয়মগুলি content স্ট্রিংয়ের শেষে যোগ করে, তাই তাদের অগ্রাধিকার আগের যোগ করা একই নির্দিষ্টতার নিয়মগুলির তুলনায় বেশি। এই নিয়মগুলি দেখতে, Blockly.css.register এ কলগুলি দেখুন।

যদি আপনি এই নিয়মগুলি ব্যবহার করতে না চান, তাহলে css কনফিগারেশন বিকল্পটি false তে সেট করুন। এই ক্ষেত্রে, আপনি CSS নিয়মের একটি বিকল্প সেট প্রদানের জন্য দায়ী।

রেন্ডারারের নিয়ম

যখন রেন্ডারারটি ইনস্ট্যান্টিয়েটেড হয়, তখন এটি <head> ট্যাগের চাইল্ড হিসেবে রেন্ডারার-নির্দিষ্ট CSS নিয়ম ধারণকারী একটি <style> ট্যাগ যোগ করে। মনে রাখবেন যে এই নিয়মগুলি সর্বদা যোগ করা হয় -- css কনফিগারেশন বিকল্প দ্বারা এগুলি প্রভাবিত হয় না। এই নিয়মগুলি দেখতে, আপনার রেন্ডারারে getCss_ পদ্ধতিটি অনুসন্ধান করুন।

ইনলাইন স্টাইল

ইনলাইন স্টাইলগুলি style অ্যাট্রিবিউটের সাথে নির্দিষ্ট করা হয় এবং সাধারণত যখন কোনও উপাদানের জন্য DOM তৈরি করা হয় তখন তৈরি করা হয়। আংশিক তালিকার জন্য, এই GitHub কোয়েরিটি দেখুন।

ইনলাইন স্টাইলগুলি সরাসরি সেই উপাদানের উপর প্রযোজ্য হয় যেখানে তারা ঘটে এবং যেকোনো নির্বাচকের চেয়ে এর নির্দিষ্টতা বেশি থাকে। এই কারণে, এগুলিকে ওভাররাইড করার জন্য সাধারণত আপনাকে একটি !important অ্যানোটেশন ব্যবহার করতে হয়।

SVG উপস্থাপনা বৈশিষ্ট্য

SVG প্রেজেন্টেশন অ্যাট্রিবিউট হল SVG স্টাইলিং প্রোপার্টি যা SVG এলিমেন্টের অ্যাট্রিবিউট হিসেবে ব্যবহৃত হয়। এগুলির একটি নির্দিষ্টতা শূন্য এবং এতে কোনও !important অ্যানোটেশন থাকতে পারে না, তাই ব্লকলির সমস্ত নিয়মের মধ্যে এগুলির অগ্রাধিকার সর্বনিম্ন। ব্লকলি সাধারণত createSvgElement কলগুলিতে এগুলি তৈরি করে।

আপনার নিজস্ব CSS নিয়ম যোগ করুন

ব্লকলির মতো একই পদ্ধতি ব্যবহার করে আপনি আপনার নিজস্ব CSS নিয়ম যোগ করতে পারেন:

  • Blockly ইনজেক্ট করার আগে Blockly.css.register এ কল করুন। আপনার নিয়মগুলি Blockly's এর পরে যোগ করা হবে এবং একই নির্দিষ্টতার সাথে Blockly নিয়মের চেয়ে বেশি অগ্রাধিকার পাবে।
  • <head> ট্যাগের পরবর্তী চাইল্ড হিসেবে একটি এক্সটার্নাল স্টাইল শিটে একটি <style> ট্যাগ বা লিঙ্ক যোগ করুন। যেহেতু ব্লকলি তার নিয়মগুলি <head> ট্যাগের প্রথম দুটি চাইল্ড হিসেবে যোগ করে, তাই আপনার নিয়মগুলি একই নির্দিষ্টতার সাথে ব্লকলি নিয়মগুলির চেয়ে বেশি অগ্রাধিকার পাবে।
  • একটি কাস্টম কম্পোনেন্টের এলিমেন্টগুলিতে স্টাইল যোগ করতে ইনলাইন স্টাইল ব্যবহার করুন। এই নিয়মগুলির নির্দিষ্টতা নির্বাচক সহ যেকোনো নিয়মের তুলনায় বেশি হবে।
  • একটি কাস্টম কম্পোনেন্টে SVG এলিমেন্টে প্রেজেন্টেশন অ্যাট্রিবিউট ব্যবহার করুন। এই নিয়মগুলির নির্দিষ্টতা নির্বাচক সহ যেকোনো নিয়মের তুলনায় কম হবে।

সমস্যা সমাধান

যদি আপনার CSS কাজ না করে, তাহলে এখানে কিছু সম্ভাব্য কারণ রয়েছে:

  • আপনি একটি SVG উপাদানে CSS বৈশিষ্ট্য অথবা একটি HTML উপাদানে SVG স্টাইলিং বৈশিষ্ট্য ব্যবহার করছেন। SVG স্টাইলিং বৈশিষ্ট্য বনাম CSS বৈশিষ্ট্য দেখুন।

  • আপনার নিয়মের অগ্রাধিকার অন্য নিয়মের তুলনায় কম। এটি সাধারণত কম নির্দিষ্টতার কারণে হয়। এটি ঠিক করার সম্ভাব্য উপায়গুলি হল:

    • টাইপ (এলিমেন্ট) সিলেক্টরের পরিবর্তে ক্লাস সিলেক্টর ব্যবহার করুন।
    • একাধিক নির্বাচক ব্যবহার করুন।
    • যদি সম্ভব হয়, আপনার টার্গেট এলিমেন্টে একটি কাস্টম ক্লাস যোগ করুন এবং আপনার রুলে এই ক্লাসটি ব্যবহার করুন।
    • শেষ অবলম্বন হিসেবে, আপনার নিয়মে একটি !important টীকা যোগ করুন। যদি একটি প্রতিযোগী নিয়ম একটি ইনলাইন স্টাইল ( style attribute) ব্যবহার করে নির্দিষ্ট করা হয় তবে এটিই আপনার একমাত্র পছন্দ।

  • আপনার নিয়মের সুনির্দিষ্টতা অন্য একটি নিয়মের মতোই, কিন্তু পৃষ্ঠার আগে দেখা যায়। যদি আপনি আপনার নিয়মের সুনির্দিষ্টতা বাড়াতে না পারেন, তাহলে এটি পরে পৃষ্ঠায় সরিয়ে দিন।

দুই ধরণের CSS নিয়ম আছে যা আপনি ওভাররাইড করতে পারবেন না:

  • একটি transition নিয়মের মধ্যে সেট করা বৈশিষ্ট্য।
  • !important নিয়ম।