CSS ফরম্যাটার ও মিনিফায়ার

CSS ফরম্যাটার কী?#

একটি CSS ফরম্যাটার দুটি জিনিস করে যা বিপরীত দেখায় কিন্তু একই সমস্যার সমাধান করে: এটি সঙ্কুচিত, মেশিন-উৎপাদিত CSS-কে এমন কিছুতে প্রসারিত করে যা একজন মানুষ পড়তে পারে, এবং একটি বিস্তৃত স্টাইলশিটকে শুধু সেই বাইটগুলোতে সংকুচিত করে যা আসলে গুরুত্বপূর্ণ। আপনি একটির কাছে পৌঁছানোর কারণ প্রায় সবসময়ই এই যে CSS আপনি যা করছেন তার জন্য ভুল আকারে এসেছে — একটি বিল্ড টুল একটি একক মিনিফাইড লাইন ডাম্প করেছে এবং আপনাকে একটি নির্দিষ্ট নিয়ম পরিদর্শন করতে হবে, বা একটি হাতে লেখা ফাইল ফুলে গেছে এবং আপনি শিপ করার আগে তা ছাঁটতে চান।

এই পৃষ্ঠাটি প্রকৃত ইঞ্জিন সহ উভয় দিক সামলায়। ফরম্যাট js-beautify-এর css_beautify ব্যবহার করে, যা সিলেক্টর এবং ডিক্লারেশন অনুমানযোগ্যভাবে পুনরায় ইনডেন্ট করে। মিনিফাই CSSO ব্যবহার করে, যা একটি প্রকৃত কাঠামোগত অপ্টিমাইজার, একটি হোয়াইটস্পেস ছিনিয়ে নেওয়ার প্রোগ্রাম নয়: এটি অভিন্ন ডিক্লারেশন সহ সংলগ্ন নিয়মগুলোকে একত্রিত করে, লংহ্যান্ড প্রোপার্টিগুলোকে শর্টহ্যান্ডে ভাঁজ করে, ওভাররাইড করা ডিক্লারেশনগুলো সরিয়ে দেয়, এবং তারপরই অবশিষ্ট হোয়াইটস্পেস সংকুচিত করে। ফলাফলটি সাধারণত একটি নিষ্ঠাহীন কম্প্যাক্টর যা তৈরি করে তার চেয়ে ছোট, এবং ইনপুটের সাথে সিমেন্টিকভাবে সমতুল্য। যখন আপনি ওয়্যারে প্রতিটি বাইটর পরিচর্যা করেন তখন সেই পার্থক্যটি গুরুত্বপূর্ণ।

ব্যবহারবিধি#

1. বাঁদিকের CSS পেইনে আপনার CSS পেস্ট করুন। আচরণটি আগে চেষ্টা করতে চাইলে নমুনা একটি ছোট স্টাইলশিট লোড করে।
2. টুলবারে একটি ইন্ডেন্ট বেছে নিন: ২, ৪, বা ট্যাব। দুই স্পেস সাধারণ আধুনিক রীতি; ঘন ফাইল পড়ার জন্য চারটি বন্ধুত্বপূর্ণ।
3. একটি ক্রিয়া ক্লিক করুন:
   • ফরম্যাট — js-beautify-এর মাধ্যমে পুনরায় ইনডেন্ট এবং লাইন-বিরতি। সিলেক্টরগুলো তাদের নিজস্ব লাইনে যায়, ডিক্লারেশনগুলো বন্ধনীর ভেতরে সারিবদ্ধ হয়।
   • মিনিফাই — CSSO-র কাঠামোগত অপ্টিমাইজেশন চালান, তারপর কম্প্যাক্ট আউটপুট নির্গত করুন। মন্তব্য বাদ দেওয়া হয়, সদৃশ নিয়ম একত্রিত হয়, লংহ্যান্ডগুলো যেখানে নিরাপদ সেখানে শর্টহ্যান্ডে ভাঁজ হয়।
4. আউটপুট পেইনে ফলাফল পড়ুন এবং নিতে কপি ব্যবহার করুন। মুছুন উভয় পেইন রিসেট করে।

আপনার ইনপুটে যদি একটি অসমাপ্ত নিয়ম বা একটি ভাঙা ডিক্লারেশন থাকে, স্ট্যাটাস বার অনুমান করার বদলে ত্রুটি রিপোর্ট করে।

মূল বৈশিষ্ট্য#

• ফরম্যাট এবং মিনিফাই ভিন্ন ভিন্ন ইঞ্জিন। Beautify হলো js-beautify; মিনিফাই হলো CSSO। প্রতিটি যে কাজে সে ভালো তা করে, একটি আপস করা রুটিন উভয় করার চেষ্টা করার বদলে।
• মিনিফাইতে প্রকৃত অপ্টিমাইজেশন। CSSO স্টাইলশিট পুনর্গঠন করে — .a { color: red } .b { color: red }-কে একটি শেয়ার করা নিয়মে একত্রিত করা, margin: 0 0 0 0-কে margin: 0-এ সংকুচিত করা, এমন একটি ডিক্লারেশন সরানো যা একটি পরবর্তী নিয়ম ইতিমধ্যে ওভাররাইড করেছে। হোয়াইটস্পেস অপসারণ হলো শেষ ধাপ, একমাত্র ধাপ নয়।
• তিনটি ইনডেন্ট শৈলী। 2 স্পেস, 4 স্পেস, বা ট্যাব, এক মেনু দিয়ে স্যুইচ করা।
• পাশাপাশি, কপি-প্রস্তুত। ইনপুট এডিটযোগ্য, আউটপুট শুধু-পঠনযোগ্য একটি এক-ক্লিক কপি বোতাম সহ।
• কঠোরভাবে ক্লায়েন্ট-সাইড। CSSO এবং js-beautify পৃষ্ঠায় বান্ডল করা এবং শুধুমাত্র আপনি এই টুলটি খুললে লোড করা হয়। আপনার স্টাইলশিট ব্রাউজারে প্রক্রিয়া করা হয় এবং কখনো আপলোড হয় না।

ব্যবহারিক উদাহরণ#

একটি ছোট স্টাইলশিট যেখানে দুটি নিয়ম কাজ পুনরাবৃত্তি করে এবং একটি লংহ্যান্ড ছোট হতে পারে:

ইনপুট:

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

২ স্পেস সহ ফরম্যাট ক্লিক করুন:

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

পুনরাবৃত্তিটি এখন স্পষ্ট — ঠিক এটিই একটি ফরম্যাটারের জন্য। এখন একই ইনপুটে মিনিফাই ক্লিক করুন এবং CSSO এটি কাঠামোগতভাবে পুনরায় লেখে:

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

একবারে তিনটি জিনিস ঘটেছে। চার-মানের padding একটি মানে সংকুচিত হয়েছে কারণ চারটি পাশ সমান ছিল; চারটি margin-* লংহ্যান্ড margin শর্টহ্যান্ডে ভাঁজ হয়েছে; এবং দুটি color: #ff0000 নিয়ম একটি গ্রুপ করা সিলেক্টর সহ একটি একক নিয়মে একত্রিত হয়েছে (এবং hex ছোট red হয়ে গেছে)। একটি প্লেইন হোয়াইটস্পেস ছিনিয়ে নেওয়া প্রোগ্রাম অতিরিক্ততার প্রতিটি বাইট রাখত — শুধুমাত্র একটি পুনর্গঠনকারী অপ্টিমাইজারই এই জয়গুলো খুঁজে পায়।

প্রশ্নোত্তর#

মিনিফাই কি আমার পৃষ্ঠা কেমন দেখায় তা পরিবর্তন করবে?#

না, যখন ইনপুটটি বৈধ CSS তখন নয়। CSSO শুধুমাত্র সেই রূপান্তরগুলো প্রয়োগ করে যা ক্যাসকেড সংরক্ষণ করে: অভিন্ন ডিক্লারেশন সহ নিয়মগুলো একত্রিত করা, এমন লংহ্যান্ড ভাঁজ করা যাদের মান সব একই, এমন ডিক্লারেশন বাদ দেওয়া যা একটি আরও নির্দিষ্ট বা পরবর্তী নিয়ম ওভাররাইড করে। একটি রূপান্তর যদি অস্পষ্ট হয় তবে তা এড়িয়ে যাওয়া হয়। ফরম্যাট সম্পূর্ণভাবে প্রসাধনমূলক এবং কখনো অর্থ পরিবর্তন করে না।

মিনিফাই কি আমার মন্তব্য রাখে?#

না। মিনিফিকেশনের সময় মন্তব্যগুলো সরানো হয়, /* !important */-স্টাইলের ব্যানার সহ। আপনার যদি একটি লাইসেন্স হেডার বা একটি বিল্ড মার্কার বাঁচতে প্রয়োজন হয়, আপনার মন্তব্য করা সোর্স রাখুন এবং মিনিফাই করার পরে আপনার বিল্ড পাইপলাইনে ব্যানারটি পুনরায় সন্নিবেশ করুন।

মিনিফাইড আউটপুট কেন কখনো আমার ইনপুটের চেয়ে বড় হয়?#

প্রায় সবসময়ই কারণ ইনপুটটি ইতিমধ্যে মিনিফাইড ছিল। CSSO-কে এখনও তা পার্স এবং পুনরায় নির্গত করতে হবে, এবং ইতিমধ্যে-কম্প্যাক্ট, ইতিমধ্যে-অপ্টিমাইজড ইনপুটে লাভ করার মতো কিছু নেই — আউটপুটটি মূলত একই আকারের। এটিকে হাতে লেখা বা প্রসারিত CSS খাওয়ান এবং সাশ্রয় বাস্তব।

আমার CSS কি কোনো সার্ভারে পাঠানো হয়?#

না। উভয় ইঞ্জিন আপনার ব্রাউজারে চলে। লাইব্রেরিগুলো চাহিদামোতাবেক পৃষ্ঠার নিজস্ব বান্ডল থেকে লোড করা হয়, তাই এমন কোনো নেটওয়ার্ক অনুরোধ নেই যা আপনার স্টাইলশিট কোথাও বহন করে।