CSS منیفائر
سٹائل شیٹ پیسٹ کریں تاکہ خالی جگہیں اور کمنٹس ہٹ جائیں، #ff0000 → red جیسی ویلیوز مختصر ہوں، اور CSSO کی ساختی اصلاحات سے دہرائے گئے رولز یکجا ہوں۔
آپ کے براؤزر میں چلتا ہےسائن اپ کی ضرورت نہیںکچھ اپ لوڈ نہیں ہوتا
CSS منیفائر استعمال کرنے کا طریقہ
- CSS پیسٹ کریں یا
.cssفائل کھولیں۔ - رولز اور ڈیکلیریشنز یکجا کرنے کے لیے ری سٹرکچر آن رکھیں، یا صرف خالی جگہیں ہٹانے والے محفوظ پاس کے لیے اسے بند کریں۔
- لائسنس کمنٹس رکھیں آن رہنے دیں تاکہ
/*! … */نوٹسز محفوظ رہیں۔ - اصل، منیفائیڈ اور gzip شدہ سائز کا موازنہ کریں۔
- نتیجہ کاپی کریں یا
output.min.cssڈاؤن لوڈ کریں۔
CSS منیفکیشن کیسے کام کرتی ہے
یہ ٹول CSSO (CSS Optimizer) استعمال کرتا ہے، جو آپ کی سٹائل شیٹ کو سنٹیکس ٹری میں پارس کرتا ہے اور اسے سب سے مختصر مساوی شکل میں دوبارہ لکھتا ہے۔ خالی جگہیں اور کمنٹس ہٹانے کے علاوہ یہ ویلیوز کی محفوظ تبدیلیاں بھی کرتا ہے:
#ffffff→#fff،#ff0000→red0px→0،0.90→.9margin: 8px 16px 8px 16px→margin:8px 16px- خالی رولز اور دہرائی گئی ڈیکلیریشنز ہٹا دی جاتی ہیں
«ری سٹرکچر» کیا کرتا ہے؟
ری سٹرکچرنگ پوری سٹائل شیٹ کو دیکھتی ہے: ایک جیسی ڈیکلیریشنز والے رولز ایک سلیکٹر فہرست میں یکجا ہو جاتے ہیں (.a,.b{color:red})، اور دہرائے گئے سلیکٹرز ملا دیے جاتے ہیں۔ اصل سٹائل شیٹس پر اس سے اکثر مزید 5–15% بچت ہوتی ہے۔ CSSO صرف تب یکجا کرتا ہے جب cascade کی ترتیب برقرار رہے، لیکن اگر آپ غیر معمولی overrides پر انحصار کرتے ہیں تو خالص نحوی منیفکیشن کے لیے اسے بند کر سکتے ہیں۔
CSS منیفائی کیوں کریں؟
CSS رینڈرنگ کو روکتی ہے: جب تک <head> میں موجود سٹائل شیٹس ڈاؤن لوڈ اور پارس نہ ہو جائیں، براؤزر صفحہ نہیں بنا سکتا۔ چھوٹی CSS کا مطلب تیز First Contentful Paint اور بہتر Core Web Vitals ہے، جو صارفین اور سرچ رینکنگ دونوں کے لیے مفید ہے۔ بہترین نتیجے کے لیے منیفکیشن کو سرور پر gzip یا Brotli کے ساتھ ملائیں۔
اکثر پوچھے جانے والے سوالات
کیا CSS منیفائی کرنا محفوظ ہے؟
کیا یہ custom properties، nesting اور @layer جیسی جدید CSS سپورٹ کرتا ہے؟
--var)، @media، @supports، @layer، @container اور grid سنٹیکس محفوظ رہتے ہیں۔