CSS সহ স্টাইল

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

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

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

CSS ক্লাস

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

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

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

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

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

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

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 ক্লাস এবং কাস্টম উপাদান

একটি কাস্টম উপাদান তৈরি করার সময়, কাস্টম 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 কাজ করে না?"

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

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

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

  3. সর্বোচ্চ নির্দিষ্টতা সঙ্গে নিয়ম চয়ন করুন.

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

  4. নথিতে সর্বশেষ প্রদর্শিত নিয়মটি বেছে নিন।

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

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

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

CSS নিয়ম

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

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

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

শৈলী ট্যাগ

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

Blockly.css.register নিয়ম

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

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

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

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

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

ইনলাইন শৈলী

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • একটি transition নিয়মের মধ্যে সেট করা বৈশিষ্ট্যগুলি৷
  • !important নিয়ম.