বিনামূল্যে CSS মিনিফায়ার ও বিউটিফায়ার

কিভাবে কাজ করে

এই টুল পুরোপুরি JavaScript-এ তৈরি একটি হাতে লেখা, নির্ভরতাহীন CSS টোকেনাইজার ব্যবহার করে — কোনো বাইরের লাইব্রেরি বা সার্ভার কল নেই। কোনো রূপান্তরের আগে টোকেনাইজার প্রতিটি অক্ষরকে কোড, কমেন্ট, উদ্ধৃত স্ট্রিং বা url() মান হিসেবে শ্রেণিবদ্ধ করে, যা হোয়াইটস্পেস নিয়মকে স্ট্রিংয়ের বিষয়বস্তু, data URI বা calc() এক্সপ্রেশন নষ্ট করা থেকে রক্ষা করে।

1. 1
   টোকেনাইজেশন ধাপ

   ইনপুট CSS অক্ষর ধরে ধরে স্ক্যান হয়ে টাইপড টোকেনে ভাগ হয়: কাঁচা কোড অংশ, /* ... */ কমেন্ট, উদ্ধৃত স্ট্রিং (এস্কেপ সিকোয়েন্স অক্ষুণ্ণ রেখে), এবং url(...) ব্লক। এতে নিশ্চিত হয় যে পরের ধাপের রূপান্তর শুধু আসল CSS সিনট্যাক্স ছোঁয় — কখনো স্ট্রিং লিটারাল বা data URI-এর বিষয়বস্তু নয়।
2. 2
   Minify বা beautify

   Minify মোডে সাধারণ কমেন্ট বাদ যায় (/*! license */ কমেন্ট রাখা হয়), কোড টোকেনে হোয়াইটস্পেসের ধারা একটি স্পেসে সংকুচিত হয়, এবং { } : ; , > ~-এর চারপাশের হোয়াইটস্পেস সরানো হয়। calc() এক্সপ্রেশন যাতে না ভাঙে, তাই + ও --এর চারপাশের স্পেস ইচ্ছাকৃতভাবে রাখা হয়। Beautify মোডে কোড প্রথমে একটি পরিষ্কার ভিত্তিতে minify হয়, তারপর আবার টোকেনাইজ করে দুই-স্পেস গভীরতা ট্র্যাকিং ও ঘোষণার কোলন শনাক্তকরণসহ ইনডেন্ট করা হয়, যাতে property: value কোলন ও a:hover-এর মতো selector কোলন আলাদা করা যায়।
3. 3
   Gzip আকারের অনুমান

   আউটপুট তৈরির পর ব্রাউজারের নেটিভ CompressionStream API দিয়ে ফলাফল gzip-এ কম্প্রেস করে বাইট সংখ্যা মাপা হয়। এতে gzip কম্প্রেশনসহ একটি ওয়েব সার্ভার নেটওয়ার্কে যা পাঠাত, তার সাথে মেলে এমন বাস্তবসম্মত ট্রান্সফার-আকারের অনুমান পাওয়া যায়।
4. 4
   কপি বা ডাউনলোড

   প্রক্রিয়াকৃত CSS Clipboard API দিয়ে ক্লিপবোর্ডে লেখা হয়, অথবা MIME টাইপ text/css-সহ একটি Blob দিয়ে styles.min.css (minify মোড) বা styles.css (beautify মোড) হিসেবে ডাউনলোড হয়। টাইপ করার সময় আকার কমার শতাংশ লাইভ দেখায়।

সম্পর্কিত টুলস