استخراج CSS استفاده‌شده از خروجی Coverage کروم
فایل JSON پنل Coverage را رها کنید و یک استایلشیت تحویل بگیرید که فقط قاعده‌هایی را دارد که صفحه اعمال کرده است، همچنان داخل media queryهای خودشان.
تبدیل Coverage JSON به CSS
پنل Coverage در Chrome DevTools نشان میدهد صفحه واقعاً چه مقدار از هر استایلشیت را به کار می‌برد، و دکمه Export (خروجی گرفتن) آن آمار را به شکل JSON ذخیره میکند. این فایل به‌تنهایی کاربرد چندانی ندارد: متن کامل همه فایل‌ها را همراه فهرست‌هایی از موقعیت کاراکترها نگه می‌دارد. این صفحه حذف‌کننده CSS استفادهنشده را روی زبانه JSON پوشش باز میکند که خروجی را به استایل‌شیتی تبدیل میکند که می‌توانید منتشرش کنید.
طوری ضبط کنید که چیزی جا نماند
نتیجه فقط به اندازه ضبط کامل است. ضبط را با دکمه بارگذاری مجدد در پنل شروع کنید تا قاعده‌هایی که هنگام بارگذاری صفحه به کار می‌روند هم ثبت شوند، سپس از هر بخشی از صفحه که یک بازدیدکننده ممکن است استفاده کند استفاده کنید: منوی موبایل، منوهای کشویی، زبانه‌ها، آکاردئون‌ها، پنجره‌های بازشو و فرم‌ها همراه با حالت‌های خطایشان. در حین ضبط، اندازه پنجره را از میان همه breakpointهایتان عبور دهید. هر چیزی که فعال نکنید استفادهنشده در نظر گرفته میشود.
بر سر هر بخش از استایلشیت چه می‌آید
| در استایلشیت | در نتیجه |
|---|---|
| قاعده‌ای که صفحه به کار برده است | حفظ میشود، دقیقاً همانطور که نوشته شده |
قاعدهٔ استفاده‌شده داخل @media، @supports، @container یا @layer | داخل همان بلوک حفظ میشود |
| بلوکی که هیچ قاعدهٔ استفاده‌شده‌ای در آن نمانده | همراه با قاعده‌هایش حذف میشود |
@font-face، @keyframes، @import، @charset | همیشه حفظ میشود |
| قاعده‌ای که صفحه هرگز به کار نبرده است | حذف میشود |
استایلها و اسکریپت‌های درون‌خطی در خروجی
HTML خود صفحه هم در خروجی می‌آید، همراه با بازه‌های بلوک‌های درون‌خطی <style> و <script> آن. ابزار هر بلوک style را از داخل سند بیرون می‌کشد، قاعدههای استفاده‌شده‌اش را نگه می‌دارد و آن را در جدول نتایج به‌عنوان یک استایل درون‌خطی فهرست میکند. فایل‌های JavaScript کنار گذاشته میشوند و خلاصه نتیجه می‌گوید چند ورودی کنار گذاشته شده است.
استفاده از نتیجه
خروجی هر استایلشیت را با توضیحی آغاز میکند که نشانی آن را می‌آورد، پس می‌توانید دوباره آن را تفکیک کنید یا به شکل یک فایل نگه دارید. لینک‌های استایلشیت صفحه را با فایل تازه جایگزین کنید، صفحه را در همه پهناها آزمایش کنید و تا وقتی مطمئن نشده‌اید فایل‌های اصلی را نگه دارید. برای سایتی که با صفحه‌ساز ساخته شده، راهنمای تبدیل صفحه Elementor به HTML و CSS بقیه این انتقال را پوشش میدهد، و وقتی به‌جای ضبط، خود HTML و CSS را دارید، PurgeCSS آنلاین راه مناسب است.