CSS প্লেগ্রাউন্ড

CSS Playground কীভাবে কাজ করে

টুলটি কী করে

CSS Playground আপনাকে দুটি এডিটর — HTML এবং CSS — এবং একটি স্যান্ডবক্সড iframe প্রিভিউ দেয়, যা আপনি টাইপ করার সাথে সাথে আপডেট হয়। এটি দিয়ে কম্পোনেন্ট প্রোটোটাইপ করুন, সিলেক্টর টেস্ট করুন, ফলব্যাক স্টাইল যাচাই করুন, বা বাগ রিপোর্টের জন্য মিনিমাল রিপ্রো তৈরি করুন। 'Reset styles' টগলটি একটি ছোট CSS রিসেট (box-sizing, যুক্তিসঙ্গত body ডিফল্ট) যোগ করে, যাতে আপনার CSS ব্রাউজারের ডিফল্টের সাথে লড়াই না করে।

ডেভেলপারদের সাধারণ ব্যবহারক্ষেত্র

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

ডেটা ফরম্যাট, টাইপ বা ভ্যারিয়েন্ট

HTML এডিটর যেকোনো body কনটেন্ট গ্রহণ করে। CSS এডিটর যেকোনো আধুনিক CSS গ্রহণ করে — custom properties, nesting, @container, @layer, ইত্যাদি। আউটপুট হলো meta viewport ট্যাগসহ (ঐচ্ছিক) এবং একটি inline style ব্লকসহ সম্পূর্ণ স্ট্যান্ডঅ্যালোন HTML ডকুমেন্ট, যা সম্পূর্ণ ফাইল হিসেবে কপি করার জন্য প্রস্তুত। প্রিভিউ iframe sandbox='allow-same-origin' ব্যবহার করে, যাতে স্ক্রিপ্ট ও ফর্ম সাবমিশন ব্লক রেখে রিলেটিভ URL অনুমোদন করা যায়।

সাধারণ ভুল ও এজ কেস

বাহ্যিক @font-face URL এবং @import স্টেটমেন্ট iframe স্যান্ডবক্স দ্বারা ব্লক হতে পারে। বাইরের ডকুমেন্ট থেকে ইনহেরিটেড স্টাইলের ওপর নির্ভর করে এমন CSS পেস্ট করলে এখানে একইভাবে আচরণ করবে না, কারণ iframe আলাদা। খুব দীর্ঘ ডিউরেশনের অ্যানিমেশন এডিটর ফোকাসড না থাকলেও প্রিভিউ iframe-এ চলতে থাকে; টাইমিং ডিবাগ করলে animation-play-state দিয়ে এগুলো পজ করুন।

কোডের বদলে কখন এই টুল ব্যবহার করবেন

একবারের পরীক্ষা-নিরীক্ষা, আলাদা মিনিমাল রিপ্রোডাকশন, বা দ্রুত টিচিং ডেমোর জন্য ব্রাউজার টুলটি ব্যবহার করুন। বাস্তব প্রজেক্টে আপনার dev server, hot module replacement, এবং component devtools (React Refresh, Vue devtools) অনেক সমৃদ্ধ ফিডব্যাক লুপ দেয় — যেসব স্কেচের জন্য আপনি টুলিং সেটআপ করতে চান না, সেগুলোর জন্য এই প্লেগ্রাউন্ড ব্যবহার করুন।