CSS ফরম্যাটার
ট্রেন্ডিং 🔥CSS কোড ফরম্যাট ও মিনিফাই করুন
CSS ফরম্যাটার কীভাবে ব্যবহার করবেন
- 1ইনপুট এরিয়ায় CSS কোড পেস্ট করুন
- 2ফরম্যাট বা মিনিফাই বেছে নিন
- 3প্রসেস করা CSS পর্যালোচনা করুন
CSS ফরম্যাটার সম্পর্কে
CSS ফরম্যাটার হল একটি টুল যা CSS কোড ফরম্যাট এবং মিনিফাই করে। এটি প্রপার্টি সাজায় এবং নিয়ম ফরম্যাট করে। CSS3 এবং আধুনিক সিনট্যাক্স সমর্থিত।
CSS ফরম্যাটার-এর মূল বৈশিষ্ট্যসমূহ
- সামঞ্জস্যপূর্ণ indentation ও property-per-line ফরম্যাটিং দিয়ে CSS সুন্দর করে
- whitespace, comment এবং redundant character সরিয়ে CSS minify করে
- media query, pseudo-class এবং keyframe animation পরিচালনা করে
- CSS custom property (variable) ও calc() expression সংরক্ষণ করে
- plain CSS-এর সাথে কাজ করে — সম্পূর্ণ stylesheet ও individual ruleset
- সম্পূর্ণ browser-এ কাজ করে — কোনো server upload নেই
- ফরম্যাট করা বা minified আউটপুট এক-ক্লিকে কপি করা যায়
- minification দ্বারা অর্জিত character count reduction দেখায়
উদাহরণ
Production bundle থেকে minified CSS beautify করা
একটি compressed CSS file ফরম্যাট করুন তার structure বুঝতে ও নির্দিষ্ট rule খুঁজতে।
ইনপুট
.btn{display:inline-block;padding:8px 16px;background:#007bff;color:#fff;border-radius:4px}আউটপুট
.btn {
display: inline-block;
padding: 8px 16px;
background: #007bff;
color: #fff;
border-radius: 4px;
}Production deployment-এর জন্য stylesheet minify করা
deploy করার আগে development CSS file থেকে whitespace ও comment সরান।
ইনপুট
comment সহ ফরম্যাট করা CSS file, ~80 লাইন
আউটপুট
Single-line minified CSS — Gzip-এর আগে ~40% size reduction
সাধারণ ব্যবহারের ক্ষেত্র
- debug করার জন্য CDN থেকে ডাউনলোড করা minified CSS file ফরম্যাট করা
- browser DevTools থেকে কপি করা CSS পরিষ্কারভাবে reformat করে পড়া
- page load time কমাতে deployment-এর আগে CSS stylesheet minify করা
- third-party component CSS-এর style beautify করে বোঝা
- documentation ও technical blog post-এর জন্য CSS snippet প্রস্তুত করা
- whitespace-only পার্থক্য চিহ্নিত করতে ফরম্যাট করা ও minified CSS তুলনা করা
সমস্যা সমাধান
Minified CSS এখনো বড় মনে হচ্ছে
সমাধান
CSS minification whitespace সরায় কিন্তু unused rule নয়। আরো aggressive reduction-এর জন্য PurgeCSS-এর মতো CSS purging tool বিবেচনা করুন।
ফরম্যাট করা আউটপুট box-shadow-এর মতো multi-line value নষ্ট করছে
সমাধান
কিছু CSS property multi-value syntax গ্রহণ করে। আউটপুট ভুল মনে হলে original-এর সাথে তুলনা করুন value-এর অর্থ পরিবর্তন হয়েছে কিনা দেখতে।
SCSS বা Less variable ফরম্যাটিং error করছে
সমাধান
টুলটি standard CSS পরিচালনা করে। আগে preprocessor style CSS-এ compile করুন, তারপর ফরম্যাট করুন।
সচরাচর জিজ্ঞাসিত প্রশ্ন
এটি কি SCSS বা Less পরিচালনা করে?
টুলটি standard CSS পরিচালনা করে। SCSS ও Less syntax সঠিকভাবে ফরম্যাট নাও হতে পারে। আগে preprocessor code CSS-এ compile করুন।
CSS minify করলে কি আমার style নষ্ট হবে?
না। Minification শুধু whitespace ও comment সরায় — কোনো property name, value বা selector পরিবর্তন করে না।
এটি কি CSS custom property (variable) সমর্থন করে?
হ্যাঁ। --primary-color: #007bff ও var(--primary-color)-এর মতো CSS custom property standard CSS হিসেবে বিবেচিত হয়।
আমি কি পুরো file-এর পরিবর্তে single CSS rule ফরম্যাট করতে পারি?
হ্যাঁ। যেকোনো CSS snippet পেস্ট করুন — single ruleset, media query block বা সম্পূর্ণ stylesheet।
CSS minification কতটা file size কমায়?
Whitespace সরানো সাধারণত CSS file 20–40% কমায়। Gzip-এর সাথে মিলিয়ে মোট reduction প্রায়ই 60–80% হয়।
Minification-এ CSS comment কি সরানো হয়?
হ্যাঁ। Standard CSS comment minification-এ সরানো হয়। License comment ম্যানুয়ালি পুনরায় যোগ করতে হবে।
আমার code কি server-এ পাঠানো হয়?
না। সব ফরম্যাটিং ও minification আপনার browser-এ locally হয়।
এটি কি CSS syntax যাচাই করে?
syntactically অবৈধ CSS-এ formatter ভুল আউটপুট দিতে পারে কিন্তু specific error রিপোর্ট করে না। বিস্তারিত diagnostics-এর জন্য W3C CSS Validation Service ব্যবহার করুন।