# מכווץ CSS

URL: https://shahid09.is-a.dev/he/tools/css-minifier/
Author: Muhammad Shahid (https://shahid09.is-a.dev/)
כלי חינמי · רץ בדפדפן שלכם

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

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

## איך משתמשים

1. **הדביקו CSS.** הוא מתכווץ תוך כדי הקלדה.
2. **בחרו אפשרויות.** איחוד כללים לקובץ קטן יותר, או שמירת הערות רישיון.
3. **העתיקו את התוצאה.** בדקו את החיסכון והשתמשו ב־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](https://shahid09.is-a.dev/he/tools/javascript-minifier/), וסדרו את הקוד ב[מעצב HTML](https://shahid09.is-a.dev/he/tools/html-formatter/).

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

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

## קשור

- [מכווץ JavaScript](https://shahid09.is-a.dev/he/tools/javascript-minifier/)
- [מעצב HTML](https://shahid09.is-a.dev/he/tools/html-formatter/)
- [ממיר צבעים](https://shahid09.is-a.dev/he/tools/color-converter/)

## מקורות

- [MDN: Minification](https://developer.mozilla.org/en-US/docs/Glossary/Minification)
- [CSSO](https://github.com/css/csso)