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

نحوه کار

این ابزار یک توکنایزر CSS دست‌نویس و بدون-وابستگی که کاملاً در جاوااسکریپت ساخته شده استفاده می‌کند — بدون کتابخانه خارجی، بدون تماس سروری. توکنایزر هر کاراکتر را پیش از اعمال هر تبدیلی به‌عنوان کد، کامنت، رشته نقل‌قول، یا مقدار url() طبقه‌بندی می‌کند، که مانع از فاسدکردن محتوای رشته، URIهای داده، یا عبارات calc() توسط قواعد فضای خالی می‌شود.

1. 1
   پاس توکنایزیشن

   CSS ورودی کاراکتر به کاراکتر اسکن می‌شود و به توکن‌های نوع‌دار تقسیم می‌شود: بخش‌های کد خام، کامنت‌های /* ... */، رشته‌های نقل‌قول‌دار (با حفظ توالی‌های گریز)، و بلوک‌های url(...). این تضمین می‌کند تبدیل‌های گام بعدی فقط سینتکس واقعی CSS را لمس کنند — و هرگز محتوای یک رشته لفظی یا URI داده را تغییر ندهند.
2. 2
   مینیفیکیشن یا زیباسازی

   در حالت مینیفای، کامنت‌های معمولی حذف می‌شوند (کامنت‌های /*! license */ نگه داشته می‌شوند)، توالی‌های فضای خالی در توکن‌های کد به یک فاصله تک فشرده می‌شوند، و فضای خالی مجاور علائم { } : ; , > ~ حذف می‌شود. فاصله‌های حول + و - عمداً دست‌نخورده باقی می‌مانند تا عبارات calc() نشکنند. در حالت زیباسازی، کد ابتدا به یک پایه تمیز مینیفای می‌شود، سپس دوباره توکنایز و با ردیابی عمق دو-فاصله‌ای و تشخیص کولون-اعلان دوباره تورفتگی‌دار می‌شود تا کولون‌های property: value از کولون‌های انتخاب‌گر مانند a:hover تمیز داده شوند.
3. 3
   تخمین اندازه Gzip

   پس از تولید خروجی، API بومی CompressionStream مرورگر برای فشرده‌سازی نتیجه با gzip و اندازه‌گیری تعداد بایت حاصل استفاده می‌شود. این یک تخمین واقع‌بینانه اندازه-انتقال می‌دهد که با آنچه یک وب‌سرور با فشرده‌سازی gzip از طریق شبکه ارسال می‌کند مطابقت دارد.
4. 4
   کپی یا دانلود

   CSS پردازش‌شده از طریق Clipboard API در کلیپ‌بورد نوشته می‌شود، یا به‌صورت styles.min.css (حالت مینیفای) یا styles.css (حالت زیباسازی) با استفاده از یک Blob با نوع MIME text/css دانلود می‌شود. درصد کاهش اندازه هنگام تایپ به‌صورت زنده نشان داده می‌شود.

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