এই ফরম্যাটার প্রতিটি ব্রেস ও সেমিকোলনে অন্ধভাবে লেখা ভাগ না করে syntax বোঝে এমন scanner ব্যবহার করে। এটি string, comment, function, attribute selector ও nested block অনুসরণ করে। তাই URL বা উদ্ধৃত মানের ভেতরের চিহ্ন বদলে যায় না।
অনলাইন CSS Formatter
পুরোটাই আপনার ব্রাউজারে চলে - কিছু আপলোড নেই, সাইন-আপ নেই।
ইনপুট CSS
ফরম্যাট করা CSS
ফরম্যাট করতে CSS পেস্ট করুন
CSS Formatter কীভাবে ব্যবহার করবেন?
CSS Formatter মিনিফাই করা বা অসম ফাঁকযুক্ত স্টাইলশিটকে সমান ইন্ডেন্ট ও লাইন ব্রেকসহ সহজে পড়ার মতো কোডে সাজায়। CSS পেস্ট করে ২টি স্পেস, ৪টি স্পেস বা ট্যাব বেছে নিন, তারপর ফল কপি বা ডাউনলোড করুন। পুরো কাজ ব্রাউজারে হয় এবং কমেন্ট, উদ্ধৃত মান, data URL ও declaration-এর ক্রম অপরিবর্তিত থাকে।
যেভাবে ব্যবহার করবেন
- 1CSS পেস্ট করুন. Input editor-এ একটি stylesheet, selector block বা মিনিফাই করা CSS-এর অংশ যোগ করুন।
- 2ইন্ডেন্ট বাছুন. ২টি স্পেস, ৪টি স্পেস বা ট্যাব বেছে নিন। টাইপ করার সঙ্গে সঙ্গে ফরম্যাট করা ফল বদলাবে।
- 3অবস্থা দেখুন. গঠনের হিসাব দেখুন অথবা দেখানো জোড়াহীন delimiter, খোলা comment বা অসম্পূর্ণ string ঠিক করুন।
- 4কপি বা ডাউনলোড করুন. ফরম্যাট করা CSS clipboard-এ কপি করুন অথবা formatted.css নামে সংরক্ষণ করুন।
কাদের জন্য
- Front-end developer যারা production CSS খুলে আরও সহজে পড়তে ও debug করতে চান।
- Code reviewer যারা কপি করা stylesheet বা pull request-এর অংশ তুলনা করার আগে indent এক রকম করেন।
- শিক্ষার্থী যারা nested media query, selector ও declaration block আরও পরিষ্কারভাবে বুঝতে চান।
- Support ও QA দল যারা developer tools থেকে পাওয়া CSS ticket বা সমস্যা পুনরায় তৈরির ধাপে যোগ করার আগে গুছিয়ে নেন।
সাধারণ প্রশ্ন
CSS Formatter কি বিনামূল্যে ব্যবহার করা যায়?
হ্যাঁ। ব্রাউজার স্বচ্ছন্দে যতটা CSS সামলাতে পারে, ততটাই ফরম্যাট করা যাবে। কোনো account বা installation দরকার নেই, ব্যবহারের নির্দিষ্ট সীমা নেই এবং ফল সঙ্গে সঙ্গে দেখা যায়।
আমার CSS কি server-এ পাঠানো হয়?
না। ফরম্যাট করার কাজ ব্রাউজারেই স্থানীয়ভাবে চলে। পেস্ট করা CSS পেজের editor-এ থাকে এবং কোনো API-তে পাঠানো হয় না, তাই ব্যক্তিগত project-এর style নিয়েও কাজ করা যায়।
কতটা CSS ফরম্যাট করা যাবে?
এই tool-এ নির্দিষ্ট character limit নেই। খুব বড় generated stylesheet ডিভাইসের memory ও performance-এর ওপর নির্ভর করবে, তবে website, component ও email-এর সাধারণ style সঙ্গে সঙ্গে ফরম্যাট হয়।
ফরম্যাট করলে CSS-এর কাজ বদলে যায় কি?
শুধু ফাঁক ও line break বদলায়। Selector, declaration, comment, উদ্ধৃত string এবং সেগুলোর ক্রম একই থাকে। Experimental syntax বা অস্বাভাবিক ফাঁকের ওপর নির্ভরশীল escape ব্যবহার করলে প্রকাশের আগে ফল যাচাই করুন।
এটি কি CSS property যাচাই করে?
না। এটি curly brace, square bracket, parenthesis, comment ও string-এর জোড়া ঠিক আছে কি না দেখে। প্রতিটি property, value বা browser-specific feature বৈধ কি না যাচাই করে না। সে জন্য standards-based CSS validator ব্যবহার করুন।
Media query ও nested CSS ফরম্যাট করা যাবে?
হ্যাঁ। @media, @supports, @container, @layer ও @keyframes rule-এর block গভীরতা অনুযায়ী indent হয়। আধুনিক nested selector-ও string বা function argument না বদলে ফরম্যাট হয়।