فشردهساز CSS
یک استایلشیت را با حذف توضیحات و فاصله‌ها کوچک کنید، بدون اینکه حتی یک قاعده خراب شود.
فشردهسازی آنلاین CSS
هر بایت CSS باید پیش از اینکه مرورگر بتواند صفحه را نمایش دهد دانلود و تجزیه شود، پس ارزش دارد استایل‌شیت‌ها کوچک بمانند. فشردهسازی هر چیزی را که مرورگر لازم ندارد حذف میکند: توضیحات، تورفتگی و فاصلههای اختیاری. این صفحه همان فرمت‌کنندهٔ کد است که روی CSS تنظیم شده و یک نمونه را برایتان فشرده کرده است.
چه می‌ماند و چه حذف میشود
| قبل | بعد |
|---|---|
.card { margin : 0 auto ; } | .card{margin:0 auto} |
width: calc(100% - 32px); | width:calc(100% - 32px) |
a > b | a>b |
/* comment */ | حذف میشود |
فاصلهٔ داخل calc() باید بماند، چون 100%-32px یک CSS نامعتبر است. همین برای فاصلهٔ داخل 0 auto هم صدق میکند که دو مقدار را از هم جدا میکند.
فشردهسازی کد، فشردهسازی سرور، یا هر دو؟
فشردهسازی کد و فشردهسازی سمت سرور روی هم جمع می‌شوند. Gzip یا Brotli روی سرور معمولاً یک فایل CSS را ۷۰ تا ۸۰ درصد کوچکتر میکند و فشردهسازی کد از قبل، کمی بیشتر هم صرفه‌جویی میکند. اگر ابزار build شما از قبل کد را فشرده میکند، برای production به این صفحه نیازی ندارید؛ این صفحه برای تکه‌هایی است که از build رد نمی‌شوند: استایل‌های درون‌خطی در ایمیل‌ها، CSS حیاتی که در head چسبانده میشود، یا استایلشیت سایتی که مرحلهٔ build ندارد.
ابزارهای مرتبط
برای حذف قاعده‌هایی که صفحه هرگز استفاده نمی‌کند، که خیلی بیشتر از فشردهسازی صرفه‌جویی میکند، از حذف‌کننده CSS استفاده‌نشده استفاده کنید. برای اسکریپت‌های کنار استایلشیت، از فشردهساز JavaScript استفاده کنید.