מכווץ CSS (CSS Minifier)

הדביקו גיליון סגנונות כדי להסיר רווחים והערות, לקצר ערכים כמו #ff0000 → red ולמזג כללים כפולים בעזרת האופטימיזציות המבניות של CSSO.

רץ בדפדפן שלכםבלי הרשמהשום דבר לא מועלה

פלט מכווץ

איך משתמשים בכלי מכווץ CSS

  1. הדביקו CSS או פתחו קובץ .css.
  2. השאירו את ארגון מחדש פעיל כדי למזג כללים והצהרות, או כבו אותו למעבר בטוח שמסיר רווחים בלבד.
  3. השאירו את שמירת הערות רישיון פעיל כדי לשמר הודעות /*! … */.
  4. השוו בין הגודל המקורי, המכווץ ואחרי gzip.
  5. העתיקו את התוצאה או הורידו את output.min.css.

איך עובד כיווץ CSS

הכלי משתמש ב-CSSO (‏CSS Optimizer), שמנתח את גיליון הסגנונות לעץ תחביר ומדפיס אותו מחדש בצורה השקולה הקצרה ביותר. מעבר להסרת רווחים והערות, הוא מבצע שכתובי ערכים בטוחים:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • כללים ריקים והצהרות כפולות מוסרים

מה עושה „ארגון מחדש”?

הארגון מחדש בוחן את כל גיליון הסגנונות: כללים עם הצהרות זהות ממוזגים לרשימת סלקטורים אחת (.a,.b{color:red}), וסלקטורים חוזרים מאוחדים. בגיליונות אמיתיים זה חוסך לעתים קרובות עוד 5–15%. CSSO ממזג רק כשסדר ה-cascade נשמר, אבל אם אתם מסתמכים על דריסות לא שגרתיות, אפשר לכבות את האפשרות ולקבל כיווץ תחבירי בלבד.

למה לכווץ CSS?

CSS חוסם רינדור: הדפדפן לא יכול לצייר את הדף עד שגיליונות הסגנונות שב-<head> הורדו ונותחו. CSS קטן יותר פירושו First Contentful Paint מהיר יותר ו-Core Web Vitals טובים יותר, וזה עוזר גם למשתמשים וגם לדירוג במנועי החיפוש. לתוצאה הטובה ביותר, שלבו כיווץ עם gzip או Brotli בשרת.

שאלות נפוצות

האם בטוח לכווץ CSS?
כן. לרווחים ולהערות אין השפעה על אופן הרינדור של CSS, ושכתובי הערכים של CSSO שקולים לפי המפרט. הארגון מחדש שומר על סדר ה-cascade; כבו אותו אם אתם רוצים את הפלט השמרני ביותר.
האם יש תמיכה ב-CSS מודרני כמו custom properties,‏ nesting ו-@layer?
כן. Custom properties‏ (--var), @media, @supports, @layer, @container ותחביר grid נשמרים.
אפשר לבטל את הכיווץ מאוחר יותר?
כל formatter יכול להוסיף מחדש הזחה ל-CSS מכווץ, אבל הערות שהוסרו אי אפשר לשחזר. שמרו את קובץ המקור המקורי והתייחסו לקובץ המכווץ כתוצר build.
האם גיליון הסגנונות שלי מועלה לאנשהו?
לא. הכיווץ מתבצע בדפדפן שלכם; שום דבר לא נשלח לשרת.

כלים קשורים

מכווץ JavaScript דחיסה ו-mangling של JS עם Terser, כולל נתוני גודל ו-gzip. מכווץ HTML הסרת הערות ורווחים, וכיווץ CSS/JS מוטמעים. מעצב SQL עיצוב או כיווץ SQL ל-PostgreSQL,‏ MySQL,‏ T-SQL,‏ BigQuery ועוד. מעצב JSON עיצוב, כיווץ ובדיקת JSON עם שגיאות לפי שורה ועמודה.