כלי חינמי · רץ בדפדפן שלכם

מכווץ CSS

הקטינו CSS בהסרת הערות ורווחים ובקיצור ערכים, בלי לשנות את פעולתו.

CSS

גם איחוד כללים (קטן יותר, אבל בדקו את התוצאה) שמירת הערות רישיון /*!

CSS מכווץ

תשובה קצרה

הדביקו CSS וקבלו גרסה מכווצת, עם הבתים שנחסכו. הכלי מסיר הערות ורווחים ומקצר ערכים, כך ש־#ffffff הופך ל־#fff ו־0px הופך ל־0, בעזרת מנוע CSSO המוכח. הגדרה נוספת גם מאחדת כללים לקובץ קטן יותר, וכדאי אז לבדוק את הדף. הקוד נשאר בדפדפן שלכם.

איך משתמשים

הדביקו CSS. הוא מתכווץ תוך כדי הקלדה.
בחרו אפשרויות. איחוד כללים לקובץ קטן יותר, או שמירת הערות רישיון.
העתיקו את התוצאה. בדקו את החיסכון והשתמשו ב־CSS בייצור.

דוגמה

הרווחים נעלמים, ו־#ffffff ו־0px מתקצרים:

קלט

body {
  margin: 0px;
  /* page colour */
  color: #ffffff;
}

פלט

body{margin:0;color:#fff}

שגיאות נפוצות ואיך לתקן אותן

העיצוב השתנה אחרי האיחוד: כבו את איחוד הכללים. בחלק מהמקרים סדר הכללים חשוב.
לא ניתן לקרוא את ה־CSS: ייתכן שסוגר או מירכאה לא מאוזנים. בדקו ליד השורה שדווחה.

שאלות נפוצות

מה עושה כיווץ CSS?

הוא מסיר מה שהדפדפן לא צריך, כמו הערות, רווחים וערכים חוזרים, וכותב ערכים בצורה קצרה. העיצוב נשאר זהה.

כמה קטן יהיה ה־CSS?

לעיתים קרובות 20 עד 50%, תלוי בהערות וברווחים. הכלי מציג את החיסכון המדויק.

האם כיווץ זהה ל־gzip?

לא, וכדאי להשתמש בשניהם. כיווץ מסיר טקסט מיותר, ואז gzip או Brotli בשרת דוחסים את השאר.

האם כיווץ יכול לשבור CSS?

כיווץ בסיסי בטוח מאוד. "איחוד כללים" מזיז כללים, וזה יכול לעיתים לשנות תוצאה כשהסדר חשוב, אז בדקו את הדף.

האם לשמור את הקובץ המקורי?

כן. ערכו את הגרסה הקריאה וכווצו אותה לייצור, כי קשה לקרוא קובץ מכווץ.

מהן הערות /*! ?

הערות עם סימן קריאה, לרוב הודעות רישיון. הפעילו "שמירת הערות רישיון" כדי להשאיר אותן.

האם יש תמיכה ב־CSS מודרני?

כן, כולל משתנים, grid ו־media queries. קינון מובנה עובר עם דחיסה קלה.

האם הקוד מועלה?

לא. הוא מכווץ בדפדפן.

האם לכווץ גם JavaScript?

כן, מאותה סיבה. השתמשו במכווץ JavaScript, וסדרו את הקוד במעצב HTML.

אפשר להחזיר CSS מכווץ לקריא?

מעצב קוד משחזר את הפריסה, אבל הערות שהוסרו כאן אבדו, לכן שמרו את הקובץ המקורי.