CSS বৈশিষ্ট্যের রেফারেন্স

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

CSS দেখা ও পরিবর্তন করার সাথে সম্পর্কিত Chrome DevTools-এর ফিচারগুলোর এই বিশদ রেফারেন্সের মাধ্যমে নতুন কর্মপ্রক্রিয়া আবিষ্কার করুন।

প্রাথমিক বিষয়গুলো শিখতে CSS দেখুন এবং পরিবর্তন করুন ।

একটি উপাদান নির্বাচন করুন

DevTools-এর এলিমেন্টস প্যানেল আপনাকে একবারে একটি এলিমেন্টের CSS দেখতে বা পরিবর্তন করতে দেয়।

স্ক্রিনশটে, DOM ট্রি- তে নীল রঙে হাইলাইট করা h1 এলিমেন্টটি হলো নির্বাচিত এলিমেন্ট। ডানদিকে, স্টাইলস ট্যাবে এলিমেন্টটির স্টাইলগুলো দেখানো হয়েছে। বামদিকে, এলিমেন্টটি ভিউপোর্টে হাইলাইট করা আছে, কিন্তু তা কেবল এই কারণে যে DOM ট্রি- তে মাউসটি এর উপর ঘোরাফেরা করছে।

একটি টিউটোরিয়ালের জন্য কোনো এলিমেন্টের CSS দেখুন ।

একটি উপাদান নির্বাচন করার অনেক উপায় আছে:

• আপনার ভিউপোর্টে এলিমেন্টটির উপর রাইট-ক্লিক করুন এবং 'Inspect' নির্বাচন করুন।
• DevTools-এ, একটি উপাদান নির্বাচন করুন -এ ক্লিক করুন। অথবা Command + Shift + C (Mac) বা Control + Shift + C (Windows, Linux) চাপুন, এবং তারপরে ভিউপোর্টে থাকা এলিমেন্টটিতে ক্লিক করুন।
• DevTools-এ, DOM Tree- তে থাকা এলিমেন্টটিতে ক্লিক করুন।
• DevTools-এর Console- এ document.querySelector('p') এর মতো একটি কোয়েরি চালান, ফলাফলের উপর রাইট-ক্লিক করুন এবং তারপরে Reveal in Elements panel নির্বাচন করুন।

সিএসএস দেখুন

CSS নিয়মগুলো দেখতে এবং CSS সমস্যা নির্ণয় করতে Elements > Styles এবং Computed ট্যাবগুলো ব্যবহার করুন।

লিঙ্ক ব্যবহার করে নেভিগেট করুন

স্টাইলস ট্যাবটি বিভিন্ন স্থানে অন্যান্য বিভিন্ন জায়গার লিঙ্ক প্রদর্শন করে, যার মধ্যে অন্তর্ভুক্ত কিন্তু সীমাবদ্ধ নয়:

• CSS রুলগুলোর পাশে স্টাইল শীট এবং CSS সোর্স রয়েছে। এই ধরনের লিঙ্কগুলো সোর্স প্যানেল খোলে। যদি স্টাইল শীটটি মিনিফাই করা থাকে, তাহলে ‘একটি মিনিফাই করা ফাইলকে পাঠযোগ্য করে তুলুন ’ দেখুন।
• 'Inherited from ...' সেকশনগুলিতে, প্যারেন্ট এলিমেন্টগুলোর ক্ষেত্রে।
• var() কলে, কাস্টম প্রপার্টি ডিক্লারেশনের ক্ষেত্রে।
• animation শর্টহ্যান্ড প্রোপার্টিতে, @keyframes ব্যবহার করুন।
• ডকুমেন্টেশন টুলটিপগুলিতে আরও জানুন লিঙ্ক রয়েছে।
• এবং আরও অনেক কিছু।

এখানে সেগুলোর কয়েকটি তুলে ধরা হলো:

লিঙ্কগুলোর ডিজাইন ভিন্ন হতে পারে। কোনো কিছু লিঙ্ক কি না, সে বিষয়ে নিশ্চিত না হলে, তা জানতে সেটিতে ক্লিক করে দেখতে পারেন।

CSS ডকুমেন্টেশন, স্পেসিফিসিটি এবং কাস্টম প্রপার্টি ভ্যালু সহ টুলটিপগুলি দেখুন।

এলিমেন্টস > স্টাইলস-এর অধীনে নির্দিষ্ট এলিমেন্টের উপর মাউস রাখলে দরকারি তথ্যসহ টুলটিপ দেখা যায়।

CSS ডকুমেন্টেশন দেখুন

সংক্ষিপ্ত CSS বিবরণসহ একটি টুলটিপ দেখতে, স্টাইলস ট্যাবে প্রপার্টির নামের উপর মাউস রাখুন।

এই প্রপার্টিটির উপর একটি MDN CSS রেফারেন্সে যেতে 'আরও জানুন'- এ ক্লিক করুন।

টুলটিপ বন্ধ করতে, চেক করুন দেখাবেন না ।

সেগুলোকে আবার চালু করতে, চেক করুন সেটিংস > পছন্দসমূহ > উপাদানসমূহ > CSS ডকুমেন্টেশন টুলটিপ দেখান ।

সিলেক্টরের নির্দিষ্টতা দেখুন

কোনো সিলেক্টরের উপর মাউস রাখলে তার স্পেসিফিসিটি ওয়েট সহ একটি টুলটিপ দেখতে পাবেন।

কাস্টম প্রপার্টিগুলোর মান দেখুন

একটি --custom-property এর উপর মাউস রাখলে টুলটিপে এর মান দেখতে পাবেন।

অবৈধ, ওভাররাইড করা, নিষ্ক্রিয় এবং অন্যান্য CSS দেখুন

স্টাইলস ট্যাবটি বিভিন্ন ধরনের CSS সমস্যা শনাক্ত করে এবং সেগুলোকে নানা উপায়ে তুলে ধরে।

স্টাইলস ট্যাবে CSS বুঝুন দেখুন।

কোনো এলিমেন্টে প্রকৃতপক্ষে প্রয়োগ করা শুধুমাত্র CSS কোডটি দেখুন।

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

1. একটি উপাদান নির্বাচন করুন ।
2. এলিমেন্টস প্যানেলের কম্পিউটেড ট্যাবে যান।

সমস্ত বৈশিষ্ট্য দেখতে 'Show All' চেকবক্সটি চেক করুন।

Computed ট্যাবে Understand CSS দেখুন।

CSS প্রোপার্টিগুলো বর্ণানুক্রমে দেখুন

কম্পিউটেড ট্যাবটি ব্যবহার করুন। কোনো এলিমেন্টে প্রকৃতপক্ষে প্রয়োগ করা শুধুমাত্র CSS দেখুন।

উত্তরাধিকারসূত্রে প্রাপ্ত CSS প্রোপার্টিগুলো দেখুন

Computed ট্যাবে Show All চেকবক্সটি চেক করুন। কোনো এলিমেন্টে শুধুমাত্র প্রকৃত CSS প্রয়োগ করা অংশটি দেখুন ।

বিকল্পভাবে, স্টাইলস ট্যাবটি স্ক্রল করুন এবং Inherited from <element_name> ' নামের সেকশনগুলো খুঁজুন।

CSS অ্যাট-রুলগুলি দেখুন

অ্যাট-রুল হলো এমন CSS স্টেটমেন্ট যা দিয়ে আপনি CSS-এর আচরণ নিয়ন্ত্রণ করতে পারেন। এলিমেন্টস > স্টাইলস-এর নির্দিষ্ট সেকশনগুলোতে নিম্নলিখিত অ্যাট-রুলগুলো দেখানো হয়:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

নিয়ম অনুযায়ী @property দেখুন

@property CSS অ্যাট-রুলটি আপনাকে কোনো জাভাস্ক্রিপ্ট না চালিয়েই সুস্পষ্টভাবে CSS কাস্টম প্রোপার্টি নির্ধারণ করতে এবং একটি স্টাইল শীটে সেগুলোকে অন্তর্ভুক্ত করতে দেয়।

স্টাইলস ট্যাবে থাকা এই ধরনের প্রপার্টির নামের উপর মাউস রাখলে একটি টুলটিপ দেখা যাবে, যেখানে প্রপার্টিটির মান, বর্ণনাকারী এবং স্টাইলস ট্যাবের নিচের দিকে থাকা সংকোচনযোগ্য @property বিভাগে এটি নিবন্ধন করার একটি লিঙ্ক থাকবে।

একটি @property রুল সম্পাদনা করতে, এর নাম বা মানের উপর ডাবল-ক্লিক করুন ।

@supports at-rules দেখুন

স্টাইলস ট্যাবটি আপনাকে @supports CSS অ্যাট-রুলগুলো দেখায়, যদি সেগুলো কোনো এলিমেন্টে প্রয়োগ করা হয়ে থাকে। উদাহরণস্বরূপ, নিম্নলিখিত এলিমেন্টটি ইন্সপেক্ট করুন:

যদি আপনার ব্রাউজার lab() ফাংশনটি সমর্থন করে, তাহলে এলিমেন্টটি সবুজ হবে, অন্যথায় এটি বেগুনি হবে।

@scope at-rules দেখুন

স্টাইলস ট্যাবটি আপনাকে CSS @scope অ্যাট-রুলগুলো দেখায়, যদি সেগুলো কোনো এলিমেন্টে প্রয়োগ করা হয়ে থাকে।

নতুন @scope অ্যাট-রুলগুলো CSS Cascading and Inheritance Level 6 স্পেসিফিকেশনের একটি অংশ। এই রুলগুলো আপনাকে CSS স্টাইল স্কোপ করার সুযোগ দেয়, অর্থাৎ, নির্দিষ্ট এলিমেন্টগুলোতে সুস্পষ্টভাবে স্টাইল প্রয়োগ করতে দেয়।

নিম্নলিখিত প্রিভিউতে @scope নিয়মটি দেখুন:

1. প্রিভিউতে কার্ডের লেখাটি পরীক্ষা করুন ।
2. স্টাইলস ট্যাবে, @scope রুলটি খুঁজুন।

এই উদাহরণে, @scope রুলটি card ক্লাসযুক্ত এলিমেন্টের ভেতরের সমস্ত <p> ` এলিমেন্টের জন্য গ্লোবাল CSS ` background-color ডিক্লারেশনকে ওভাররাইড করে।

@scope রুলটি সম্পাদনা করতে, এটিতে ডাবল-ক্লিক করুন।

নিয়মগুলিতে @font-palette-values ​​দেখুন

@font-palette-values ​​CSS at-rule- টি আপনাকে font-palette প্রপার্টির ডিফল্ট মানগুলো কাস্টমাইজ করার সুযোগ দেয়। Elements > Styles- এর একটি নির্দিষ্ট বিভাগে এই at-rule-টি দেখা যায়।

পরবর্তী প্রিভিউতে @font-palette-values ​​সেকশনটি দেখুন:

1. প্রিভিউতে থাকা টেক্সটের দ্বিতীয় লাইনটি পরীক্ষা করুন ।
2. Styles- এ, @font-palette-values ​​সেকশনটি খুঁজুন।

এই উদাহরণে, --New ফন্ট প্যালেটের মানগুলো রঙিন ফন্টের ডিফল্ট মানগুলোকে ওভাররাইড করে।

আপনার নিজস্ব মানগুলো সম্পাদনা করতে, সেগুলোতে ডাবল-ক্লিক করুন।

@position-try at-rules দেখুন

@position-try CSS রুল এবং position-try-options প্রপার্টি ব্যবহার করে আপনি এলিমেন্টগুলোর জন্য বিকল্প অ্যাঙ্কর পজিশন নির্ধারণ করতে পারেন। আরও জানতে, Introducing the CSS anchor positioning API দেখুন।

এলিমেন্টস > স্টাইলস নিম্নলিখিত বিষয়গুলো সমাধান ও লিঙ্ক করে:

• position-try-options প্রপার্টির মানগুলোকে একটি নির্দিষ্ট @position-try --name সেকশনে স্থানান্তর করুন।
• popovertarget অ্যাট্রিবিউটযুক্ত সংশ্লিষ্ট এলিমেন্টগুলোর position-anchor প্রপার্টির মান এবং anchor() আর্গুমেন্ট।

পরবর্তী প্রিভিউতে position-try-options ভ্যালুগুলো এবং @position-try সেকশনগুলো পরীক্ষা করুন:

1. প্রিভিউতে সাবমেনুটি খুলুন, অর্থাৎ YOUR ACCOUNT-এ ক্লিক করে STOREFRONT-এ ক্লিক করুন।
2. প্রিভিউতে id="submenu" যুক্ত এলিমেন্টটি ইন্সপেক্ট করুন ।
3. স্টাইলস -এ, position-try-options প্রপার্টিটি খুঁজুন এবং এর --bottom ভ্যালুটিতে ক্লিক করুন। স্টাইলস ট্যাবটি আপনাকে সংশ্লিষ্ট @position-try সেকশনে নিয়ে যাবে।
4. position-anchor ভ্যালু লিঙ্কে অথবা একই anchor() আর্গুমেন্টগুলোতে ক্লিক করুন। Elements প্যানেলটি সংশ্লিষ্ট popovertarget অ্যাট্রিবিউটসহ এলিমেন্টটিকে নির্বাচন করে এবং Styles ট্যাবটি এলিমেন্টটির CSS প্রদর্শন করে।

মানগুলো সম্পাদনা করতে সেগুলোর উপর ডাবল-ক্লিক করুন।

একটি উপাদানের বক্স মডেল দেখুন

কোনো এলিমেন্টের বক্স মডেল দেখতে, স্টাইলস ট্যাবে যান এবং ক্লিক করুন অ্যাকশন বারে সাইডবার বাটন দেখান ।

মান পরিবর্তন করতে, সেটির উপর ডাবল-ক্লিক করুন।

একটি এলিমেন্টের CSS অনুসন্ধান এবং ফিল্টার করুন

নির্দিষ্ট CSS প্রোপার্টি বা ভ্যালু খোঁজার জন্য Styles এবং Computed ট্যাবের ফিল্টার বক্সটি ব্যবহার করুন।

Computed ট্যাবে উত্তরাধিকারসূত্রে প্রাপ্ত প্রোপার্টিগুলোও অনুসন্ধান করতে, Show All চেকবক্সটি চেক করুন।

কম্পিউটেড ট্যাবে নেভিগেট করতে, ‘গ্রুপ’ চেক করে ফিল্টার করা প্রোপার্টিগুলোকে সংকোচনযোগ্য ক্যাটাগরিতে গ্রুপ করুন।

একটি ফোকাসড পৃষ্ঠা অনুকরণ করুন

আপনি যদি পৃষ্ঠা থেকে ডেভটুলস-এ ফোকাস পরিবর্তন করেন, তাহলে ফোকাসের কারণে সক্রিয় হওয়া কিছু ওভারলে এলিমেন্ট স্বয়ংক্রিয়ভাবে লুকিয়ে যায়। উদাহরণস্বরূপ, ড্রপ-ডাউন তালিকা, মেনু বা তারিখ পিকার। চেকবক্সের 'এমুলেট এ ফোকাসড পেজ' বিকল্পটি আপনাকে এই ধরনের এলিমেন্টকে এমনভাবে ডিবাগ করতে দেয় যেন সেটি ফোকাসে আছে।

এই ডেমো পেজটিতে একটি ফোকাস করা পেজ অনুকরণ করার চেষ্টা করুন:

1. ইনপুট এলিমেন্টটিতে ফোকাস করুন। এর নিচে আরেকটি এলিমেন্ট প্রদর্শিত হবে।
2. DevTools খুলুন । এখন পেজের পরিবর্তে DevTools উইন্ডোটি ফোকাসে আছে, তাই এলিমেন্টটি আবার অদৃশ্য হয়ে যায়।
3. Elements > Styles- এ গিয়ে :hov-এ ক্লিক করুন, ‘Emulate a focused page’ চেকবক্সটি চেক করুন এবং নিশ্চিত করুন যে ইনপুট এলিমেন্টটি সিলেক্ট করা আছে । এখন আপনি এর নিচের এলিমেন্টটি ইন্সপেক্ট করতে পারবেন।

আপনি রেন্ডারিং প্যানেলেও একই বিকল্পটি খুঁজে পাবেন।

কোনো এলিমেন্টকে ফ্রিজ করার আরও উপায় জানতে, ‘ফ্রিজ স্ক্রিন’ এবং ‘অদৃশ্য হয়ে যাওয়া এলিমেন্টগুলো পরিদর্শন’ দেখুন।

একটি ছদ্ম-শ্রেণী টগল করুন

একটি সিউডো-ক্লাস টগল করতে:

1. একটি উপাদান নির্বাচন করুন ।
2. এলিমেন্টস প্যানেলে, স্টাইলস ট্যাবে যান।
3. ক্লিক করুন :hov .
4. যে সিউডো-ক্লাসটি আপনি চালু করতে চান, সেটি যাচাই করুন।

এই উদাহরণে আপনি দেখতে পাচ্ছেন যে, এলিমেন্টটির উপর আসলে হোভার না করা সত্ত্বেও DevTools এলিমেন্টটিতে background-color ডিক্লারেশনটি প্রয়োগ করে।

স্টাইলস ট্যাবটি সমস্ত এলিমেন্টের জন্য নিম্নলিখিত সিউডো-ক্লাসগুলি দেখায়:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

এছাড়াও, কিছু এলিমেন্টের নিজস্ব সিউডো-ক্লাস থাকতে পারে। যখন আপনি এই ধরনের কোনো এলিমেন্ট নির্বাচন করেন, তখন স্টাইলস ট্যাবে একটি ‘ফোর্স স্পেসিফিক এলিমেন্ট স্টেট’ সেকশন দেখা যায়, যা আপনি এক্সপ্যান্ড করে এলিমেন্টটির জন্য নির্দিষ্ট সিউডো-ক্লাসগুলো চালু করতে পারেন।

একটি ইন্টারেক্টিভ টিউটোরিয়ালের জন্য ‘Add a pseudostate to a class’ দেখুন।

উত্তরাধিকারসূত্রে প্রাপ্ত হাইলাইট ছদ্ম-উপাদানগুলি দেখুন

সিউডো-এলিমেন্ট আপনাকে এলিমেন্টের নির্দিষ্ট অংশকে স্টাইল করার সুযোগ দেয়। হাইলাইট সিউডো-এলিমেন্ট হলো ডকুমেন্টের এমন অংশ যার স্ট্যাটাস "সিলেক্টেড" থাকে এবং ব্যবহারকারীকে এই স্ট্যাটাসটি বোঝানোর জন্য সেগুলোকে "হাইলাইটেড" স্টাইলে সাজানো হয়। উদাহরণস্বরূপ, এই ধরনের সিউডো-এলিমেন্টগুলো হলো ::selection , ::spelling-error , ::grammar-error , এবং ::highlight ।

স্পেসিফিকেশনে যেমন উল্লেখ করা হয়েছে, একাধিক স্টাইলের মধ্যে বিরোধ দেখা দিলে ক্যাসকেড বিজয়ী স্টাইলটি নির্ধারণ করে।

নিয়মগুলোর উত্তরাধিকার এবং অগ্রাধিকার আরও ভালোভাবে বোঝার জন্য, আপনি উত্তরাধিকারসূত্রে প্রাপ্ত হাইলাইট সিউডো-এলিমেন্টগুলো দেখতে পারেন:

1. নিচের লেখাটি পরীক্ষা করুন ।

   আমি আমার প্যারেন্টের হাইলাইট সিউডো-এলিমেন্টের স্টাইল উত্তরাধিকারসূত্রে পেয়েছি। আমাকে সিলেক্ট করুন!

2. উপরের লেখাটির একটি অংশ নির্বাচন করুন।

3. স্টাইলস ট্যাবে, নিচে স্ক্রল করে ‘ Inherited from ::selection pseudo of... সেকশনটি খুঁজুন।

ক্যাসকেড স্তরগুলি দেখুন

ক্যাসকেড লেয়ার আপনার CSS ফাইলগুলোর উপর আরও সুস্পষ্ট নিয়ন্ত্রণ সক্ষম করে, যা স্টাইল-নির্দিষ্টতার দ্বন্দ্ব প্রতিরোধ করে। এটি বড় কোডবেস, ডিজাইন সিস্টেম এবং অ্যাপ্লিকেশনে থার্ড-পার্টি স্টাইল পরিচালনার ক্ষেত্রে উপযোগী।

ক্যাসকেড লেয়ারগুলো দেখতে, পরবর্তী এলিমেন্টটি ইন্সপেক্ট করুন এবং Elements > Styles খুলুন।

স্টাইলস ট্যাবে, page , component এবং base —এই তিনটি ক্যাসকেড লেয়ার ও তাদের স্টাইলগুলো দেখুন।

লেয়ারের ক্রম দেখতে, লেয়ারের নামে বা ক্লিক করুন। CSS লেয়ারগুলো দেখার বাটন টগল করুন ।

page লেয়ারটির স্পেসিফিসিটি সর্বোচ্চ, তাই এলিমেন্টটির ব্যাকগ্রাউন্ড সবুজ।

প্রিন্ট মোডে একটি পৃষ্ঠা দেখুন

প্রিন্ট মোডে একটি পৃষ্ঠা দেখতে:

1. কমান্ড মেনু খুলুন।
2. Rendering টাইপ করা শুরু করুন এবং Show Rendering নির্বাচন করুন।
3. Emulate CSS Media ড্রপ-ডাউন থেকে print নির্বাচন করুন।

কভারেজ ট্যাবের মাধ্যমে ব্যবহৃত এবং অব্যবহৃত CSS দেখুন।

কভারেজ ট্যাবটি আপনাকে দেখায় যে একটি পেজ আসলে কী কী CSS ব্যবহার করে।

1. DevTools ফোকাসে থাকা অবস্থায় কমান্ড মেনু খুলতে Command + Shift + P (Mac) অথবা Control + Shift + P (Windows, Linux, ChromeOS) চাপুন।

2. coverage টাইপ করা শুরু করুন।

   

3. ‘Show Coverage’ নির্বাচন করুন। ‘Coverage’ ট্যাবটি প্রদর্শিত হবে।

   

4. ক্লিক করুন রিলোড করুন । পেজটি রিলোড হয় এবং ব্রাউজার দ্বারা লোড হওয়া প্রতিটি ফাইল থেকে কী পরিমাণ CSS (এবং জাভাস্ক্রিপ্ট) ব্যবহৃত হয়েছে, তার একটি সার্বিক চিত্র কভারেজ ট্যাবে পাওয়া যায়।

   

   সবুজ রঙ ব্যবহৃত CSS নির্দেশ করে। লাল রঙ অব্যবহৃত CSS নির্দেশ করে।

5. উপরের প্রিভিউতে একটি CSS ফাইলে ব্যবহৃত CSS কোডের লাইন-বাই-লাইন বিশ্লেষণ দেখতে ফাইলটিতে ক্লিক করুন।

   

   স্ক্রিনশটে, devsite-google-blue.css ফাইলের ৫৫ থেকে ৫৭ এবং ৬৫ থেকে ৬৭ নম্বর লাইনগুলো অব্যবহৃত, অপরদিকে ৫৯ থেকে ৬৩ নম্বর লাইনগুলো ব্যবহৃত হয়েছে।

প্রিন্ট প্রিভিউ মোড জোর করে চালু করুন

ডেভটুলসকে প্রিন্ট প্রিভিউ মোডে জোর করে চালু করা দেখুন।

CSS কপি করুন

স্টাইলস ট্যাবের একটিমাত্র ড্রপ-ডাউন মেনু থেকে আপনি আলাদা CSS রুল, ডিক্লারেশন, প্রপার্টি ও ভ্যালু কপি করতে পারেন।

এছাড়াও, আপনি জাভাস্ক্রিপ্ট সিনট্যাক্সে CSS প্রোপার্টিগুলো কপি করতে পারেন। আপনি যদি CSS-in-JS লাইব্রেরি ব্যবহার করেন, তাহলে এই অপশনটি বেশ সুবিধাজনক।

CSS কপি করতে:

1. একটি উপাদান নির্বাচন করুন ।
2. Elements > Styles ট্যাবে, একটি CSS প্রপার্টির উপর রাইট-ক্লিক করুন।

3. ড্রপ-ডাউন মেনু থেকে নিম্নলিখিত বিকল্পগুলির মধ্যে একটি নির্বাচন করুন:

   • ডিক্লারেশন কপি করুন । CSS সিনট্যাক্সে প্রপার্টি এবং এর ভ্যালু কপি করে: css property: value;
   • প্রপার্টি কপি করুন । শুধুমাত্র property নামটি কপি করে।
   • মান অনুলিপি করুন । শুধুমাত্র value অনুলিপি করে।
   • রুল কপি করুন । সম্পূর্ণ CSS রুলটি কপি করে: css selector[, selector] { property: value; property: value; ... }
   • JS হিসেবে ডিক্লারেশন কপি করুন । জাভাস্ক্রিপ্ট সিনট্যাক্সে প্রপার্টি এবং এর ভ্যালু কপি করে: js propertyInCamelCase: 'value'
   • সমস্ত ডিক্লারেশন কপি করুন । CSS রুলে থাকা সমস্ত প্রপার্টি এবং তাদের ভ্যালু কপি করে: css property: value; property: value; ...

   • সমস্ত ডিক্লারেশন JS হিসেবে কপি করুন । সমস্ত প্রোপার্টি এবং তাদের ভ্যালু জাভাস্ক্রিপ্ট সিনট্যাক্সে কপি করে: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • সমস্ত CSS পরিবর্তন কপি করুন । এটি স্টাইলস ট্যাবে করা পরিবর্তনগুলো সমস্ত ডিক্লারেশনে কপি করে ।

   • গণনাকৃত মান দেখুন । এটি আপনাকে 'গণনাকৃত' ট্যাবে নিয়ে যাবে।

CSS পরিবর্তন করুন

এই বিভাগে Elements > Styles- এ CSS পরিবর্তন করার সমস্ত উপায় তালিকাভুক্ত করা হয়েছে।

এছাড়াও, আপনি পারেন:

• একাধিক পেজ লোডের ক্ষেত্রে CSS পরিবর্তন করুন ।
• আপনার ওয়ার্কস্পেসের লোকাল সোর্সে পরিবর্তিত CSS সংরক্ষণ করুন ।

কোড কমপ্লিশন দিয়ে CSS পরিবর্তন করুন

CSS প্রপার্টিগুলোর সঠিক সিনট্যাক্স মনে না রেখেই গ্রেডিয়েন্ট বা বক্স শ্যাডোর মতো আরও জটিল সংমিশ্রণ নিয়ে পরীক্ষা-নিরীক্ষা করতে, অথবা একাধিক সম্পর্কিত প্রপার্টির ওপর নির্ভর করে দ্রুত গ্রিড ও ফ্লেক্স লেআউট তৈরি করতে, আপনি একটি CSS প্রপার্টি টাইপ করা শুরু করে কোড কমপ্লিশন ব্যবহার করতে পারেন।

একটি এলিমেন্টে CSS ডিক্লারেশন যোগ করুন

যেহেতু ডিক্লারেশনের ক্রম একটি এলিমেন্টের স্টাইলকে প্রভাবিত করে, তাই আপনি বিভিন্ন উপায়ে ডিক্লারেশন যোগ করতে পারেন:

• একটি ইনলাইন ডিক্লারেশন যোগ করুন । এটি এলিমেন্টের HTML-এ একটি style অ্যাট্রিবিউট যোগ করার সমতুল্য।
• একটি স্টাইল রুলে একটি ডিক্লারেশন যোগ করুন ।

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

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

ইনলাইন ঘোষণা যোগ করুন

ইনলাইন ডিক্লারেশন যোগ করতে:

1. একটি উপাদান নির্বাচন করুন ।
2. স্টাইলস ট্যাবে, element.style সেকশনের ব্র্যাকেটগুলোর মধ্যে ক্লিক করুন। কার্সরটি ফোকাস হবে, ফলে আপনি টেক্সট লিখতে পারবেন।
3. একটি প্রপার্টির নাম টাইপ করুন এবং এন্টার চাপুন।

4. ওই প্রপার্টির জন্য একটি বৈধ মান টাইপ করুন এবং এন্টার চাপুন। DOM ট্রি- তে আপনি দেখতে পাবেন যে এলিমেন্টটিতে একটি style অ্যাট্রিবিউট যুক্ত হয়েছে।

   

   স্ক্রিনশটে, নির্বাচিত এলিমেন্টটিতে margin-top এবং background-color প্রপার্টিগুলো প্রয়োগ করা হয়েছে। DOM Tree- তে আপনি এলিমেন্টটির style অ্যাট্রিবিউটে এই ডিক্লারেশনগুলোর প্রতিফলন দেখতে পাবেন।

একটি স্টাইল নিয়মে একটি ঘোষণা যোগ করুন

বিদ্যমান স্টাইল নিয়মে একটি ঘোষণা যোগ করতে:

1. একটি উপাদান নির্বাচন করুন ।
2. স্টাইলস ট্যাবে, যে স্টাইল রুলটিতে আপনি ডিক্লারেশনটি যোগ করতে চান, তার ব্র্যাকেটগুলোর মধ্যে ক্লিক করুন। কার্সরটি ফোকাস হবে, ফলে আপনি টেক্সট লিখতে পারবেন।
3. একটি প্রপার্টির নাম টাইপ করুন এবং এন্টার চাপুন।
4. উক্ত প্রপার্টির জন্য একটি বৈধ মান টাইপ করুন এবং এন্টার চাপুন।

স্ক্রিনশটটিতে, একটি স্টাইল রুলে নতুন border-bottom-style:groove ডিক্লারেশনটি যুক্ত হয়েছে।

একটি ঘোষণার নাম বা মান পরিবর্তন করুন

কোনো ডিক্লারেশনের নাম বা মান পরিবর্তন করতে সেটির উপর ডাবল-ক্লিক করুন। কোনো মানকে দ্রুত ০.১, ১, ১০, বা ১০০ ইউনিট করে বাড়ানো বা কমানোর শর্টকাট জানতে “কিবোর্ড শর্টকাটের সাহায্যে এনুমারেবল ভ্যালু পরিবর্তন” দেখুন।

কিবোর্ড শর্টকাট ব্যবহার করে গণনাযোগ্য মান পরিবর্তন করুন

কোনো ডিক্লারেশনের এনুমারেবল ভ্যালু, যেমন ` font-size , এডিট করার সময় আপনি একটি নির্দিষ্ট পরিমাণে ভ্যালুটি বাড়ানোর জন্য নিম্নলিখিত কীবোর্ড শর্টকাটগুলো ব্যবহার করতে পারেন:

• ০.১ করে বাড়াতে Option + Up (Mac) অথবা Alt + Up (Windows, Linux) চাপুন।
• মানটি ১ করে পরিবর্তন করতে পারবেন , অথবা বর্তমান মান -১ এবং ১-এর মধ্যে হলে ০.১ করে পরিবর্তন করতে পারবেন।
• ১০ করে বাড়াতে Shift + Up চাপুন ।
• মানটি ১০০ করে বাড়াতে Shift + Command + Up (Mac) অথবা Control + Shift + Page Up (Windows, Linux) চাপুন।

কমানোও কাজ করে। শুধু আগে উল্লেখিত প্রতিটি ' Up'- এর জায়গায় 'Down' বসিয়ে দিন।

দৈর্ঘ্যের মান পরিবর্তন করুন

আপনি আপনার পয়েন্টার ব্যবহার করে প্রস্থ, উচ্চতা, প্যাডিং, মার্জিন বা বর্ডারের মতো দৈর্ঘ্য-ভিত্তিক যেকোনো প্রপার্টি পরিবর্তন করতে পারেন।

দৈর্ঘ্যের একক পরিবর্তন করতে:

1. ইউনিটের নামের উপর মাউস রাখুন এবং লক্ষ্য করুন যে এটির নিচে দাগ দেওয়া আছে।

2. ড্রপ-ডাউন থেকে ইউনিট নির্বাচন করতে ইউনিটের নামে ক্লিক করুন।

দৈর্ঘ্যের মান পরিবর্তন করতে:

1. একক মানের উপর মাউস পয়েন্টার নিয়ে গেলে দেখবেন যে পয়েন্টারটি একটি আনুভূমিক দ্বিমুখী তীরচিহ্নে পরিবর্তিত হয়ে গেছে।

2. মান বাড়াতে বা কমাতে আনুভূমিকভাবে টানুন।

মানটি ১০ করে পরিবর্তন করতে, ড্র্যাগ করার সময় Shift চেপে ধরুন।

একটি এলিমেন্টে ক্লাস যোগ করুন

কোনো এলিমেন্টে ক্লাস যোগ করতে:

1. DOM ট্রি- তে এলিমেন্টটি নির্বাচন করুন ।
2. .cls . এ ক্লিক করুন।
3. 'নতুন ক্লাস যোগ করুন' বক্সে ক্লাসের নাম লিখুন।
4. এন্টার চাপুন।

লাইট ও ডার্ক থিমের পছন্দগুলো অনুকরণ করুন এবং স্বয়ংক্রিয় ডার্ক মোড সক্রিয় করুন।

স্বয়ংক্রিয় ডার্ক মোড চালু বা বন্ধ করতে অথবা ব্যবহারকারীর পছন্দ অনুযায়ী হালকা বা গাঢ় থিম অনুকরণ করতে :

1. এলিমেন্টস > স্টাইলস ট্যাবে ক্লিক করুন সাধারণ রেন্ডারিং এমুলেশনগুলো টগল করুন ।

2. ড্রপ-ডাউন তালিকা থেকে নিম্নলিখিতগুলির মধ্যে একটি নির্বাচন করুন:

   • prefers-color-scheme: light . এটি নির্দেশ করে যে ব্যবহারকারী হালকা থিম পছন্দ করেন।
   • prefers-color-scheme: dark . এটি নির্দেশ করে যে ব্যবহারকারী ডার্ক থিম পছন্দ করেন।
   • স্বয়ংক্রিয় ডার্ক মোড । আপনি নিজে ডার্ক মোড প্রয়োগ না করলেও এটি আপনার পেজকে সেই মোডে প্রদর্শন করে। এছাড়াও, এটি স্বয়ংক্রিয়ভাবে prefers-color-scheme কে dark এ সেট করে দেয়।

এই ড্রপ-ডাউনটি হলো রেন্ডারিং ট্যাবের ' Emulate CSS media feature prefers-color-scheme ' এবং 'Enable automatic dark mode' অপশনগুলোর একটি শর্টকাট।

একটি ক্লাস টগল করুন

কোনো এলিমেন্টের ক্লাস সক্রিয় বা নিষ্ক্রিয় করতে:

1. DOM ট্রি- তে এলিমেন্টটি নির্বাচন করুন ।
2. এলিমেন্ট ক্লাসেস সেকশনটি খুলুন। একটি এলিমেন্টে ক্লাস যোগ করা দেখুন। অ্যাড নিউ ক্লাস বক্সের নিচে সেই সমস্ত ক্লাস রয়েছে যা এই এলিমেন্টটিতে প্রয়োগ করা হচ্ছে।
3. যে ক্লাসটি আপনি সক্রিয় বা নিষ্ক্রিয় করতে চান, তার পাশের চেকবক্সটি টগল করুন।

একটি স্টাইল নিয়ম যোগ করুন

একটি নতুন স্টাইল নিয়ম যোগ করতে:

1. একটি উপাদান নির্বাচন করুন ।
2. নতুন স্টাইল নিয়মে ক্লিক করুন DevTools, element.style রুলটির নিচে একটি নতুন রুল যুক্ত করে।

স্ক্রিনশটে দেখা যাচ্ছে, 'New Style Rule'-এ ক্লিক করার পর DevTools, h1.devsite-page-title স্টাইল রুলটি যোগ করে।

কোন স্টাইল শীটে নিয়মটি যোগ করতে হবে তা বেছে নিন

নতুন স্টাইল রুল যোগ করার সময়, New Style Rule-এ ক্লিক করে ধরে রাখুন। কোন স্টাইল শীটে স্টাইল রুলটি যোগ করতে হবে তা বেছে নিতে।

একটি ঘোষণা টগল করুন

একটিমাত্র ডিক্লারেশন চালু বা বন্ধ করতে:

1. একটি উপাদান নির্বাচন করুন ।
2. স্টাইলস ট্যাবে, ডিক্লারেশনটি নির্ধারণকারী রুলটির উপর মাউস রাখুন। প্রতিটি ডিক্লারেশনের পাশে চেকবক্স দেখা যাবে।
3. ডিক্লারেশনের পাশের চেকবক্সটি চেক বা আনচেক করুন। যখন আপনি কোনো ডিক্লারেশন আনচেক করেন, তখন DevTools সেটিকে কেটে দেয়, যা বোঝায় যে এটি আর সক্রিয় নেই।

স্ক্রিনশটটিতে, বর্তমানে নির্বাচিত এলিমেন্টটির color প্রপার্টিটি বন্ধ করা আছে।

অ্যানিমেশন চলাকালীন ::view-transition সিউডো-এলিমেন্টগুলো সম্পাদনা করুন।

অ্যানিমেশন বিভাগের সংশ্লিষ্ট অংশটি দেখুন।

আরও তথ্যের জন্য, ভিউ ট্রানজিশন এপিআই (View Transitions API) ব্যবহার করে মসৃণ এবং সহজ ট্রানজিশন (Smooth and simple transitions) দেখুন।

গ্রিড এডিটর ব্যবহার করে গ্রিড আইটেম এবং সেগুলোর বিষয়বস্তু সারিবদ্ধ করুন।

Inspect CSS grid-এর সংশ্লিষ্ট বিভাগটি দেখুন।

কালার পিকার দিয়ে রং পরিবর্তন করুন

কালার পিকারের সাহায্যে এইচডি এবং নন-এইচডি কালারগুলো পরিদর্শন ও ডিবাগ করুন ।

অ্যাঙ্গেল ক্লক দিয়ে কোণের মান পরিবর্তন করুন

অ্যাঙ্গেল ক্লক CSS প্রপার্টির ভ্যালুতে থাকা <angle> পরিবর্তন করার জন্য একটি গ্রাফিক্যাল ইউজার ইন্টারফেস (GUI) প্রদান করে।

অ্যাঙ্গেল ক্লকটি খুলতে :

1. অ্যাঙ্গেল ডিক্লারেশন সহ একটি এলিমেন্ট সিলেক্ট করুন ।

2. স্টাইলস ট্যাবে, যে transform বা background ডিক্লারেশনটি আপনি পরিবর্তন করতে চান, সেটি খুঁজুন। অ্যাঙ্গেল ভ্যালুর পাশে থাকা অ্যাঙ্গেল প্রিভিউ বক্সে ক্লিক করুন।

   

   -5deg এবং 0.25turn এর বাম দিকের ছোট ঘড়িগুলো হলো কোণের প্রিভিউ।

3. অ্যাঙ্গেল ক্লকটি খুলতে প্রিভিউতে ক্লিক করুন।

   

4. অ্যাঙ্গেল ক্লক বৃত্তটিতে ক্লিক করে কোণের মান পরিবর্তন করুন অথবা মাউস স্ক্রল করে কোণের মান ১ করে বাড়ান বা কমান।

5. কোণের মান পরিবর্তন করার জন্য আরও কিবোর্ড শর্টকাট রয়েছে। স্টাইল প্যানেলের কিবোর্ড শর্টকাট অংশে এ বিষয়ে আরও জানুন।

শ্যাডো এডিটর ব্যবহার করে বক্স ও টেক্সটের শ্যাডো পরিবর্তন করুন।

শ্যাডো এডিটর text-shadow এবং box-shadow CSS ডিক্লারেশন পরিবর্তন করার জন্য একটি GUI প্রদান করে।

শ্যাডো এডিটর ব্যবহার করে শ্যাডো পরিবর্তন করতে:

1. শ্যাডো ডিক্লারেশনসহ একটি এলিমেন্ট নির্বাচন করুন । উদাহরণস্বরূপ, পরবর্তী এলিমেন্টটি নির্বাচন করুন।

2. স্টাইলস ট্যাবে, একটি শ্যাডো খুঁজুন text-shadow বা box-shadow ডিক্লারেশনের পাশের আইকন।

   

3. শ্যাডো এডিটর খোলার জন্য শ্যাডো আইকনটিতে ক্লিক করুন।

   

4. ছায়ার বৈশিষ্ট্য পরিবর্তন করুন:

   • টাইপ করুন (শুধুমাত্র box-shadow জন্য)। আউটসেট অথবা ইনসেট বাছাই করুন।
   • X এবং Y অফসেট । নীল বিন্দুটি টেনে আনুন অথবা মান নির্দিষ্ট করুন।
   • ঝাপসা করুন । স্লাইডারটি টেনে আনুন অথবা একটি মান নির্দিষ্ট করুন।
   • বিস্তার করুন (শুধুমাত্র box-shadow জন্য)। স্লাইডারটি টেনে আনুন অথবা একটি মান নির্দিষ্ট করুন।

5. এলিমেন্টটিতে প্রয়োগ করা পরিবর্তনগুলো লক্ষ্য করুন।

ইজিং এডিটর ব্যবহার করে অ্যানিমেশন ও ট্রানজিশনের সময় সম্পাদনা করুন।

ইজিং এডিটরটি transition-timing-function এবং animation-timing-function এর মান পরিবর্তন করার জন্য একটি GUI প্রদান করে।

ইজিং এডিটর খুলতে:

1. টাইমিং ফাংশন ডিক্লারেশন আছে এমন একটি এলিমেন্ট সিলেক্ট করুন , যেমন এই পেজের <body> এলিমেন্টটি।
2. স্টাইলস ট্যাবে, বেগুনি রঙটি খুঁজুন। transition-timing-function , animation-timing-function ডিক্লারেশন, অথবা transition শর্টহ্যান্ড প্রপার্টির পাশের আইকন।
3. ইজিং এডিটর খোলার জন্য আইকনটিতে ক্লিক করুন:

টাইমিং সামঞ্জস্য করতে প্রিসেট ব্যবহার করুন

এক ক্লিকে টাইমিং সামঞ্জস্য করতে, ইজিং এডিটর- এ থাকা প্রিসেটগুলি ব্যবহার করুন:

1. ইজিং এডিটর- এ, একটি কীওয়ার্ড ভ্যালু সেট করতে, পিকার বাটনগুলোর মধ্যে একটিতে ক্লিক করুন:
   • রৈখিক
   • সহজে ঢোকানো-বের করা
   • সহজভাবে প্রবেশ করুন
   • সহজ-আউট

2. প্রিসেট সুইচারে ক্লিক করুন অথবা নিম্নলিখিত প্রিসেটগুলির মধ্যে একটি বেছে নেওয়ার জন্য বাটনগুলি:

   • লিনিয়ার প্রিসেটগুলো হলো: elastic , bounce , অথবা emphasized ।
   • কিউবিক বেজিয়ার প্রিসেট:

কাস্টম সময় নির্ধারণ করুন

টাইমিং ফাংশনগুলির জন্য কাস্টম মান সেট করতে, লাইনগুলির উপর থাকা কন্ট্রোল পয়েন্টগুলি ব্যবহার করুন:

• রৈখিক ফাংশনের ক্ষেত্রে, একটি কন্ট্রোল পয়েন্ট যোগ করতে লাইনের যেকোনো জায়গায় ক্লিক করুন এবং সেটিকে ড্র্যাগ করুন। পয়েন্টটি সরাতে ডাবল-ক্লিক করুন।

  

• কিউবিক বেজিয়ার ফাংশনগুলোর জন্য, কন্ট্রোল পয়েন্টগুলোর একটি ড্র্যাগ করুন।

  

যেকোনো পরিবর্তনের ফলে এডিটরের উপরের প্রিভিউতে একটি বলের অ্যানিমেশন চালু হয়।

(পরীক্ষামূলক) CSS পরিবর্তনগুলি কপি করুন

এই পরীক্ষাটি চালু থাকলে, স্টাইলস ট্যাব আপনার CSS পরিবর্তনগুলিকে সবুজ রঙে হাইলাইট করে।

একটিমাত্র CSS ডিক্লারেশনের পরিবর্তন কপি করতে, হাইলাইট করা ডিক্লারেশনটির উপর মাউস রাখুন এবং ক্লিক করুন। কপি বাটন।

একসাথে সমস্ত ডিক্লারেশন জুড়ে CSS-এর সকল পরিবর্তন কপি করতে, যেকোনো ডিক্লারেশনের উপর রাইট-ক্লিক করুন এবং ‘Copy all CSS changes’ নির্বাচন করুন।

এছাড়াও, আপনি Changes ট্যাবের মাধ্যমে আপনার করা পরিবর্তনগুলো ট্র্যাক করতে পারেন।