מכווץ ומיפה CSS בחינם

כיצד זה עובד

כלי זה משתמש במפרק אסימוני CSS כתוב-יד, ללא תלויות, בנוי כולו ב-JavaScript — ללא ספריות חיצוניות, ללא קריאות שרת. המפרק מסווג כל תו כקוד, הערה, מחרוזת מצוטטת, או ערך url() לפני החלת כל שינוי, מה שמונע מכללי רווח לפגוע בתוכן מחרוזות, כתובות data URI, או ביטויי calc().

1. 1
   מעבר פירוק לאסימונים

   ה-CSS הקלט נסרק תו אחר תו ומפוצל לאסימונים מסוגים: מקטעי קוד גולמיים, הערות /* ... */, מחרוזות מצוטטות (שומרות רצפי בריחה), ובלוקי url(...). זה מבטיח שהשינויים בשלב הבא נוגעים רק בתחביר CSS אמיתי — לעולם לא בתוכן של מחרוזת מילולית או כתובת data URI.
2. 2
   מזעור או ייפוי

   במצב מזעור, הערות רגילות מוסרות (הערות /*! license */ נשמרות), רצפי רווח בתוך אסימוני קוד מכווצים לרווח בודד, ורווח סמוך-לפיסוק סביב { } : ; , > ~ מוסר. רווחים סביב + ו- נשארים בכוונה כדי לא לשבור ביטויי calc(). במצב ייפוי, הקוד תחילה ממוזער לבסיס נקי, ואז מפורק ומוזח מחדש עם מעקב עומק של שני רווחים וזיהוי נקודתיים-הצהרה כדי להבחין נקודתיים property: value מנקודתיים סלקטור כמו a:hover.
3. 3
   הערכת גודל Gzip

   אחרי הפקת הפלט, CompressionStream API המקורי של הדפדפן משמש לדחוס את התוצאה עם gzip ולמדוד את ספירת הבייטים המתקבלת. זה נותן הערכת גודל-העברה מציאותית שתואמת מה ששרת אינטרנט עם דחיסת gzip היה שולח ברשת.
4. 4
   העתק או הורד

   ה-CSS המעובד נכתב ללוח דרך Clipboard API, או מורד כ-styles.min.css (מצב מזעור) או styles.css (מצב ייפוי) באמצעות Blob עם סוג MIME של text/css. אחוז הפחתת הגודל מוצג בזמן אמת תוך כדי ההקלדה.

כלים קשורים