فشرده‌ساز 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 ثابت بماند، اما اگر به بازنویسیهای غیرمعمول متکی هستید، می‌توانید آن را خاموش کنید تا فقط فشردهسازی نحوی انجام شود.
چرا CSS را فشرده کنیم؟
CSS رندر را مسدود میکند: مرورگر تا زمانی که استایل‌شیت‌های داخل <head> دانلود و تجزیه نشوند، نمی‌تواند صفحه را نقاشی کند. CSS کوچک‌تر یعنی First Contentful Paint سریع‌تر و Core Web Vitals بهتر که هم به کاربران و هم به رتبهٔ جست‌وجو کمک میکند. برای بهترین نتیجه، فشردهسازی را با gzip یا Brotli روی سرور ترکیب کنید.
پرسش‌های متداول
آیا فشردهسازی CSS بیخطر است؟
آیا از CSS مدرن مانند custom properties، nesting و @layer پشتیبانی میکند؟
--var)، @media، @supports، @layer، @container و سینتکس grid حفظ میشوند.