چطور CSS فشردهشده را طوری قالببندی کنم که خوانا شود؟

CSS فشردهشده را در حالی که زیباسازی انتخاب شده، در کادر ورودی قرار دهید و تورفتگی ۲ یا ۴ فاصله را انتخاب کنید. انتخابگرها و اعلانها در خطوط جداگانه قرار میگیرند. سپس کپی یا دانلود را بزنید تا یک فایل css. دریافت کنید.

آیا میتواند ویژگیهای CSS را به ترتیب حروف الفبا مرتب کند؟

بله. مرتبسازی ویژگیها بهترتیب حروف الفبا را تیک بزنید تا اعلانهای درون هر بلوک بر اساس نام ویژگی مرتب شوند. این فقط درون یک بلوک مرتبسازی مجدد انجام میدهد که اگر به بازنویسی اعلانهای بعدی بر اعلانهای قبلی متکی باشید، میتواند نتیجه را تغییر دهد.

چطور با این ابزار CSS را فشرده کنم؟

به جای زیباسازی، کوچک کردن را انتخاب کنید. فاصلههای سفید و توضیحات حذف میشوند و یک مقایسه اندازه نشان میدهد که خروجی چقدر کوچکتر شده است. دانلود آن را بهصورت minified.css ذخیره میکند.

آیا قوانین media@، nesting و مقادیر ()url را مدیریت میکند؟

بله. تجزیهگر نقلقولها و پرانتزها را دنبال میکند، بنابراین نقطهویرگولها یا آکولادهای درون ()url یا رشتهها باعث شکستن اعلانها نمیشوند. بلوکهای تو در تو مانند media@، supports@ و nesting native CSS در سطوح عمیقتر تورفتگی میخورند.

آیا استایلشیت من جایی بارگذاری میشود؟

خیر. تجزیهگر درون صفحه نوشته شده و CSS شما را هنگام تایپ در مرورگر قالببندی میکند. هیچ چیزی به سرور ارسال نمیشود و از هیچ کتابخانه قالببندی شخص ثالثی استفاده نمیشود.

آیا واقعاً رایگان است؟

بله. همه ابزارها رایگان هستند، بدون حساب کاربری و بدون کارت اعتباری. پردازش بهجای سرورهای ما روی دستگاه شما انجام میشود و همین است که رایگان ماندن آن را ممکن میکند.

آیا در موبایل کار میکند؟

بله. روی مرورگرهای امروزی موبایل در iOS و اندروید اجرا میشود و نیازی به نصب چیزی نیست.

🎨

زیباساز CSS رایگان

CSS فشرده را با تورفتگی یکدست مرتب کنید، یا فشرده‌اش کنید. مرتب‌سازی الفبایی اختیاری ویژگی‌ها برای تفاوت‌های قابل پیش‌بینی.

در مرورگر شما اجرا می‌شودبدون ثبت‌نام، بدون پاپ‌آپورود لازم نیسترایگان برای همیشه

پس از بارگذاری آفلاین کار می‌کند

تورفتگی:

مرتب‌سازی ویژگی‌ها به‌ترتیب حروف الفبا

فایل را اینجا رها کنید یا برای انتخاب کلیک کنید

CSS · پردازش روی دستگاه شما

یا Ctrl+V را بزنید تا از کلیپ‌بورد جای‌گذاری شود

مرور فایل‌ها

CSS فشرده / نامرتب

CSS زیباسازی‌شده

خروجی اینجا نمایش داده می‌شود…

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

CSS تولید را اشکال زدایی کنیدCSS کم شده از سایت های تولید را در قالب قابل خواندگی ببینید تا استایل کردن را پیدا و معکوس کنید.
سبک CSS تیم را اجرا کنیدCSS ارسال شده توسط تیم را از طریق یک beautifier سازگار اجرا کنید تا diff درباره محتوا است نه قالب بندی.
CSS با پیشوند فروشنده را فرمت کنیدCSS با پیشوند فروشنده (خروجی autoprefixer) غالباً بسیاری از نوع -webkit-، -moz-، -ms- دارد. برای بررسی فرمت کنید.
از Pro CSS یاد بگیریدCSS را از سیستم های طراحی معروف با فرمت کردن خروجی آنها کامپایل شده مطالعه کنید.
CSS را برای گزارش های اشکال فرمت کنیدهنگام ثبت اشکالات CSS، CSS فرمت شده برای بازبینی کنندگان بسیار آسان تر برای خواندن و درک است.

نحوه کار

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

1
تکه‌سازی سطح-کاراکتر
تابع walkCss ورودی خام را یک کاراکتر در هر لحظه اسکن می‌کند و حالت نقل‌قول و عمق پرانتز را ردیابی می‌کند تا نقطه‌ویرگول یا آکولادهای درون url()، مقادیر رشته‌ای، یا کامنت‌ها هرگز به‌عنوان جداکننده‌های ساختاری اشتباه گرفته نشوند.
2
تفکیک بلوک و اعلان
وقتی اسکنر یک آکولاد باز سطح-بالا می‌یابد، پیش‌درآمد (انتخاب‌گر یا کلیدواژه at-قاعده) را استخراج می‌کند و بدنه بلوک را بازگشتی پردازش می‌کند — که خود ممکن است قواعد تودرتو (@media، @supports، تودرتویی بومی CSS) داشته باشد که در عمق بازگشتی عمیق‌تری مدیریت می‌شوند.
3
مرتب‌سازی ویژگی و تورفتگی
اعلان‌های درون هر بلوک به یک اجرا جمع می‌شوند، سپس به‌طور اختیاری بر اساس نام ویژگی الفبایی مرتب می‌شوند پیش از نوشته‌شدن با عرض تورفتگی انتخابی (۲ یا ۴ فاصله). حالت مینیفای کاملاً فضای خالی را رد می‌کند و کامنت‌ها را حذف می‌کند.
4
خروجی فوری درون-مرورگر
نتایج هنگام تایپ از طریق یک هوک useMemo ظاهر می‌شوند — چیزی جایی ارسال نمی‌شود. CSS قالب‌بندی‌شده یا مینیفای‌شده می‌تواند در کلیپ‌بورد کپی یا به‌عنوان فایل .css دانلود شود، و پنل تفاوت اندازه در مقایسه با اصلی را نشان می‌دهد.