زیباساز و فشرده‌ساز CSS

تنظیم مجدد تورفتگی‌های CSS نامرتب برای خوانایی آسان‌تر، یا فشرده‌سازی آن برای انتشار با حجم کمتر — به همراه حالت ایمن که هرگز ترتیب قوانین شما را تغییر نمی‌دهد.

تورفتگی
فشرده‌سازی
برای زیباسازی یا فشرده‌سازی، کد CSS را جای‌گذاری یا تایپ کنید.

کد CSS شما در مرورگر خودتان زیباسازی و فشرده می‌شود. هیچ اطلاعاتی به BroBroGo ارسال نمی‌گردد.

سوالات متداول

تفاوت بین زیباسازی (beautify) و فشرده‌سازی (minify) چیست؟

قابلیت Beautify فاصله‌گذاری و تورفتگی‌های استایل‌های شما را مجدداً تنظیم می‌کند تا خواندن و ویرایش آن‌ها آسان شود. Minify دقیقاً برعکس عمل می‌کند — فاصله‌های خالی و کامنت‌های غیرضروری برای مرورگر را حذف کرده و مقادیری مانند رنگ‌ها را کوتاه‌تر می‌کند تا حجم فایل کاهش یافته و سریع‌تر بارگذاری شود. هنگام کار زیباسازی کنید و قبل از انتشار، فشرده‌سازی نمایید.

تنظیمات فشرده‌سازی Safe و Optimized چه کاری انجام می‌دهند؟

حالت Safe فقط فاصله‌های خالی و کامنت‌ها را حذف کرده و مقادیر را کوتاه می‌کند، در حالی که تمام قوانین را دقیقاً در همان جایی که نوشته‌اید باقی می‌گذارد. حالت Optimized فراتر رفته و سلکتورها و قوانین تکراری را برای داشتن فایلی کوچک‌تر ادغام می‌کند — این حالت ممکن است ترتیب قوانین را تغییر دهد، بنابراین در استایل‌شیت‌هایی که به ترتیب منبع وابسته هستند، بهتر است قبل از انتشار یک بررسی سریع انجام دهید. کامنت‌هایی که با /*! … */ مشخص شده‌اند در هر دو حالت حفظ می‌شوند.

آیا فشرده‌سازی ظاهر صفحه من را تغییر می‌دهد؟

در حالت Safe خیر — استایل‌های شما دقیقاً به همان شکل رندر می‌شوند. این حالت فاصله‌های خالی را حذف، کامنت‌های معمولی را پاک و مقادیر را به اشکال معادل کوتاه‌تر بازنویسی می‌کند (مانند تبدیل #ffffff به #fff) و هرگز پیشوندهای مرورگر (vendor prefixes) یا سینتکس‌های مدرن شما را تغییر نمی‌دهد. حالت Optimized قوانین را نیز ادغام می‌کند که در اکثر استایل‌شیت‌ها خروجی کاملاً یکسانی دارد، اما اگر کار شما به ترتیب قوانین وابسته است، ارزش بررسی دارد.