نحوه استفاده
- CSS را در کادر ورودی جای‌گذاری کنید، یک فایل .css باز کنید یا نمونه را امتحان کنید.
- برای کد خوانا «زیباسازی» یا برای کوچک‌ترین خروجی «فشرده‌سازی» را انتخاب کنید.
- هنگام زیباسازی، ۲ فاصله، ۴ فاصله یا تب را انتخاب کنید.
- نتیجه را کپی کنید یا آن را به‌صورت فایل .css بارگیری کنید. اگر براکت‌ها یا نقل‌قول‌ها نامتوازن باشند، خطا شماره خط و ستون را نشان می‌دهد.
نحوه کار
فرمت‌کننده ابتدا استایل‌شیت را به توکن‌ها تقسیم می‌کند: رشته‌های درون گیومه تکی یا دوتایی، مقادیر url(…)، توضیحات، آکولادها و نقطه‌ویرگول‌ها. از آنجا که رشته‌ها و url() به‌صورت توکن واحد هستند، نقطه‌ویرگول داخل یک data URI یا آکولاد داخل content: "{ }" ساختار را به هم نمی‌ریزد و محتوای آن‌ها عیناً کپی می‌شود.
زیباسازی هر انتخابگر از فهرست انتخابگرها را در خط جداگانه‌ای قرار می‌دهد، اطراف ترکیب‌کننده‌های فرزند، خواهر/برادر و مجاور (>, ~, +) فاصله می‌گذارد و هر اعلان را به‌صورت «property: value;» در خط خودش می‌نویسد. بلوک‌های داخل @media، @supports، @layer، @container و تودرتویی native CSS به‌ازای هر سطح، یک مرحله تورفتگی می‌گیرند. نقطه‌ویرگول جاافتاده پس از آخرین اعلان هر بلوک اضافه می‌شود. توضیحات همان‌جا که هستند باقی می‌مانند.
فشرده‌سازی توضیحات را حذف می‌کند (به‌جز اعلان‌های مجوز /*! … */)، فاصله‌های خالی را جمع می‌کند، فاصله‌های دور آکولادها، دونقطه‌ها، نقطه‌ویرگول‌ها، ویرگول‌ها و ترکیب‌کننده‌های انتخابگر را حذف می‌کند و نقطه‌ویرگول پیش از هر آکولاد بسته را برمی‌دارد. فاصله‌هایی که معنا را تغییر می‌دهند حفظ می‌شوند: ترکیب‌کننده فرزند در «.a .b»، فاصله در «a :focus» و فاصله‌های داخل مقادیری مانند calc(100% - 2px). «! important» به «!important» عادی‌سازی می‌شود.
ابزار مقادیر را بازنویسی نمی‌کند: رنگ‌ها، واحدها و صفرها همان‌طور که نوشته شده‌اند باقی می‌مانند و قاعده‌ها ادغام یا بازچینی نمی‌شوند. فایل‌های SCSS یا Less با تودرتویی ساده معمولاً کار می‌کنند، اما نحو خاص خودشان مانند توضیحات // یا mixinها درک نمی‌شود.
نمونه‌ها
خواندن یک فایل فریمورک فشرده‌شده
بخشی از bootstrap.min.css تک‌خطی را جای‌گذاری کنید و Beautify با 2 فاصله را انتخاب کنید تا هر قاعده، media queryها و قاعده‌های تودرتوی آن‌ها را در خطوط جدا و تورفته ببینید.
آماده‌سازی یک استایل‌شیت دست‌نویس
یک استایل‌شیت 12 KB همراه با توضیحات و تورفتگی را پیش از افزودن به‌صورت inline به قالب ایمیل یا head صفحه فشرده کنید. خلاصه، تعداد نویسه‌ها را پیش و پس از فشرده‌سازی نشان می‌دهد.
پیدا کردن آکولاد جاافتاده
یک استایل‌شیت از میانه به بعد اعمال نمی‌شود. فرمت‌کننده پیام «This { is never closed with a matching }» را همراه با خط قاعده‌ای که آکولاد بسته آن جا افتاده گزارش می‌دهد.
پرسش‌های متداول
آیا CSS فشرده‌شده با این ابزار برای استفاده در production امن است؟
این ابزار فقط توضیحات و فاصله‌های خالی‌ای را حذف می‌کند که CSS نادیده می‌گیرد، بنابراین قاعده‌ها همان رفتار را دارند. بهینه‌سازی‌های عمیق‌تر ابزارهای build مانند ادغام قاعده‌ها یا کوتاه‌کردن رنگ‌ها را انجام نمی‌دهد، در نتیجه خروجی ممکن است کمی بزرگ‌تر از خروجی آن‌ها باشد.
چرا فاصله در «a :focus» حفظ می‌شود؟
در یک انتخابگر، فاصله همان ترکیب‌گر نسل است. «a :focus» یعنی عنصری فوکوس‌شده درون یک پیوند، در حالی که «a:focus» یعنی خودِ پیوند فوکوس‌شده. حذف آن فاصله عناصر منطبق را تغییر می‌دهد.
آیا می‌تواند SCSS یا Less را قالب‌بندی کند؟
قواعد تودرتوی معمولی درست قالب‌بندی می‌شوند. نحو مخصوص پیش‌پردازنده مانند کامنت‌های //، میکسین‌های دارای آرگومان یا بلوک‌های @if درک نمی‌شود و ممکن است به‌شکل نامناسبی قالب‌بندی شود؛ بنابراین نتیجه را بررسی کنید.
آیا هنگام فشرده‌سازی کامنت‌های مجوز حذف می‌شوند؟
کامنت‌هایی که با /*! شروع می‌شوند حفظ می‌شوند؛ این روش معمول برای اعلان‌های مجوز و حق نشر است. همه کامنت‌های دیگر حذف می‌شوند.
حریم خصوصی
CSS شما فقط در مرورگر شما پردازش می‌شود. هیچ چیزی بارگذاری، ذخیره یا در تحلیل‌ها لحاظ نمی‌شود.