স্টাইলশিট গুছিয়ে নিন বা মিনিফাই করুন, কত সাইজ বাঁচল তা দেখে
আপনার ব্রাউজারে চলে। আপনি যা লেখেন তা কোথাও পাঠানো হয় না।CSS ফরম্যাট করলে ইনডেন্ট যোগ হয় যাতে স্টাইলশিট পড়া যায়, আর মিনিফাই করলে প্রোডাকশনের জন্য প্রতিটি স্পেস ও কমেন্ট বাদ যায়। কত বাইট বাঁচল তা দেখানো হয়, তাই 2 KB ফাইলে লাভটা সিদ্ধান্ত নেওয়ার আগেই দেখা যায়। সবকিছু আপনার ব্রাউজারে চলে, কিছুই আপলোড হয় না।
এই পৃষ্ঠাটি ইংরেজি মূল লেখা থেকে যন্ত্রের সাহায্যে অনুবাদ করা হয়েছে। এই অনুবাদটি এখনও কোনো মানুষ পর্যালোচনা করেননি, তাই ইংরেজি সংস্করণটিকেই নির্ভরযোগ্য ধরুন। ইংরেজি মূল লেখাটি পড়ুন
স্টাইলশিটটি CSS বক্সে পেস্ট করুন, অথবা একটি উদাহরণ দেখুন চাপুন।
প্রতি লাইনে একটি ডিক্লারেশনের জন্য সাজান রাখুন, অথবা সবচেয়ে ছোট ফাইলের জন্য মিনিফাই বেছে নিন।
সাজান মোডে ইনডেন্ট-এর নিচে 2 স্পেস, 4 স্পেস বা Tab বেছে নিন।
ফলাফল নিতে কপি বা ডাউনলোড চাপুন।
এই CSS ফরম্যাটারের দুটি মোড আছে। সাজান মোড স্টাইলশিটকে প্রতি লাইনে একটি ডিক্লারেশন, সমান ইনডেন্ট এবং কোলন ও ব্রেসের চারপাশে একই রকম ফাঁক দিয়ে সাজায়। মিনিফাই মোড কমেন্ট ও হোয়াইটস্পেস বাদ দেয়, রং ও একক ছোট করে, আর একই ব্লকের নিয়মগুলো একত্র করতে পারে; তারপর আগের সাইজ, পরের সাইজ এবং কত শতাংশ বাঁচল তা দেখায়।
কাজের দুই প্রান্তেই এটি দরকার হয়। শুরুতে কোনো স্টাইলশিট CDN বা বিল্ড আউটপুট থেকে মিনিফাই অবস্থায় আসে, আর লেআউটের সমস্যা তৈরি করা নিয়মটি আপনাকে পড়তে হয়। শেষে আপনার হাতে লেখা একটি ফাইল থাকে এবং প্রকাশের জন্য সবচেয়ে ছোট সংস্করণটি চান। এখানে দুটোই একবার পেস্ট আর একটি ক্লিক।
মিনিফাই করতে csso ব্যবহার হয়। রিস্ট্রাকচার অপশনটি আগ্রাসী অংশ: এটি একই ব্লকের নিয়মগুলো একত্র করে, পরের কোনো নিয়ম যে ডিক্লারেশন বাতিল করে তা সরিয়ে দেয়, এবং যেখানে নিরাপদ সেখানে ক্রম বদলায়। সাধারণত এতে আরও কয়েক শতাংশ বাঁচে এবং ফলাফল সমতুল্য থাকে, কিন্তু আপনি যদি কোনো diff যাচাই করেন বা আপনার CSS কোডের ক্রমের ওপর এমনভাবে নির্ভর করে যা কোনো টুল দেখতে পায় না, তবে এটি বন্ধ রাখুন; তখন শুধু হোয়াইটস্পেস ও কমেন্ট বাদ যাবে। বিস্ময়চিহ্ন দিয়ে শুরু হওয়া কমেন্ট, যেখানে লাইসেন্স হেডার থাকে, রেখে দেওয়া যায়।
ফলাফলের ওপরে আপনি নিয়ম, সিলেক্টর, ডিক্লারেশন ও @-নিয়মের সংখ্যা পাবেন। কোনো ব্রেস, কমেন্ট বা উদ্ধৃতিচিহ্ন খোলা থেকে গেলে, পার্সারের কাঁচা আউটপুটের বদলে আপনি পাবেন সেটি কোন লাইন ও কলামে শুরু হয়েছে এবং কী যোগ করতে হবে। সবকিছু আপনার ব্রাউজারে চলে, তাই অপ্রকাশিত প্রকল্পের স্টাইলশিট কখনো কোথাও আপলোড হয় না।
হ্যাঁ। কোনো সাইন-আপ নেই, ফাইলের সাইজের সীমা নেই এবং কতগুলো স্টাইলশিট চালাবেন তারও সীমা নেই। টুলের বাইরে দেখানো কয়েকটি বিজ্ঞাপনে পেজটি চলে, আর সেগুলো আপনার ফলাফলে কখনো হাত দেয় না।
না। সাজানো ও মিনিফাই দুটোই JavaScript দিয়ে আপনার ব্রাউজারে চলে। অপ্রকাশিত ডিজাইন বা অভ্যন্তরীণ অ্যাডমিন টুলের স্টাইলশিট কখনো আপনার ডিভাইস ছেড়ে যায় না, আর ট্যাব বন্ধ করলে কিছুই রাখা হয় না।
কমেন্ট ও ইনডেন্টসহ হাতে লেখা একটি স্টাইলশিট সাধারণত 15 থেকে 30 শতাংশ ছোট হয়, আর রিস্ট্রাকচার ডুপ্লিকেট নিয়ম একত্র করে আরও কয়েক পয়েন্ট যোগ করে। পেজটি আগে ও পরের সঠিক বাইট সংখ্যা দেখায়, তাই আপনাকে কখনো আন্দাজ করতে হয় না।
রিস্ট্রাকচার একই ব্লকের নিয়মগুলো একত্র করে, পরের কোনো নিয়ম যে ডিক্লারেশন বাতিল করে তা সরিয়ে দেয়, এবং যেখানে নিরাপদ সেখানে সিলেক্টরের ক্রম বদলায়। সাধারণ মিনিফাইয়ের ওপর বাড়তি সাশ্রয় সাধারণত কয়েক শতাংশ। শুধু হোয়াইটস্পেস ও কমেন্ট সরাতে চাইলে এটি বন্ধ করুন, যেমন দুটি বিল্ডের মধ্যে পড়ার মতো diff দরকার হলে।
হ্যাঁ। সাজান বেছে নিয়ে মিনিফাই করা ফাইলটি পেস্ট করুন। এটি প্রতি লাইনে একটি সিলেক্টর, প্রতি লাইনে একটি ডিক্লারেশন এবং নিজ ব্লকের ভেতরে ইনডেন্ট করা মিডিয়া কোয়েরিসহ ফিরে আসে। সিলেক্টরের নাম, মান ও ক্রম ঠিক যেমন ছিল তেমনই থাকে।
বৈধ স্টাইলশিট মিনিফাই করলে নষ্ট হওয়ার কথা নয়। csso টেক্সট বদলানোর বদলে CSS সঠিকভাবে পার্স করে, তাই স্ট্রিং, data URI এবং কাস্টম প্রপার্টি অক্ষত থাকে। ফাইলটি পার্স করা না গেলে ভাঙা ফলাফলের বদলে আপনি লাইন ও কলাম পাবেন, আর কিছুই কপি হবে না।
এখনও আটকে আছেন? CSS ফরম্যাটার ও মিনিফায়ার সম্পর্কে প্রশ্ন করুন আর যিনি জানেন তিনিই উত্তর দিতে পারেন। কোনো অ্যাকাউন্ট লাগবে না।