فشرده‌سازی CSS

CSS سبک‌تر بدون تغییر ظاهر

ابزار کامنت‌ها و فاصله‌ها را حذف می‌کند، #ffffff را به #fff و 0px را به 0 کوتاه می‌کند و مقادیر تکراری را ادغام می‌کند.

نتیجه یک خط است که مثل نسخهٔ اصلی کار می‌کند؛ فایل خوانا را برای ویرایش نگه دارید.

طرز فشرده‌سازی CSS

1. کد CSS را بچسبانید.
2. ارسال کنید.
3. نتیجه را کپی کنید.

نمونه‌ها

استایل دکمه

ورودی:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

خروجی:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

کامنت و فاصله‌ها حذف شدند، #ffffff به #fff و 0.80 به .8 تبدیل شد.

کاربردهای رایج

• افزایش سرعت سایت.
• بهبود امتیاز PageSpeed.
• کاهش حجم قالب‌ها.

نکته‌های کاربردی

• کامنت‌های لایسنس هم حذف می‌شوند.
• CSS نامعتبر ممکن است حذف یا تغییر کند.
• فایل خوانا را برای ویرایش نگه دارید.
• JavaScript را با فشرده‌سازی JS کوچک کنید.

پرسش‌های متداول

CSS سایت‌های راست‌چین (RTL) را پشتیبانی می‌کند؟

بله، ویژگی‌هایی مثل direction حفظ می‌شوند.

ظاهر عوض می‌شود؟

اگر کد معتبر باشد نه.

چطور دوباره مرتبش کنم؟

از فایل اصلی استفاده کنید؛ فشرده‌سازی به‌راحتی برنمی‌گردد.

قواعد بلااستفاده را حذف می‌کند؟

نه.

ابزارهای مرتبط

• فشرده‌سازی HTML: کد HTML را فشرده کنید.
• فشرده‌سازی JavaScript: کد JavaScript را فشرده کنید.
• تبدیل کد رنگ: رنگ را به قالب‌های مختلف تبدیل کنید.
• محاسبه حجم متن: حجم متن را به بایت حساب کنید.
• بررسی پشتیبانی HTTP/2: ببینید سایت از پروتکل HTTP/2 پشتیبانی می‌کند یا نه.