فرمت‌کنندهٔ CSS

CSS فشرده را خوانا کن؛ تورفتگی دلخواه، هر اعلان در یک خط، بدون دست‌زدن به رشته‌ها

رایگان
همه‌ی این ابزارها داخل مرورگر شما اجرا می‌شوند؛ هیچ داده‌ای به سرور ما ارسال نمی‌شود.
قاعده
اعلان
at-rule
خط خروجی
تمام پردازش داخل مرورگر خودتان انجام می‌شود؛ رشته‌ها، کامنت‌ها و محتوای url() بدون تغییر می‌مانند و هیچ چیزی روی سرور آپلود نمی‌شود.

درباره‌ی فرمت‌کنندهٔ CSS

در یک data URI مثل url(data:image/svg+xml;base64,...) سمی‌کالن بخشی از خود آدرس است، نه جداکنندهٔ اعلان. فرمترهایی که فقط روی { و } و ; برش می‌زنند دقیقاً همین‌جا استایل‌شیت را دو نیم می‌کنند و همین اتفاق برای content: "a { b" هم می‌افتد. این ابزار به‌جای برش متنی، CSS را توکن‌به‌توکن می‌خواند، بنابراین رشته‌ها، کامنت‌ها و محتوای url() دست‌نخورده باقی می‌مانند.

راهنمای استفاده از فرمت‌کنندهٔ CSS

  1. 1

    CSS فشرده را در کادر ورودی بچسبانید؛ خروجی بی‌درنگ ساخته می‌شود.

  2. 2

    تورفتگی را روی ۲ فاصله، ۴ فاصله یا Tab بگذارید.

  3. 3

    جای آکولاد باز را روی «همان خط» یا «خط بعد» تنظیم کنید.

  4. 4

    تیک‌های «هر انتخابگر در یک خط»، «خط خالی بین قاعده‌ها» و «نگه‌داشتن کامنت‌ها» را مطابق سلیقه‌تان بزنید.

  5. 5

    شمارندهٔ قاعده و اعلان را چک کنید و با دکمهٔ کپی خروجی را بردارید.

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

آیا کد من جایی آپلود می‌شود؟

نه. کل تجزیه و بازسازی با JavaScript داخل همان تبِ مرورگر انجام می‌شود و ابزار هیچ درخواست شبکه‌ای نمی‌زند. می‌توانید تب Network در ابزار توسعه‌دهنده را باز بگذارید و ببینید که هنگام مرتب‌سازی هیچ درخواستی ثبت نمی‌شود.

آیا مرتب‌سازی می‌تواند ظاهر سایت را عوض کند؟

این تصور که «فاصله در CSS بی‌معناست» غلط است. فاصله در انتخابگر معنا دارد؛ ‎.a .b‎ یعنی نواده و ‎.a.b‎ یعنی هر دو کلاس روی یک عنصر. داخل calc() هم فاصلهٔ اطراف + و - اجباری است، وگرنه مقدار نامعتبر می‌شود. این ابزار همین فاصله‌های معنادار را از منبع حفظ می‌کند و فقط فاصلهٔ اطراف کاما، دونقطه و ترکیب‌گرهای > و + و ~ را یکدست می‌کند.

وقتی «نگه‌داشتن کامنت‌ها» را خاموش کنم چه اتفاقی می‌افتد؟

این تنها جایی است که خروجی صد در صد هم‌ارز منبع نیست. کامنت حذف‌شده با یک فاصله جایگزین می‌شود تا توکن‌های دو طرفش به هم نچسبند؛ در نتیجه ‎.a/*x*/.b‎ به ‎.a .b‎ تبدیل می‌شود که معنایش با ‎.a.b‎ فرق دارد. اگر در استایل‌شیت‌تان کامنت وسط انتخابگر دارید، این گزینه را روشن نگه دارید.

از CSS تودرتو و at-rule های جدید پشتیبانی می‌کند؟

بله. پارسر عمومی است و هر بلوکی را که با { باز شود دنبال می‌کند، پس تودرتویی بومی CSS با ‎&‎ و همچنین media@، supports@، container@، layer@، keyframes@، font-face@ و page@ به‌درستی تورفتگی می‌گیرند. اگر آکولاد یا رشته‌ای بسته نشده باشد، ابزار خروجی را ترمیم می‌کند و پیام هشدار نشان می‌دهد.