CSS منیفائی کریں
کمنٹس اور خالی جگہ ہٹائیں اور ویلیوز چھوٹی کریں۔ اور اگر منیفائر آپ کی فائل کی کوئی چیز سنبھال نہ سکے تو صاف بتا دیتا ہے — خاموشی سے ایسی اسٹائل شیٹ واپس دینے کے بجائے جس کے rules غائب ہوں۔
- کبھی محفوظ نہیں کی جاتی
- نہ قطار، نہ انتظار
- نہ سائن اپ، نہ واٹر مارک
منیفائیڈ CSS یہاں نظر آئے گا۔
یہ کیسے کام کرتا ہے
اپنی CSS پیسٹ کریں
یا فائل ڈراپ کریں۔ کچھ بھی محفوظ نہیں کیا جاتا۔
نتیجہ دیکھیں
آپ کو minify شدہ اسٹائل شیٹ اور یہ کہ وہ کتنی چھوٹی ہوئی، ملتی ہے — یا اس بات کی وضاحت کہ کیا سنبھالا نہیں جا سکا۔
کاپی یا ڈاؤن لوڈ کریں
آپ کے build میں ڈالنے کے لیے تیار۔
بائٹس اصل میں کہاں جاتے ہیں
زیادہ تر بچت خالی جگہ اور کمنٹس سے ہوتی ہے، جو ہاتھ سے لکھی اسٹائل شیٹ میں بہت زیادہ ہوتے ہیں — انڈینٹیشن، rules کے درمیان خالی لائنیں، اور وہ سیکشن ہیڈرز جن سے بڑی فائل میں راستہ ڈھونڈنا آسان ہوتا ہے، سرو ہونے کے بعد سب محض فالتو بوجھ ہیں۔ اس کے علاوہ ویلیوز کو ایسے طریقوں سے چھوٹا کیا جاتا ہے جن سے ان کا مطلب نہیں بدل سکتا: #ffffff لکھا رنگ #fff بن جاتا ہے، 0px صرف 0 بن جاتا ہے کیونکہ صفر کو یونٹ کی ضرورت نہیں، 0.5em کا شروع والا صفر ہٹ جاتا ہے، اور margin: 10px 10px 10px 10px سمٹ کر margin: 10px رہ جاتا ہے۔
جو کام جان بوجھ کر نہیں کیا جاتا وہ خطرناک قسم کا ہے۔ ایک جیسی declarations والے rules کو ملانا یا ان کی ترتیب بدلنا cascade کو بدل دیتا ہے — اور cascade CSS کا وہ حصہ ہے جہاں برابر specificity والے دو rules کا فیصلہ اس سے ہوتا ہے کہ کون سا بعد میں آیا۔ جو منیفائر جارحانہ طور پر ترتیب بدلے، وہ فائل تو چھوٹی کر دے گا مگر بڑی اسٹائل شیٹ میں صفحہ ذرا سا مختلف ہو جائے گا۔ ڈپلیکیٹ declarations بھی اکثر جان بوجھ کر رکھی جاتی ہیں، پرانے براؤزرز کے لیے fallback کے طور پر جو دوسری کو نظر انداز کر دیتے ہیں۔
nested rules اور جدید media range syntax کو minify کرنے کے بجائے مسترد کر دیا جاتا ہے، اور اس کی وجہ بتانا ضروری ہے کیونکہ یہ زیادہ تر ٹولز کے برعکس ہے۔ اس کے پیچھے موجود پارسر ان دونوں فیچرز سے پرانا ہے، اور جب اسے کوئی ایسی چیز ملتی ہے جو وہ نہیں سمجھتا تو وہ خرابی نہیں دکھاتا — اسے خاموشی سے حذف کر دیتا ہے، یوں nested بلاک آؤٹ پٹ سے بس غائب ہو جاتا ہے اور صفحہ ایسی اسٹائلنگ کھو دیتا ہے جس کی کسی نے اطلاع نہیں دی۔ فائل مسترد کرنا ہی دیانت دارانہ جواب ہے۔ اگر آپ کی اسٹائل شیٹ native nesting یا @media (400px <= width <= 700px) استعمال کرتی ہے تو نیچے دیے گئے ٹولز میں سے کوئی استعمال کریں۔
مارک اپ کی طرح، نتیجے کو کمپریشن کے بعد پرکھیں۔ اسٹائل شیٹس gzip یا brotli سے کمپریس ہو کر سرو ہوتی ہیں، اور یہ الگورتھم دہرائی گئی خالی جگہ کو پہلے ہی بہت اچھی طرح سنبھالتے ہیں — اس لیے جو فائل minify ہو کر 30 فیصد کم ہو، وہ نیٹ ورک پر شاید صرف 5 فیصد چھوٹی ہو۔ بچت حقیقی ہے، مگر نمایاں نمبر سے کم۔
جب آپ کو کچھ اور چاہیے
جدید اسٹائل شیٹس کے لیے صحیح ٹول Lightning CSS ہے: یہ nesting، media ranges، رنگوں کے functions اور پچھلے چند سالوں میں شامل ہونے والی ہر چیز سمجھتا ہے، کسی بھی پرانے ٹول سے زیادہ minify کرتا ہے، اور ساتھ ساتھ نئے syntax کو پرانے براؤزرز کے لیے transpile بھی کر دیتا ہے۔ esbuild --minify style.css تقریباً اتنا ہی اچھا اور بے حد تیز ہے۔ دونوں کی جگہ build کا مرحلہ ہے، براؤزر ٹیب نہیں۔
کہیں بڑا فائدہ عموماً وہ rules ہٹانے میں ہے جو آپ استعمال نہیں کر رہے۔ کسی utility فریم ورک یا component لائبریری پر بنی سائٹ اکثر ایسی اسٹائل شیٹس بھیجتی ہے جن کا زیادہ تر حصہ صفحے کی کسی چیز پر لاگو ہی نہیں ہوتا — اور PurgeCSS، یا فریم ورک کا اپنا build، اسے دس گنا تک کم کر دے گا۔ غیر استعمال شدہ CSS کو minify کرنے سے غیر استعمال شدہ CSS چھوٹی ہو جاتی ہے؛ اسے حذف کرنا ہی اصل حل ہے۔
اکثر پوچھے جانے والے سوالات
کیا میری CSS کہیں محفوظ کی جاتی ہے؟
نہیں، اور سورس کوڈ کے لیے یہی تو اصل بات ہے۔ کچھ بھی محفوظ نہیں کیا جاتا اور کوئی سرور اسے کبھی نہیں دیکھتا۔ اپنا ملکیتی سورس کسی ایسے آن لائن منیفائر میں پیسٹ کرنا جو اسے کہیں بھیج دے، اسے ظاہر کر دینا ہے، سائٹ ڈیٹا رکھنے کے بارے میں جو بھی کہے — اور یہ بالکل وہ کام ہے جو جلدی میں بغیر سوچے کر لیا جاتا ہے۔
اس نے میری فائل کیوں مسترد کر دی؟
کیونکہ اسے minify کرنے سے rules ضائع ہو جاتے۔ اس صفحے کے پیچھے موجود منیفائر 2022 کا ہے اور دو ایسی چیزوں سے واقف نہیں جو اب عام CSS ہیں۔ native nesting ملے — یعنی ایک rule دوسرے rule کے اندر لکھا ہو، "&" کے ساتھ یا اس کے بغیر — تو یہ بیرونی rule واپس دیتا ہے اور nested rule کو خاموشی سے گرا دیتا ہے۔ جدید media range query ملے، جیسے @media (width >= 400px)، تو یہ خالی اسٹائل شیٹ واپس دیتا ہے۔ دونوں میں کوئی خرابی ظاہر نہیں ہوتی۔ ہم نے دونوں کو اسی ورژن پر ناپا جو ہم استعمال کرتے ہیں، اور فیصلہ کیا کہ کسی کو غائب اسٹائلز والی اسٹائل شیٹ دینا انکار کرنے سے بدتر ہے، اس لیے یہ دونوں صورتیں پہچان کر مسترد کر دی جاتی ہیں۔ عمومی جانچ کے طور پر rules پہلے اور بعد میں گنے بھی جاتے ہیں، اس صورت کے لیے کہ کوئی تیسری صورت ہو جو ابھی تک کسی کو نہ ملی ہو۔
تو پھر nested CSS کو کیسے minify کروں؟
پہلے nesting کو compile کر کے ختم کریں۔ nesting کو سپورٹ کرنے والا ہر build ٹول — Sass، PostCSS، Lightning CSS، یا آپ کا bundler — build کے دوران اسے flat کر دیتا ہے، اور flat آؤٹ پٹ یہاں بغیر کسی شکایت کے minify ہو جاتا ہے۔ اگر آپ ہاتھ سے nesting لکھ کر اسے سیدھا سرو کر رہے ہیں تو آپ ایک ایسے فیچر پر انحصار کر رہے ہیں جو موجودہ براؤزرز میں تو سپورٹ ہوتا ہے مگر منیفائر ٹولز ابھی پوری طرح اس تک نہیں پہنچے۔
یہ اصل میں کرتا کیا ہے؟
کمنٹس اور خالی جگہ ہٹاتا ہے، رنگ چھوٹے کرتا ہے (#ffffff بنتا ہے #fff، #ff0000 بنتا ہے red)، غیر ضروری یونٹس اور سیمی کولن ہٹاتا ہے، اور جو کچھ محفوظ طریقے سے ملایا جا سکے اسے ملا دیتا ہے۔ یہ ان rules کو نہیں ہٹاتا جنہیں وہ غیر استعمال شدہ سمجھے — اس کے لیے آپ کا HTML جاننا ضروری ہے، اور غلط اندازہ ان اسٹائلز کو حذف کر دیتا ہے جن کی آپ کو ضرورت ہے۔
یہ کتنی چھوٹی ہو جائے گی؟
ہاتھ سے لکھی CSS کے لیے عموماً 15–30%۔ کسی build ٹول سے پہلے ہی compile شدہ آؤٹ پٹ اکثر تقریباً کم سے کم ہوتا ہے اور بمشکل بدلے گا۔ آپ کے سرور پر gzip، minify کرنے سے زیادہ کام کرتا ہے؛ دونوں کا اثر جمع ہوتا ہے۔
کیا یہاں پروڈکشن اسٹائل شیٹ minify کرنا محفوظ ہے؟
ہاں۔ کچھ بھی محفوظ نہیں کیا جاتا، اور جو دو صورتیں یہ سنبھال نہیں سکتا انہیں خاموشی سے خراب کرنے کے بجائے مسترد کر دیا جاتا ہے، اس لیے جو واپس آتا ہے وہ یا تو درست ہوتا ہے یا اس بات کی وضاحت کہ اسے کیوں مسترد کیا گیا۔
جاننا مفید ہے: nested rules اور جدید media range syntax کو minify کرنے کے بجائے مسترد کر دیا جاتا ہے۔ منیفائر ایک ایسے پارسر پر بنا ہے جو ان دونوں سے پرانا ہے، اور خرابی دکھانے کے بجائے جو چیز نہیں سمجھتا اسے خاموشی سے حذف کر دیتا ہے — nested بلاک آؤٹ پٹ سے بس غائب ہو جاتا ہے۔ جب تک وہ پارسر اپ ڈیٹ نہیں ہوتا، فائل مسترد کرنا ہی دیانت دارانہ جواب ہے۔
یہ ٹول اپنی ویب سائٹ پر لگائیں
کسی بھی بلاگ، کلاس پیج یا ہیلپ آرٹیکل کے لیے مفت۔ ایک اسنیپٹ پیسٹ کریں اور آپ کے وزیٹرز اسے سیدھا آپ کے صفحے پر استعمال کر سکیں گے۔
مزید ٹیکسٹ ٹولز
JavaScript منیفائر
JavaScript کمپریس کریں، نجی طور پر
HTML منیفائر
صفحہ خراب کیے بغیر HTML چھوٹا کریں
کیس کنورٹر
UPPER، lower، Title Case، camelCase اور باقی
ڈپلیکیٹ لائنیں ہٹائیں
دہرائی گئی لائنیں ہٹائیں، فہرست ترتیب دیں اور صاف کریں
الفاظ گنیں
الفاظ، جملے اور پڑھنے کا وقت
حروف گنیں
حروف، بائٹس، اور آپ کی حد اصل میں کیا گنتی ہے