CSS দেখা ও পরিবর্তন করার সাথে সম্পর্কিত Chrome DevTools ফিচারের এই বিস্তারিত রেফারেন্সে নতুন ওয়ার্কফ্লো আবিষ্কার করুন।
প্রাথমিক বিষয়গুলি জানতে CSS দেখুন ও পরিবর্তন করুন বিকল্প দেখুন।
একটি এলিমেন্ট বেছে নিন
DevTools-এর এলিমেন্ট প্যানেল আপনাকে একবারে একটি এলিমেন্টের CSS দেখতে বা পরিবর্তন করতে দেয়।
স্ক্রিনশটে, DOM ট্রি-তে নীল রঙে হাইলাইট করা h1 এলিমেন্টটি হল বেছে নেওয়া এলিমেন্ট।
ডানদিকে, এলিমেন্টের স্টাইল স্টাইল ট্যাবে দেখানো হয়। বাঁদিকে, ভিউপোর্টে এলিমেন্টটি হাইলাইট করা হয়েছে, তবে শুধুমাত্র এই কারণে যে মাউসটি DOM
ট্রি-তে এটির উপর ঘোরাফেরা করছে।
টিউটোরিয়ালের জন্য কোনও এলিমেন্টের CSS দেখুন।
এলিমেন্ট বেছে নেওয়ার অনেক উপায় আছে:
- আপনার ভিউপোর্টে, এলিমেন্টে ডানদিকের বোতামে ক্লিক করে ইন্সপেক্ট করুন বিকল্প বেছে নিন।
- DevTools-এ, একটি এলিমেন্ট বেছে নিন
বিকল্পে ক্লিক করুন অথবা Command+Shift+C (Mac) বা
Control+Shift+C (Windows, Linux) প্রেস করুন এবং তারপরে ভিউপোর্টে
এলিমেন্টে ক্লিক করুন। - DevTools-এ, DOM ট্রি-তে এলিমেন্টে ক্লিক করুন।
- DevTools-এ, Console-এ
document.querySelector('p')-এর মতো কোয়েরি রান করুন, ফলাফলে ডানদিকের বোতামে ক্লিক করুন এবং তারপরে এলিমেন্ট প্যানেলে প্রকাশ করুন বিকল্প বেছে নিন।
CSS দেখুন
CSS নিয়ম দেখতে এবং CSS সংক্রান্ত সমস্যা ডায়াগনসিস করতে এলিমেন্ট > স্টাইল এবং কম্পিউটেড ট্যাব ব্যবহার করুন।
লিঙ্কের সাহায্যে নেভিগেট করা
স্টাইল ট্যাবে বিভিন্ন জায়গায় বিভিন্ন লিঙ্কের মাধ্যমে অন্যান্য জায়গা দেখানো হয়, যার মধ্যে এগুলি অন্তর্ভুক্ত থাকলেও তার মধ্যেই সীমিত নয়:
- CSS রুলের পাশে, স্টাইল শিট ও CSS সোর্সে। এই ধরনের লিঙ্ক সোর্স প্যানেল খোলে। স্টাইল শিট ছোট করা থাকলে, ছোট করা ফাইল পড়ার উপযোগী করুন দেখুন।
- এখান থেকে ইনহেরিট করা হয়েছে ... বিভাগে, পেরেন্ট এলিমেন্টে।
var()কলে, কাস্টম প্রপার্টি ঘোষণা করার জন্য।animationশর্টহ্যান্ড প্রপার্টিতে,@keyframes-এ।- ডকুমেন্টেশন টুলটিপে আরও জানুন লিঙ্ক।
- এবং আরো৷
এখানে কিছু হাইলাইট করা হল:
লিঙ্কগুলি আলাদা আলাদা স্টাইলে থাকতে পারে। কোনও কিছু লিঙ্ক কিনা তা নিশ্চিত না হলে, সেটি খুঁজে পেতে ক্লিক করে দেখুন।
CSS ডকুমেন্টেশন, স্পেসিফিটি ও কাস্টম প্রপার্টি ভ্যালু সহ টুলটিপ দেখুন
এলিমেন্ট > স্টাইল বিকল্পে গেলে, নির্দিষ্ট এলিমেন্টের উপর মাউস নিয়ে গেলে, টুলটিপ সহ সহায়ক তথ্য দেখানো হয়।
CSS ডকুমেন্টেশন দেখুন
সংক্ষিপ্ত CSS বিবরণ সহ টুলটিপ দেখতে, স্টাইল ট্যাবে প্রপার্টির নামের উপর মাউস নিয়ে যান।
এই প্রপার্টিতে MDN CSS রেফারেন্স-এ যেতে আরও জানুন বিকল্পে ক্লিক করুন।
টুলটিপ বন্ধ করতে, 
দেখাবেন না বিকল্পে টিকচিহ্ন দিন।
সেগুলি আবার চালু করতে, 
সেটিংস > পছন্দ > এলিমেন্ট > 
CSS ডকুমেন্টেশন টুলটিপ দেখুন বিকল্পে টিকচিহ্ন দিন।
ভিউ সিলেক্টর স্পেসিফিসিটি
স্টাইল ট্যাবে কোনও সিলেক্টরের উপর মাউস নিয়ে যান—এর মধ্যে নেস্টেড CSS নিয়মে পেরেন্ট সিলেক্টর, ইনহেরিট করা নেস্টেড নিয়ম এবং @nested-declarations নিয়ম অন্তর্ভুক্ত—যাতে এটির নির্দিষ্ট ওয়েট সহ টুলটিপ দেখতে পান এবং ভিউপোর্টে ম্যাচিং এলিমেন্ট হাইলাইট করতে পারেন।
কাস্টম প্রপার্টির ভ্যালু দেখা
টুলটিপে এর ভ্যালু দেখতে --custom-property-এর উপর মাউস নিয়ে যান।
ভুল, ওভাররাইড করা, ইনঅ্যাক্টিভ ও অন্যান্য CSS দেখা
স্টাইল ট্যাব বিভিন্ন ধরনের CSS সমস্যা শনাক্ত করে এবং বিভিন্ন উপায়ে সেগুলি হাইলাইট করে।
স্টাইল ট্যাবে CSS বোঝা দেখুন।
শুধুমাত্র সেই CSS দেখুন যা আসলে কোনও এলিমেন্টে প্রয়োগ করা হয়েছে
স্টাইল ট্যাবে কোনও এলিমেন্টের ক্ষেত্রে প্রযোজ্য সব নিয়ম দেখানো হয়, এর মধ্যে ওভাররাইড করা ঘোষণা অন্তর্ভুক্ত। ওভাররাইড করা ডিক্লারেশনে আপনার আগ্রহ না থাকলে, কম্পিউটেড ট্যাব ব্যবহার করে শুধু সেই CSS দেখুন যা আসলে কোনও এলিমেন্টে প্রয়োগ করা হচ্ছে।
- একটি এলিমেন্ট বেছে নিন।
- Elements প্যানেলের Computed ট্যাবে যান।
সব প্রপার্টি দেখতে সব দেখুন চেকবক্সে টিকচিহ্ন দিন।
কম্পিউটেড ট্যাবে CSS বোঝা দেখুন।
বর্ণানুক্রমিকভাবে CSS প্রপার্টি দেখুন
গণনা করা হয়েছে ট্যাব ব্যবহার করুন। শুধুমাত্র সেই CSS দেখুন যা আসলে কোনও এলিমেন্টে প্রয়োগ করা হয়েছে।
ইনহেরিট করা CSS প্রপার্টি দেখা
গণনা করা হয়েছে ট্যাবে সব দেখুন চেকবক্সটি চেক করুন। শুধুমাত্র সেই CSS দেখুন যা আসলে কোনও এলিমেন্টে প্রয়োগ করা হয়েছে দেখুন।
অথবা, স্টাইল ট্যাব স্ক্রল করে Inherited from <element_name> নামের বিভাগ খুঁজুন।
CSS at-রুল দেখুন
অ্যাট-রুল হল CSS স্টেটমেন্ট যা আপনাকে CSS আচরণ নিয়ন্ত্রণ করতে দেয়। এলিমেন্ট > স্টাইল নির্দিষ্ট বিভাগে নিম্নলিখিত অ্যাট-রুল দেখায়:
@property অ্যাট-রুল দেখুন
@property CSS at-রুল আপনাকে CSS কাস্টম প্রপার্টি স্পষ্টভাবে সংজ্ঞায়িত করতে এবং কোনও জাভাস্ক্রিপ্ট না চালিয়ে স্টাইল শিটে রেজিস্টার করতে দেয়।
স্টাইল ট্যাবে এই ধরনের প্রপার্টির নামের উপর মাউস নিয়ে যান, যাতে প্রপার্টির ভ্যালু, ডেসক্রিপ্টর এবং স্টাইল ট্যাবের নিচে গুটিয়ে নেওয়া যায় এমন @property বিভাগে এটির রেজিস্ট্রেশনের লিঙ্ক সহ একটি টুলটিপ দেখতে পান।
@property নিয়ম এডিট করতে, এটির নাম বা ভ্যালুর উপর ডবল-ক্লিক করুন।
@supportsটি at-রুল দেখুন
স্টাইল ট্যাবে @supports CSS অ্যাট-রুল দেখা যায়, যদি সেগুলি কোনও এলিমেন্টে প্রয়োগ করা হয়। যেমন, নিম্নলিখিত এলিমেন্টটি দেখুন:
আপনার ব্রাউজারে lab() ফাংশন কাজ করলে, এলিমেন্টটি সবুজ রঙের হয়, অন্যথায় এটি বেগুনি রঙের হয়।
@scopeটি at-রুল দেখুন
স্টাইল ট্যাবে আপনি CSS @scope at-রুল দেখতে পাবেন, যদি সেগুলি কোনও এলিমেন্টে প্রয়োগ করা হয়।
নতুন @scope অ্যাট-রুল CSS Cascading and Inheritance Level 6 specification-এর অংশ। এইসব নিয়ম আপনাকে CSS স্টাইল স্কোপ করতে দেয়, অন্যভাবে বলতে গেলে, নির্দিষ্ট এলিমেন্টে স্পষ্টভাবে স্টাইল প্রয়োগ করতে দেয়।
নিম্নলিখিত প্রিভিউতে @scope নিয়ম দেখুন:
- প্রিভিউতে কার্ডে দেখানো টেক্সট ভাল করে দেখুন।
- স্টাইল ট্যাবে
@scopeনিয়মটি খুঁজে দেখুন।
এই উদাহরণে, @scope নিয়মটি card ক্লাস সহ এলিমেন্টের মধ্যে থাকা সমস্ত <p> এলিমেন্টের জন্য গ্লোবাল CSS background-color ডিক্লারেশনকে ওভাররাইড করে।
@scope নিয়ম এডিট করতে, সেটিতে ডবল-ক্লিক করুন।
@font-palette-values অ্যাট-রুল দেখুন
@font-palette-values CSS at-রুল আপনাকে font-palette প্রপার্টির ডিফল্ট ভ্যালু কাস্টমাইজ করতে দেয়। এলিমেন্ট > স্টাইল-এ একটি নির্দিষ্ট বিভাগে এই অ্যাট-রুল দেখানো হয়।
পরবর্তী প্রিভিউতে @font-palette-values বিভাগ দেখুন:
- প্রিভিউতে টেক্সটের দ্বিতীয় লাইনটি ভালোভাবে দেখুন।
- স্টাইল বিকল্পে গিয়ে
@font-palette-valuesবিভাগটি খুঁজে নিন।
এই উদাহরণে, --New ফন্ট প্যালেটের ভ্যালু, রঙিন ফন্টের ডিফল্ট ভ্যালুকে ওভাররাইড করে।
আপনার কাস্টম ভ্যালু এডিট করতে, সেটিতে ডবল-ক্লিক করুন।
@position-try অ্যাট-রুল দেখুন
position-try-options প্রপার্টির সাথে @position-try CSS নিয়ম আপনাকে এলিমেন্টের জন্য বিকল্প অ্যাঙ্কর পজিশন নির্ধারণ করতে দেয়। আরও জানতে, CSS অ্যাঙ্কর পজিশনিং API-এর ভূমিকা দেখুন।
এলিমেন্ট > স্টাইল নিম্নলিখিত বিষয়গুলি সমাধান ও লিঙ্ক করে:
position-try-optionsপ্রপার্টির ভ্যালু একটি নির্দিষ্ট@position-try --nameবিভাগে।popovertargetঅ্যাট্রিবিউট সহ সংশ্লিষ্ট এলিমেন্টের জন্যposition-anchorপ্রপার্টির ভ্যালু ওanchor()আর্গুমেন্ট।
পরবর্তী প্রিভিউতে position-try-options ভ্যালু ও @position-try বিভাগগুলি দেখুন:
popover-এর সাথে অ্যাঙ্কর ব্যবহার করে ডেমো- প্রিভিউতে, সাবমেনু খুলুন, অর্থাৎ আপনার অ্যাকাউন্ট তারপর স্টোরফ্রন্ট বিকল্পে ক্লিক করুন।
- প্রিভিউতে
id="submenu"সহ এলিমেন্ট পরীক্ষা করুন। - স্টাইল বিকল্পে,
position-try-optionsপ্রপার্টি খুঁজে নিয়ে সেটির--bottomভ্যালুতে ক্লিক করুন। স্টাইল ট্যাব আপনাকে সংশ্লিষ্ট@position-tryবিভাগে নিয়ে যায়। position-anchorভ্যালু লিঙ্ক বা একইanchor()আর্গুমেন্টে ক্লিক করুন। এলিমেন্ট প্যানেল সংশ্লিষ্টpopovertargetঅ্যাট্রিবিউট সহ এলিমেন্ট বেছে নেয় এবং স্টাইল ট্যাব এলিমেন্টের CSS দেখায়।
মান এডিট করতে, সেটিতে ডবল ক্লিক করুন।
কোনও এলিমেন্টের বক্স মডেল দেখুন
কোনও এলিমেন্টের বক্স মডেল দেখতে, স্টাইল ট্যাবে যান এবং অ্যাকশন বারে 
সাইডবার দেখুন বোতামে ক্লিক করুন।
কোনও ভ্যালু পরিবর্তন করতে, সেটির উপরে ডবল-ক্লিক করুন।
কোনও এলিমেন্টের CSS সার্চ ও ফিল্টার করুন
নির্দিষ্ট CSS সিলেক্টর (নেস্টেড নিয়মে পেরেন্ট সিলেক্টর সহ), প্রপার্টি বা ভ্যালু সার্চ করতে স্টাইল এবং কম্পিউটেড ট্যাবে ফিল্টার বক্স ব্যবহার করুন।
কম্পিউটেড ট্যাবে ইনহেরিট করা প্রপার্টিও সার্চ করতে, সব দেখুন চেকবক্সে টিকচিহ্ন দিন।
গণনা করা হয়েছে ট্যাবে নেভিগেট করতে, গ্রুপ চেকবক্সে টিকচিহ্ন দিয়ে ফিল্টার করা প্রপার্টিগুলি আড়াল করা যায় এমন বিভাগে গ্রুপ করুন।
একটি ফোকাস পৃষ্ঠা ইমুলেট করুন
আপনি পেজ থেকে DevTools-এ ফোকাস পরিবর্তন করলে, ফোকাসের কারণে ট্রিগার হলে কিছু ওভারলে এলিমেন্ট অটোমেটিক লুকিয়ে যায়। যেমন, ড্রপ-ডাউন তালিকা, মেনু বা ডেট পিকার। ফোকাস করা পৃষ্ঠা এমুলেট করুন বিকল্প আপনাকে এমন এলিমেন্ট ডিবাগ করতে দেয় যেন এটি ফোকাসে আছে।
এই ডেমো পৃষ্ঠায় ফোকাস করা পৃষ্ঠা ইমুলেট করে দেখুন:
- ইনপুট এলিমেন্টে ফোকাস করুন। এর নিচে আরেকটি এলিমেন্ট দেখা যায়।
- DevTools খুলুন। এখন পৃষ্ঠাটির পরিবর্তে DevTools উইন্ডো ফোকাসে আছে, তাই এলিমেন্টটি আবার অদৃশ্য হয়ে যায়।
- এলিমেন্ট > স্টাইল বিকল্পে গিয়ে :hov বিকল্পে ক্লিক করুন, ফোকাস করা পৃষ্ঠার অনুকরণ করুন বিকল্পে টিকচিহ্ন দিন এবং ইনপুট এলিমেন্ট বেছে নেওয়া হয়েছে কিনা তা নিশ্চিত করুন। আপনি এখন এর অধীনে থাকা এলিমেন্টটি পরীক্ষা করতে পারবেন।
এছাড়াও, আপনি রেন্ডারিং প্যানেলে একই বিকল্প খুঁজে পাবেন।
কোনও এলিমেন্ট ফ্রিজ করার আরও উপায় জানতে, স্ক্রিন ফ্রিজ করুন এবং অদৃশ্য হয়ে যাওয়া এলিমেন্ট দেখুন।
সিউডো-ক্লাস টগল করুন
সিউডো-ক্লাস টগল করতে:
- একটি এলিমেন্ট বেছে নিন।
- এলিমেন্ট প্যানেলে, স্টাইল ট্যাবে যান।
- :hov বিকল্পে ক্লিক করুন।
- আপনি যে ছদ্ম-শ্রেণী চালু করতে চান সেটি চেক করুন।
এই উদাহরণে, আপনি দেখতে পাবেন যে DevTools এলিমেন্টে background-color ডিক্লারেশন প্রয়োগ করে, যদিও এলিমেন্টের উপর আসলে হোভার করা হয়নি।
স্টাইল ট্যাবে সব এলিমেন্টের জন্য নিম্নলিখিত ছদ্ম-ক্লাস দেখানো হয়:
এছাড়াও, কিছু এলিমেন্টের নিজস্ব সিউডো-ক্লাস থাকতে পারে। আপনি এই ধরনের কোনও এলিমেন্ট বেছে নিলে, স্টাইল ট্যাবে নির্দিষ্ট কোনও এলিমেন্টের স্টেটে জোর দিন বিভাগ দেখানো হয়। আপনি এটি বড় করে এলিমেন্টের জন্য নির্দিষ্ট ছদ্ম-ক্লাস চালু করতে পারবেন।
ইন্টার্যাক্টিভ টিউটোরিয়ালের জন্য ক্লাসে ছদ্ম-অবস্থা যোগ করুন দেখুন।
ইনহেরিট করা হাইলাইট সিউডো-এলিমেন্ট দেখুন
সিউডো-এলিমেন্ট আপনাকে এলিমেন্টের নির্দিষ্ট অংশ স্টাইল করতে দেয়। হাইলাইট করা সিউডো-এলিমেন্ট হল ডকুমেন্টের সেই অংশগুলি যেগুলির স্ট্যাটাস "বেছে নেওয়া হয়েছে" এবং ব্যবহারকারীকে এই স্ট্যাটাস বোঝানোর জন্য সেগুলি "হাইলাইট করা" হিসেবে স্টাইল করা হয়। যেমন, এই ধরনের ছদ্ম-এলিমেন্ট হল ::selection, ::spelling-error, ::grammar-error এবং ::highlight।
স্পেসিফিকেশন অনুযায়ী, একাধিক স্টাইল একে অপরের সাথে সাংঘর্ষিক হলে, ক্যাসকেড নির্ধারণ করে যে কোন স্টাইলটি প্রয়োগ করা হবে।
নিয়মের ইনহেরিটেন্স ও অগ্রাধিকার আরও ভালোভাবে বুঝতে, আপনি ইনহেরিট করা হাইলাইট সিউডো-এলিমেন্ট দেখতে পারেন:
-
আমার অভিভাবকের হাইলাইট ছদ্ম-উপাদান থেকে আমি স্টাইল উত্তরাধিকার সূত্রে পেয়েছি। আমাকে বেছে নিন!
উপরের টেক্সটের একটি অংশ বেছে নিন।
স্টাইল ট্যাবে, স্ক্রল করে
Inherited from ::selection pseudo of...বিভাগটি খুঁজে নিন।
ক্যাসকেড লেয়ার দেখুন
ক্যাসকেড লেয়ার আপনার CSS ফাইলের আরও স্পষ্ট কন্ট্রোল চালু করে যাতে স্টাইল-স্পেসিফিসিটি সংক্রান্ত দ্বন্দ্ব প্রতিরোধ করা যায়। এটি বড় কোডবেস, ডিজাইন সিস্টেম এবং অ্যাপ্লিকেশনে থার্ড-পার্টি স্টাইল ম্যানেজ করার জন্য উপযোগী।
ক্যাসকেড লেয়ার দেখতে, পরবর্তী এলিমেন্ট ইন্সপেক্ট করুন এবং এলিমেন্ট > স্টাইল খুলুন।
স্টাইল ট্যাবে, ৩টি ক্যাসকেড লেয়ার এবং তাদের স্টাইল দেখুন: page, component এবং base।
লেয়ারের ক্রম দেখতে, লেয়ারের নাম বা 
CSS লেয়ার ভিউ টগল করুন বোতামে ক্লিক করুন।
page লেয়ারের স্পেসিফিসিটি সবচেয়ে বেশি, তাই এলিমেন্টের ব্যাকগ্রাউন্ড সবুজ।
প্রিন্ট মোডে কোনও পৃষ্ঠা দেখা
প্রিন্ট মোডে কোনও পৃষ্ঠা দেখতে:
- কমান্ড মেনু খুলুন।
- টাইপ করা শুরু করুন
RenderingএবংShow Renderingবেছে নিন। - CSS মিডিয়া এমুলেট করুন ড্রপ-ডাউন থেকে প্রিন্ট করুন বিকল্প বেছে নিন।
কভারেজ ট্যাবের মাধ্যমে ব্যবহৃত ও অব্যবহৃত CSS দেখুন
কভারেজ ট্যাব আপনাকে দেখায় যে কোনও পৃষ্ঠা আসলে কোন CSS ব্যবহার করে।
- কমান্ড মেনু খুলতে DevTools ফোকাসে থাকাকালীন Command+Shift+P (Mac) বা Control+Shift+P (Windows, Linux, ChromeOS) প্রেস করুন।
coverageটাইপ করা শুরু করুন।
কভারেজ দেখুন বিকল্প বেছে নিন। কভারেজ ট্যাব দেখা যাবে।
আবার লোড করুন বিকল্পে ক্লিক করুন।
পৃষ্ঠাটি আবার লোড হয় এবং কভারেজ ট্যাব, ব্রাউজার লোড করা প্রতিটি ফাইল থেকে কতখানি CSS (এবং JavaScript) ব্যবহার করা হয়েছে
তার একটি ওভারভিউ প্রদান করে।
সবুজ রঙ ব্যবহার করা CSS বোঝায়। লাল রঙ অব্যবহৃত CSS বোঝায়।
উপরের প্রিভিউতে কোন CSS ব্যবহার করা হয়েছে তা লাইন-বাই-লাইন দেখতে CSS ফাইলে ক্লিক করুন।
স্ক্রিনশটে,
devsite-google-blue.css-এর ৫৫ থেকে ৫৭ এবং ৬৫ থেকে ৬৭ নম্বর লাইন ব্যবহার করা হয়নি, তবে ৫৯ থেকে ৬৩ নম্বর লাইন ব্যবহার করা হয়েছে।
জোর করে প্রিন্ট প্রিভিউ মোড
প্রিন্ট প্রিভিউ মোডে DevTools-এ জোর করে প্রবেশ করুন দেখুন।
CSS কপি করা
স্টাইল ট্যাবে থাকা একটি ড্রপ-ডাউন মেনু থেকে, আপনি আলাদা CSS নিয়ম, ঘোষণা, প্রপার্টি, ভ্যালু কপি করতে পারবেন
এছাড়াও, আপনি জাভাস্ক্রিপ্ট সিনট্যাক্সে CSS প্রপার্টি কপি করতে পারবেন। আপনি CSS-in-JS লাইব্রেরি ব্যবহার করলে এই বিকল্পটি সুবিধাজনক।
CSS কপি করতে:
- একটি এলিমেন্ট বেছে নিন।
- এলিমেন্ট > স্টাইল ট্যাবে, CSS প্রপার্টির উপর মাউস রেখে ডানদিকের বোতামে ক্লিক করুন।
ড্রপ-ডাউন মেনু থেকে নিম্নলিখিত বিকল্পগুলির মধ্যে একটি বেছে নিন:
- ঘোষণাপত্র কপি করুন। 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 সিনট্যাক্সে প্রপার্টি ও তার ভ্যালু কপি করে:
CSS পরিবর্তন করুন
এলিমেন্ট > স্টাইল-এ আপনি যেসব উপায়ে CSS পরিবর্তন করতে পারবেন, এই বিভাগে সেগুলি তালিকাভুক্ত করা আছে।
এছাড়াও, আপনি এগুলি করতে পারেন:
- পৃষ্ঠা লোড হওয়ার সময় CSS ওভাররাইড করুন।
- একটি ওয়ার্কস্পেসে আপনার লোকাল সোর্সে পরিবর্তিত CSS সেভ করুন।
কোড সম্পূর্ণ করার মাধ্যমে CSS পরিবর্তন করুন
CSS প্রপার্টির আরও জটিল কম্বিনেশন, যেমন গ্রেডিয়েন্ট বা বক্স শ্যাডো নিয়ে এক্সপেরিমেন্ট করতে, সেগুলির সঠিক সিনট্যাক্স মনে না রেখে অথবা একাধিক সম্পর্কিত প্রপার্টির উপর নির্ভর করে দ্রুত গ্রিড ও ফ্লেক্স লেআউট তৈরি করতে, আপনি CSS প্রপার্টি টাইপ করা শুরু করতে এবং কোড সম্পূর্ণ করার সুবিধা ব্যবহার করতে পারেন।
কোনও এলিমেন্টে CSS ডিক্লারেশন যোগ করা
যেহেতু ঘোষণাগুলির ক্রম কোনও এলিমেন্টকে কীভাবে স্টাইল করা হবে তা প্রভাবিত করে, তাই আপনি বিভিন্ন উপায়ে ঘোষণা যোগ করতে পারেন:
- ইনলাইন ঘোষণা যোগ করুন। এলিমেন্টের HTML-এ
styleঅ্যাট্রিবিউট যোগ করার সমতুল্য। - স্টাইল নিয়মে একটি ঘোষণা যোগ করুন।
আপনার কোন ওয়ার্কফ্লো ব্যবহার করা উচিত? বেশিরভাগ ক্ষেত্রে, আপনি সম্ভবত ইনলাইন ঘোষণা ওয়ার্কফ্লো ব্যবহার করতে চাইবেন। ইনলাইন ডিক্লারেশনের স্পেসিফিসিটি এক্সটার্নাল ডিক্লারেশনের চেয়ে বেশি, তাই ইনলাইন ওয়ার্কফ্লো নিশ্চিত করে যে আপনি যেমনটি আশা করেন, এলিমেন্টে পরিবর্তনগুলি ঠিক তেমনভাবেই কার্যকর হবে। নির্দিষ্টতা সম্পর্কে আরও জানতে সিলেক্টরের ধরন দেখুন।
আপনি যদি কোনও এলিমেন্টের স্টাইল ডিবাগ করেন এবং কোনও ডিক্লারেশন বিভিন্ন জায়গায় সংজ্ঞায়িত করা হলে কী হয় তা বিশেষভাবে পরীক্ষা করতে চান, তাহলে অন্য ওয়ার্কফ্লো ব্যবহার করুন।
ইনলাইন ঘোষণা যোগ করুন
ইনলাইন ঘোষণা যোগ করতে:
- একটি এলিমেন্ট বেছে নিন।
- স্টাইল ট্যাবে, element.style বিভাগের ব্র্যাকেটের মধ্যে ক্লিক করুন। কার্সর ফোকাস করে, আপনাকে টেক্সট লিখতে দেয়।
- প্রপার্টির নাম লিখে Enter প্রেস করুন।
সেই প্রপার্টির জন্য সঠিক মান লিখুন এবং Enter কী টিপুন। DOM ট্রি-তে, আপনি দেখতে পাবেন যে এলিমেন্টে একটি
styleঅ্যাট্রিবিউট যোগ করা হয়েছে।
স্ক্রিনশটে, বেছে নেওয়া এলিমেন্টে
margin-topএবংbackground-colorপ্রপার্টি প্রয়োগ করা হয়েছে। DOM ট্রি-তে আপনি এলিমেন্টেরstyleঅ্যাট্রিবিউটে প্রতিফলিত ঘোষণা দেখতে পাবেন।
স্টাইল নিয়মে ডিক্লারেশন যোগ করুন
আগে থেকে থাকা স্টাইল নিয়মে ডিক্লারেশন যোগ করতে:
- একটি এলিমেন্ট বেছে নিন।
- স্টাইল ট্যাবে, আপনি যে স্টাইল নিয়মে ডিক্লারেশন যোগ করতে চান, সেটির ব্র্যাকেটের মধ্যে ক্লিক করুন। কার্সর ফোকাস করে, যা আপনাকে টেক্সট লিখতে দেয়।
- প্রপার্টির নাম লিখে Enter টিপুন।
- সেই প্রপার্টির জন্য সঠিক ভ্যালু লিখে Enter প্রেস করুন।
স্ক্রিনশটে, স্টাইল সংক্রান্ত নিয়ম নতুন border-bottom-style:groove ডিক্লারেশন পায়।
ঘোষণার নাম বা ভ্যালু পরিবর্তন করা
কোনও ঘোষণা পরিবর্তন করতে, সেটির নাম বা ভ্যালুতে ডবল-ক্লিক করুন। 0.1, 1, 10 বা 100 ইউনিট করে কোনও মান দ্রুত বাড়ানো বা কমানোর শর্টকাটের জন্য কীবোর্ড শর্টকাট ব্যবহার করে গণনাযোগ্য মান পরিবর্তন করুন দেখুন।
কীবোর্ড শর্টকাট ব্যবহার করে এনুমারেবল ভ্যালু পরিবর্তন করা
কোনও ডিক্লারেশনের গণনাযোগ্য ভ্যালু এডিট করার সময়, যেমন, font-size, আপনি একটি নির্দিষ্ট পরিমাণ ভ্যালু বাড়াতে নিম্নলিখিত কীবোর্ড শর্টকাট ব্যবহার করতে পারবেন:
- ০.১ করে বাড়াতে Option+Up (Mac) বা Alt+Up (Windows, Linux) প্রেস করুন।
- মান ১ করে বা বর্তমান মান -১ থেকে ১-এর মধ্যে থাকলে ০.১ করে পরিবর্তন করতে উপরের দিকে তীরচিহ্ন ব্যবহার করুন।
- ১০ করে বাড়াতে Shift+Up প্রেস করুন।
- ভ্যালু ১০০ করে বাড়াতে Shift+Command+Up (Mac) অথবা Control+Shift+Page Up (Windows, Linux) প্রেস করুন।
কমানোর ক্ষেত্রেও কাজ করে। আগে উল্লেখ করা Up-এর প্রতিটি ইনস্ট্যান্স Down দিয়ে পরিবর্তন করুন।
দৈর্ঘ্যের ভ্যালু পরিবর্তন করা
আপনি পয়েন্টার ব্যবহার করে দৈর্ঘ্য সহ যেকোনও প্রপার্টি পরিবর্তন করতে পারবেন, যেমন প্রস্থ, উচ্চতা, প্যাডিং, মার্জিন বা বর্ডার।
দৈর্ঘ্যের একক পরিবর্তন করতে:
- ইউনিটের নামের উপর মাউস নিয়ে যান এবং লক্ষ্য করুন যে এটি আন্ডারলাইন করা আছে।
ড্রপ-ডাউন থেকে ইউনিট বেছে নিতে ইউনিটের নামে ক্লিক করুন।
দৈর্ঘ্যের ভ্যালু পরিবর্তন করতে:
- ইউনিট ভ্যালুর উপর মাউস নিয়ে যান এবং লক্ষ্য করুন যে আপনার পয়েন্টারটি অনুভূমিক ডবল-হেডেড তীরচিহ্নে পরিবর্তিত হয়েছে।
ভ্যালু বাড়াতে বা কমাতে অনুভূমিকভাবে টানুন।
ভ্যালু ১০-এ অ্যাডজাস্ট করতে, টেনে আনার সময় Shift হোল্ড করুন।
কোনও এলিমেন্টে ক্লাস যোগ করুন
কোনও এলিমেন্টে ক্লাস যোগ করতে:
- DOM ট্রি-তে এলিমেন্ট বেছে নিন।
- .cls-এ ক্লিক করুন।
- নতুন ক্লাস যোগ করুন বক্সে ক্লাসের নাম লিখুন।
- Enter কী প্রেস করুন।
লাইট ও ডার্ক থিমের পছন্দ এমুলেট করুন এবং অটোমেটিক ডার্ক মোড চালু করুন
অটোমেটিক ডার্ক মোড টগল করতে অথবা ব্যবহারকারীর পছন্দ অনুযায়ী লাইট বা ডার্ক থিম এমুলেট করতে:
- এলিমেন্ট > স্টাইল ট্যাবে,
সাধারণ রেন্ডারিং ইমুলেশন টগল করুন বিকল্পে ক্লিক করুন।
ড্রপ-ডাউন তালিকা থেকে নিম্নলিখিত বিকল্পগুলির মধ্যে একটি বেছে নিন:
- prefers-color-scheme: light. ব্যবহারকারী লাইট থিম পছন্দ করেন তা বোঝায়।
- prefers-color-scheme: dark. ব্যবহারকারী ডার্ক থিম পছন্দ করেন তা বোঝায়।
- অটোমেটিক ডার্ক মোড। আপনি এটি প্রয়োগ না করলেও, আপনার পৃষ্ঠা ডার্ক মোডে দেখায়। এছাড়াও,
prefers-color-schemeথেকেdarkঅটোমেটিক সেট করে।
এই ড্রপ-ডাউন হল রেন্ডারিং ট্যাবের CSS মিডিয়া ফিচার prefers-color-scheme এমুলেট করুন এবং অটোমেটিক ডার্ক মোড চালু করুন বিকল্পের শর্টকাট।
ক্লাস টগল করুন
কোনও এলিমেন্টে ক্লাস চালু বা বন্ধ করতে:
- DOM ট্রি-তে এলিমেন্ট বেছে নিন।
- এলিমেন্ট ক্লাস বিভাগ খুলুন। কোনও এলিমেন্টে ক্লাস যোগ করুন দেখুন। নতুন ক্লাস যোগ করুন বক্সের নিচে সেইসব ক্লাস দেখানো হয় যেগুলি এই এলিমেন্টে প্রয়োগ করা হচ্ছে।
- আপনি যে ক্লাস চালু বা বন্ধ করতে চান সেটির পাশে থাকা চেকবক্স টগল করুন।
স্টাইল সংক্রান্ত নিয়ম যোগ করুন
নতুন স্টাইল সংক্রান্ত নিয়ম যোগ করতে:
- একটি এলিমেন্ট বেছে নিন।
- নতুন স্টাইল সংক্রান্ত নিয়ম
বিকল্পে ক্লিক করুন। DevTools element.style নিয়মের নিচে
একটি নতুন নিয়ম যোগ করে।
স্ক্রিনশটে, নতুন স্টাইল রুল বিকল্পে ক্লিক করার পরে DevTools h1.devsite-page-title স্টাইল রুল যোগ করে।
কোন স্টাইল শিটে নিয়ম যোগ করতে চান তা বেছে নিন
নতুন স্টাইল রুল যোগ করার সময়, কোন স্টাইল শিটে স্টাইল রুল যোগ করতে হবে তা বেছে নিতে নতুন স্টাইল রুল
বিকল্পে ক্লিক করে ধরে রাখুন।
ঘোষণাপত্র টগল করুন
একটি ঘোষণা চালু বা বন্ধ করতে:
- একটি এলিমেন্ট বেছে নিন।
- স্টাইল ট্যাবে, ডিক্লারেশন সংজ্ঞায়িত করে এমন রুলের উপর মাউস নিয়ে যান। প্রতিটি ঘোষণার পাশে চেকবক্স দেখানো হয়।
- ঘোষণাপত্রের পাশে থাকা চেকবক্সে টিকচিহ্ন দিন বা সেটি সরান। আপনি কোনও ডিক্লারেশন মুছে দিলে, DevTools সেটি কেটে দেয় যাতে বোঝা যায় যে সেটি আর অ্যাক্টিভ নেই।
স্ক্রিনশটে, বর্তমানে বেছে নেওয়া এলিমেন্টের জন্য color প্রপার্টি টগল করে বন্ধ করা হয়েছে।
অ্যানিমেশন চলাকালীন ::view-transition ছদ্ম-এলিমেন্ট এডিট করুন
অ্যানিমেশন-এ সংশ্লিষ্ট বিভাগ দেখুন।
আরও তথ্যের জন্য, View Transitions API-এর মাধ্যমে মসৃণ ও সহজ ট্রানজিশন দেখুন।
গ্রিড এডিটরের সাহায্যে গ্রিড আইটেম ও তার কন্টেন্ট অ্যালাইন করা
CSS গ্রিড পরীক্ষা করুন বিকল্পে গিয়ে সংশ্লিষ্ট বিভাগ দেখুন।
'রঙ চয়নকারী' ব্যবহার করে রঙ পরিবর্তন করা
কালার পিকারের সাহায্যে HD এবং নন-HD রঙ পরীক্ষা ও ডিবাগ করুন দেখুন।
অ্যাঙ্গেল ক্লকের সাহায্যে অ্যাঙ্গেল ভ্যালু পরিবর্তন করুন
<angle>-এর CSS প্রপার্টি ভ্যালু পরিবর্তন করার জন্য Angle Clock একটি GUI প্রদান করে।
অ্যাঙ্গেল ক্লক খুলতে:
- অ্যাঙ্গেল ডিক্লারেশন সহ একটি এলিমেন্ট বেছে নিন।
স্টাইল ট্যাবে, আপনি যে
transformবাbackgroundডিক্লারেশন পরিবর্তন করতে চান সেটি খুঁজুন। অ্যাঙ্গেল ভ্যালুর পাশে অ্যাঙ্গেল প্রিভিউ বক্সে ক্লিক করুন।
-5degএবং0.25turn-এর বাঁদিকে ছোট ঘড়িগুলি হল অ্যাঙ্গেল প্রিভিউ।অ্যাঙ্গেল ক্লক খুলতে প্রিভিউতে ক্লিক করুন।
অ্যাঙ্গেল ক্লক বৃত্তে ক্লিক করে অ্যাঙ্গেলের ভ্যালু পরিবর্তন করুন অথবা মাউস স্ক্রল করে অ্যাঙ্গেলের ভ্যালু ১ করে বাড়ান / কমান।
অ্যাঙ্গেল ভ্যালু পরিবর্তন করার জন্য আরও কীবোর্ড শর্টকাট আছে। স্টাইল প্যানে কীবোর্ড শর্টকাট থেকে আরও জানুন।
Shadow Editor-এর সাহায্যে বক্স ও টেক্সট শ্যাডো পরিবর্তন করা
শ্যাডো এডিটর text-shadow ও box-shadow CSS ডিক্লারেশন পরিবর্তন করার জন্য GUI প্রদান করে।
শ্যাডো এডিটর-এর সাহায্যে শ্যাডো পরিবর্তন করতে:
শ্যাডো ডিক্লারেশন সহ একটি এলিমেন্ট বেছে নিন। যেমন, পরবর্তী এলিমেন্ট বেছে নিন।
স্টাইল ট্যাবে,
text-shadowবাbox-shadowডিক্লারেশনের পাশে একটি শ্যাডো
আইকন খুঁজুন।
ছায়া এডিটর খুলতে, 'ছায়া' আইকনে ক্লিক করুন।
শ্যাডো প্রপার্টি পরিবর্তন করুন:
- টাইপ (শুধুমাত্র
box-shadow-এর জন্য)। আউটসেট বা ইনসেট বেছে নিন। - X ও Y অফসেট। নীল বিন্দুটি টেনে আনুন বা ভ্যালু নির্দিষ্ট করুন।
- অস্পষ্ট করুন। স্লাইডার টেনে আনুন বা একটি মান উল্লেখ করুন।
- স্প্রেড (শুধুমাত্র
box-shadow-এর জন্য)। স্লাইডার টেনে আনুন বা কোনও মান নির্দিষ্ট করুন।
- টাইপ (শুধুমাত্র
এলিমেন্টে প্রয়োগ করা পরিবর্তনগুলি লক্ষ্য করুন।
ইজিং এডিটরের সাহায্যে অ্যানিমেশন ও ট্রানজিশনের সময় এডিট করুন
ইজিং এডিটর transition-timing-function এবং animation-timing-function-এর ভ্যালু পরিবর্তন করার জন্য একটি GUI প্রদান করে।
ইজিং এডিটর খুলতে:
- টাইমিং ফাংশন ঘোষণা সহ একটি এলিমেন্ট বেছে নিন, যেমন এই পৃষ্ঠায়
<body>এলিমেন্ট। - স্টাইল ট্যাবে,
transition-timing-function,animation-timing-functionডিক্লারেশন বাtransitionশর্টহ্যান্ড প্রপার্টির পাশে বেগুনি রঙের
আইকনটি খুঁজুন।
- ইজিং এডিটর খুলতে আইকনে ক্লিক করুন:
টাইমিং অ্যাডজাস্ট করতে প্রিসেট ব্যবহার করুন
এক ক্লিকে টাইমিং অ্যাডজাস্ট করতে, ইজিং এডিটর-এ প্রিসেট ব্যবহার করুন:
- ইজিং এডিটর-এ কীওয়ার্ড ভ্যালু সেট করতে, পিকার বোতামগুলির মধ্যে একটিতে ক্লিক করুন:
- লিনিয়ার
- ইজ-ইন-আউট
- ইজ-ইন
- ইজ-আউট
- লিনিয়ার
প্রিসেট সুইচার-এ, নিম্নলিখিত প্রিসেটগুলির মধ্যে একটি বেছে নিতে
বা 
বোতামে ক্লিক করুন:- লিনিয়ার প্রিসেট:
elastic,bounceবাemphasized. - Cubic Bezier প্রিসেট:
- লিনিয়ার প্রিসেট:
| টাইমিং কীওয়ার্ড | প্রিসেট | কিউবিক বেজিয়ের |
|---|---|---|
| ইজ-ইন-আউট | ইন আউট, সাইন | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
| ইন আউট, দ্বিঘাত | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
| ইন আউট, কিউবিক | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
| দ্রুত আউট, ধীরে ইন | cubic-bezier(0.4, 0, 0.2, 1) |
|
| ইন আউট, ব্যাক | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
| ইজ-ইন | In, Sine | cubic-bezier(0.47, 0, 0.75, 0.72) |
| ইন, কোয়াড্রেটিক | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
| In, Cubic | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
| ইন, ব্যাক | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
| ফাস্ট আউট, লিনিয়ার ইন | cubic-bezier(0.4, 0, 1, 1) |
|
| ইজ-আউট | আউট, সাইন | cubic-bezier(0.39, 0.58, 0.57, 1) |
| আউট, দ্বিঘাত | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
| আউট, কিউবিক | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
| লিনিয়ার আউট, স্লো ইন | cubic-bezier(0, 0, 0.2, 1) |
|
| আউট, ব্যাক | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
কাস্টম সময় কনফিগার করুন
টাইমিং ফাংশনের জন্য কাস্টম ভ্যালু সেট করতে, লাইনের কন্ট্রোল পয়েন্ট ব্যবহার করুন:
লিনিয়ার ফাংশনের জন্য, কন্ট্রোল পয়েন্ট যোগ করতে লাইনের যেকোনও জায়গায় ক্লিক করুন এবং এটি টেনে আনুন। পয়েন্ট সরাতে ডবল-ক্লিক করুন।
কিউবিক বেজিয়ার ফাংশনের জন্য, কন্ট্রোল পয়েন্টগুলির মধ্যে একটি টেনে আনুন।
কোনও পরিবর্তন করা হলে, এডিটরের উপরে প্রিভিউ বিকল্পে বল অ্যানিমেশন ট্রিগার হয়।
(পরীক্ষামূলক) CSS পরিবর্তন কপি করা
এই এক্সপেরিমেন্ট চালু করা থাকলে, স্টাইল ট্যাবে আপনার CSS পরিবর্তনগুলি সবুজ রঙে হাইলাইট করা হয়।
সিঙ্গেল CSS ডিক্লারেশন পরিবর্তন কপি করতে, হাইলাইট করা ডিক্লারেশনের উপর মাউস নিয়ে যান এবং 
কপি করুন বোতামে ক্লিক করুন।
একসাথে সব ঘোষণা জুড়ে সমস্ত CSS পরিবর্তন কপি করতে, যেকোনও ঘোষণায় ডানদিকের বোতামে ক্লিক করুন এবং সব CSS পরিবর্তন কপি করুন বিকল্প বেছে নিন।
এছাড়াও, পরিবর্তন ট্যাবের মাধ্যমে আপনার করা পরিবর্তন ট্র্যাক করতে পারবেন।