OffiDocs সহ ক্রোমে CSS অনির্ধারিত পরিবর্তনশীল পরীক্ষক

বর্ণনাঃ

OffiDocs Chromium অনলাইন ব্যবহার করে Chrome অনলাইন ওয়েব স্টোর এক্সটেনশন CSS Undefined Variable Checker চালান।

আপনি কাস্টম বৈশিষ্ট্য/ভেরিয়েবল ব্যবহার করে CSS লিখবেন? আপনি কি কখনও একটি ভুল বানান করেছেন, এবং শুধুমাত্র পরে লক্ষ্য করেছেন যে ফলস্বরূপ একটি রঙ সঠিকভাবে আসছে না? আপনি কি কখনও এমন একটি টুলের জন্য আকাঙ্ক্ষা করেছেন যা আপনাকে CSS ভেরিয়েবলের ব্যবহার ট্র্যাক করতে সাহায্য করবে যা সংজ্ঞায়িত করা হয়নি? তাহলে আপনি ভাগ্যবান, কারণ এটি এমন একটি হাতিয়ার! এই এক্সটেনশনটি Chrome বিকাশকারী সরঞ্জামগুলিতে একটি ট্যাব যুক্ত করে যা "var()" এক্সপ্রেশনের মধ্যে ব্যবহৃত যেকোন অনির্ধারিত CSS ভেরিয়েবলের জন্য বর্তমান পৃষ্ঠাটি পরীক্ষা করতে পারে।

শুধুমাত্র স্টাইলশীট নয়, ইনলাইন স্টাইল অ্যাট্রিবিউটগুলিও বিশ্লেষণ করা হয় এবং ফলাফলগুলি ডেভেলপার টুলস এলিমেন্ট ট্যাবের মধ্যে আপত্তিকর উপাদানের লিঙ্ক সহ একটি বন্ধুত্বপূর্ণ টেবিলে প্রদর্শিত হয়৷

এই এক্সটেনশনটি ব্যবহার করতে, একবার এটি ইনস্টল হয়ে গেলে Google Chrome-এ আপনার পছন্দের একটি ওয়েবসাইট খুলুন এবং তারপরে বিকাশকারী সরঞ্জামগুলি খুলুন৷

আপনি "CSS Undefined Variable Checker" শিরোনামে ডেভেলপার টুলের উপরে একটি নতুন ট্যাব দেখতে পাবেন।

সেই ট্যাবটি আপনাকে এই এক্সটেনশনের UI-তে নিয়ে আসবে।

প্রাথমিকভাবে, আপনি শুধুমাত্র "অনির্ধারিত ভেরিয়েবলের জন্য পরীক্ষা করুন" শিরোনামের একটি বোতাম এবং একটি খালি টেবিল দেখতে পাবেন।

বোতামে ক্লিক করলে সেই পৃষ্ঠার বিশ্লেষণ শুরু হবে যেখানে devtools সংযুক্ত আছে এবং টেবিলের মধ্যে যেকোন ফলাফলের রিপোর্ট করবে।

যদি কোন অনির্ধারিত CSS ভেরিয়েবল পাওয়া না যায়, তাহলে টেবিলটি এমন একটি বার্তা দিয়ে পপুলেট করা হবে।

টেবিলের মধ্যে ফলাফল তিনটি কলাম আছে.

প্রথম কলামটি অনির্ধারিত ভেরিয়েবলের নাম নির্দেশ করে।

পরবর্তী কলামটি নির্দেশ করে যে স্টাইলশীটটিতে এটি পাওয়া গেছে এবং তৃতীয় কলামটি নির্দেশ করে যে পৃষ্ঠার কোন উপাদানটিতে অনির্ধারিত পরিবর্তনশীলটি পাওয়া গেছে।

এই তৃতীয় কলামটি একটি CSS নির্বাচক দ্বারা উপাদান উল্লেখ করে।

যদি অনির্ধারিত ভেরিয়েবলটি একটি স্টাইলশীটের মধ্যে পাওয়া যায়, যেখানে ভেরিয়েবলটি পাওয়া গেছে সেখানে সিএসএস শৈলী ঘোষণার জন্য নির্বাচক কলামটি নির্বাচকের সাথে পপুলেট করা হয়।

অপরদিকে যদি অনির্ধারিত ভেরিয়েবলটি একটি ইনলাইন শৈলীর মধ্যে পাওয়া যায়, প্রশ্নে থাকা উপাদানটির ক্লাস, আইডি এবং ট্যাগের নাম এবং এর সমস্ত পূর্বপুরুষের উপর ভিত্তি করে একটি নির্বাচক তৈরি করা হয়।

মনে রাখবেন যে এই তৈরি করা নির্বাচকটি প্রশ্নে থাকা উপাদানটিকে অনন্যভাবে সনাক্ত করার নিশ্চয়তা দেয় না।

ফলাফল টেবিলের নির্বাচক কলামের প্রতিটি ঘর একটি হাইপারলিঙ্ক।

প্রতিটি লিঙ্কে ক্লিক করলে devtools এর Elements ট্যাব খুলবে এবং এর মধ্যে সমস্যাযুক্ত উপাদানটিকে হাইলাইট করবে, আপনাকে অনির্ধারিত ভেরিয়েবল ট্র্যাক করতে সাহায্য করবে।

দ্রষ্টব্য: এই এক্সটেনশনটি স্টাইলশীট তথ্য অ্যাক্সেস করার জন্য API-এর উপর নির্ভর করে যা ক্রস-অরিজিন রিসোর্স শেয়ারিং দ্বারা সীমাবদ্ধ।

যেকোন স্টাইলশীট যা পৃষ্ঠায় লোড করা হয়েছে কিন্তু যেগুলি পৃষ্ঠা থেকে ভিন্ন উৎসে রয়েছে এবং যেগুলি অ্যাক্সেস-কন্ট্রোল-অ্যালো-অরিজিন হেডারের সাথে পরিবেশিত হয়নি যা এই পৃষ্ঠা থেকে অ্যাক্সেসের অনুমতি দেবে, এই এক্সটেনশন দ্বারা বিশ্লেষণ করা হবে না এবং এটি ত্রুটি প্রদর্শনের কারণ হবে।

এই ত্রুটিগুলি API- অ্যাক্সেসযোগ্য অন্যান্য শৈলী বিশ্লেষণ করা থেকে এক্সটেনশনকে থামায় না৷

এই এক্সটেনশনের পিছনের বিশ্লেষণ যুক্তিটি @sonatype/undefined-css-variable-checker নামে একটি npm প্যাকেজ হিসাবেও উপলব্ধ।

https://www দেখুন।

npmjs.

com/package/@sonatype/undefined-css-variable-checker।

অতিরিক্ত তথ্য:

- কমিউনিটি-গ্রুপ-ক্রোম-স্টোর দ্বারা অফার করা হয়েছে
- গড় রেটিং: 3 তারা (এটি ঠিক ছিল)
- বিকাশকারী এই ইমেইল ঠিকানাটি spambots থেকে রক্ষা করা হচ্ছে. এটি দেখতে হলে আপনাকে JavaScript সক্রিয় করতে হবে.

CSS অনির্ধারিত পরিবর্তনশীল চেকার ওয়েব এক্সটেনশন OffiDocs Chromium অনলাইনের সাথে একত্রিত