این ابزار درست کار نمیکند؟
دربارهٔ ابزار «فشردهسازی CSS آنلاین»
این ابزار CSS را با حذف فضای خالی غیرضروری، نظرات و نحو زائد minify میکند. خروجی از نظر عملکردی با ورودی یکسان است اما به طور قابل توجهی کوچکتر — اغلب کاهش ۳۰-۵۰٪ در اندازه فایل — که به معنای بارگذاری سریعتر صفحه و هزینه پهنای باند کمتر است.
عملیاتهای رایج minify شامل حذف فضای خالی، حذف نظرات، کوتاه کردن رنگهای hex (#FFFFFF → #FFF)، فروریزش چندین انتخابکننده که اعلانهای یکسان دارند، و حذف واحدهای صفر (0px → 0) است.
قبل از استقرار در تولید، minifier را روی سبکهای خود اجرا کنید. خروجی هنگام تجزیه توسط مرورگرها دقیقاً حفظ میشود — فقط قالببندی قابل خواندن توسط انسان از بین میرود. نقشههای منبع میتوانند نسخه minify شده را به اصل برای اشکالزدایی نگاشت کنند.
چطور از این ابزار استفاده کنم؟
چطور یک stylesheet CSS را برای production فشرده کنم؟
CSS را بچسبانید
stylesheet کامل (یا فقط یک block) را در فیلد «CSS» قرار دهید. comment، newline و indentation حذف میشوند. رشتهها و literalهای url() دستنخورده میمانند.
«اجرا» را بزنید
خروجی یک فیلد `minified` بهعلاوهٔ `savedPercent` که نشان میدهد خروجی چقدر کوچکتر از ورودی است. صرفهجویی معمول: ۲۰-۴۰٪ روی CSS دستی، کمتر روی frameworkهای از قبل بهینهشده.
چه چیزی حذف میشود
Block (`/* … */`) و هر whitespace ناایمن (اطراف `{ } : ; ,`). سمیکالنهای پایانی قبل از `}` بسته به minifier نگهداشته میشوند (برای برخی parserهای legacy ایمنتر) یا حذف میشوند — اگر byte دقیق مهم است، خروجی را ببینید.
هشدارها
selectorهای تکراری را merge نمیکند، نامهای color را کوتاه نمیکند (`#ffffff` بهجای `#fff` میماند)، declarationها را reorder نمیکند. برای minification تهاجمیتر از ابزار اختصاصی مانند csso یا lightningcss در build خود استفاده کنید.