כיצד אוכל לצמצם את CSS בקוד VS?

לקוד VS אין פקודת Minify מובנית, אז אתה מתקין הרחבה (כגון פקודת "minify") או מפעיל כלי בנייה כמו esbuild, Lightning CSS או CSSNANO בשמירה. לחד-פעמי מהיר מבלי להגדיר דבר, הדבק את ה-CSS שלך כאן ולחץ על Minify - הוא פועל בדפדפן ומציג את החיסכון המדויק של Byte.

האם הקטנה שוברת את ה-CSS שלי?

לֹא . המזעור הזה מסיר רק תווים מיותרים: הערות, רווח לבן נוסף, נקודות חצי פסיק נגררות וסיומות יחידות באורכי אפס. הוא מנתח מילות מחרוזת, ערכי url() וביטויי calc() לפני נגיעה בכל דבר, כך שמבנים רגישים לרווח לבן כמו calc(100% - 20px) ובוררי צאצאים כגון div :hover יוצאים בת-עבור-בייט זהה מבחינה סמנטית.

כמה חוסך CSS מזעור בפועל?

גיליונות סגנונות בכתב יד מתכווצים בדרך כלל ב-25-40%; קבצים בעלי הערות כבדות יכולים לרדת יותר ממחציתם. אם אתה משרת gzip או brotli, החיסכון בחוט קטן יותר - לרוב 5-15% על גבי הדחיסה - אך גם קלט ממוזער נדחס מהר יותר ומנתח מהר יותר בדפדפן. תג החיסכון מציג את המספרים המדויקים שלך כך שלעולם לא תצטרך לנחש.

למה אני צריך לצמצם את CSS אם השרת שלי כבר משתמש ב-gzip?

gzip ו-minification הם משלימים, לא ניתנים להחלפה. gzip לא יכול להסיר הערות או לקצר את #ffffff ל-#fff - הוא יכול רק לקודד אותם בצורה קומפקטית יותר - כך ש-minify-then-gzip תמיד קטן יותר מ-gzip בלבד. הדפדפן גם צריך לפרק ולנתח את הטקסט המקורי המלא, וניתוח CSS נמצא בנתיב הרינדור הקריטי.

האם הערות הרישיון שלי /*! הוסר?

לֹא . הערות שמתחילות ב-/*! נשמרות כברירת מחדל, בעקבות אותה מוסכמה כמו Terser, CSSNANO ו-CLEAN-CSS. זה אומר שכותרות רישיון מספריות כמו Normalize.css שורדות מזעור, שומר אותך תואם לדרישות הייחוס.

האם זה בטוח לקצר את #AABCBC ל-#ABC?

כן - צבע משושה בן שלוש ספרות מוגדר על ידי מפרט ה-CSS כמרחיב כל ספרה, כך ש-#ABC ו-#AABCBC הם בדיוק באותו צבע. הכלי מקצר רק ערכים בני שש ספרות כאשר כל זוג חוזר על עצמו, והוא אף פעם לא נוגע בצבעי קסם בני שמונה ספרות עם ערוצי אלפא או משהו בתוך מחרוזת או כתובת URL().

האם הסרת יחידות מאפס ערכים (0px → 0) תגרום לבעיות?

לא לאורכים - מפרט ה-CSS אומר שאורך אפס אינו צריך יחידה, אז שוליים: 0px ושוליים: 0 זהים. הכלי משאיר בכוונה 0%, 0 ו-0 מעלות לבד מכיוון שהיחידות הללו יכולות להיות משמעותיות (0% ב-keyframes הוא בורר, ותזמון האנימציה צריך את היחידה שלו), והוא מדלג על כל דבר בתוך סוגריים כך ש-calc() לעולם לא יושפע.

האם אני יכול לבטל את המינימום של חבילת CSS של ייצור שאין לי את המקור עבורו?

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

האם עלי לצמצם בדפדפן או בצינור הבנייה שלי?

עבור אפליקציית ייצור, שמור על Minification בצינור הבנייה שלך (CSSNano, EsBuild, Lightning CSS) כך שהוא אוטומטי וניתן לחזרה. הכלי הזה זורח לכל השאר: נכסים חד-פעמיים מהירים, סגנונות דוא"ל, סגנונות מוזרקים ב-CMS, בדיקה כמה קובץ יתכווץ או ייפוי חבילה במהלך תקרית כאשר אינך יכול לבנות מחדש.

האם הכלי הזה תומך ב-SCSS, פחות או ב-CSS מקונן?

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

האם ה-CSS שלי מועלה לשרת?

לֹא . הקטנה וייפוף פועלים לחלוטין בדפדפן שלך עם JavaScript רגיל - שום דבר לא מועבר, נרשם או מאוחסן בשום מקום. אתה יכול לאמת זאת בלשונית רשת: לא מוגשת בקשה כאשר אתה לוחץ על Minify. זה אפילו עובד במצב לא מקוון לאחר שהדף נטען.

ממ

ממזער ומיופי של CSS

צמצם את ה-CSS כדי לחתוך את גודל הקובץ או לייפות גיליונות סגנונות ממוזערים לאיתור באגים

Indent:

Input CSS

Output

Output will appear here...

מהו CSS Minifier & Beautifier?

CSS Minifier & Beautifier הוא כלי גיליון סגנונות דו-כיווני: הוא דוחס CSS על ידי הסרת כל מה שהדפדפן אינו צריך - הערות, רווח לבן, נקודות פסיק מיותרות, צבעי משושה ארוכים ויחידות על אפס ערכים - והוא יכול להפוך את התהליך, ולהרחיב חבילת ייצור בשורה אחת חזרה לכללים קריאים, מצוינים כהלכה. כל בייט שאתה מפשיט מגיליון סגנונות חוסם רינדור הוא בייט שהדפדפן מוריד ומנתח מוקדם יותר, מה שמזין ישירות מדדי ליבה של חיוני אינטרנט כמו צבע ראשון וצבע תוכן גדול יותר.

הממזער הוא שמרני בכוונה. הוא מודע לחלוטין למחרוזת מילולית, ערכי url() וביטויי calc(), כך שהוא לעולם לא מסיר את הרווח הלבן ש-calc(100% - 20px) תלוי בו, לעולם לא משכתב טקסט דמוי צבע בתוך מחרוזת תוכן, ולעולם לא נוגע במרווח שמבדיל את div :hover מ-div:hover. בגיליונות סגנונות טיפוסיים בכתב יד אתה יכול לצפות להקטנת גודל של 25-40% לפני gzip; בשילוב עם gzip או brotli על החוט, הקטנה עדיין מגלחת פרוסה משמעותית מכיוון שהדחיסה עובדת טוב יותר בקלט חוזר ונשנה ללא הערות.

הכל פועל ב-100% צד הלקוח בדפדפן שלך. ה-CSS שלך לעולם אינו מועלה, נרשם או מאוחסן באף שרת, מה שאומר שאתה יכול להדביק בבטחה קוד עיצוב-מערכת קנייני, סגנונות מוצר שלא פורסמו או עבודת לקוח. זה גם עובד במצב לא מקוון ברגע שהדף נטען - שימושי כאשר אתה צריך מעבר מינימום מהיר מבלי לחבר צינור פוסט CSS או ESBuild מלא.

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

כיצד להשתמש ב-CSS Minifier & Beautifier?

הדבק את ה-CSS שלך
שחרר את גיליון הסגנונות שלך לאזור הקלט - כלל בודד, קובץ רכיב או חבילת ייצור מלאה. גם CSS מעוצב וגם CSS מתקבל.
בחר Minify או BeautiFy
לחץ על Minify כדי לדחוס לייצור, או לייפות כדי להרחיב קוד ממוזער להצהרה אחת בכל שורה עם שורה ריקה בין כללים. לייפות, בחר תחילה את ההזחה המועדפת עליך.
בדוק את תג החיסכון
הכלי מדווח על הגודל המדויק של לפני/אחרי ואחוז השינוי (למשל "12.4 KB → 8.1 KB, −34%"), כך שתדע בדיוק מה הטרנספורמציה קנתה לך לפני שאתה שולח אותו.
העתק או הורד
העתק את התוצאה ללוח שלך בלחיצה אחת, או הורד אותה כקובץ .css מוכן לכניסה לפלט ה-build או CDN שלך.

תכונות מפתח

מזעור בטוח, מודע לתחביר
מכבד מחרוזת מילולית, ערכי url() ומרווח calc() - הוא נדחס באגרסיביות מבלי להשחית CSS חוקי
קיצור Hex ו-Zero-Value
שכתב את #FFFFFF ל-#FFF ו-0PX ל-0 היכן שבטוח, סוחט בתים נוספים מעבר להסרת רווח לבן רגיל
שימור הערות רישיון
שומר /*! הערות באנר שלמות כך שכותרות רישיון הספרייה שורדות מזעור, התאמת התנהגות סטנדרטית של כלי בנייה
בלחיצה אחת ייפי
מרחיב חבילות ממוזערות לכללים קריאים עם הזחה של 2, 4 או 8 שטח הניתנים להגדרה עבור ניפוי באגים בבעיות ייצור

Frequently Asked Questions

Minification CSS הוא תהליך של הסרת כל תו שדפדפן אינו צריך לעבד גיליון סגנונות - הערות, רווח לבן, מעברי שורות, נקודה-פסיק נגררת - וקיצור ערכים בטוחים כמו #FFFFFF ל-#FFFF. התוצאה היא CSS זהה מבחינה פונקציונלית בפחות בתים, אשר מוריד ומנתח מהר יותר. מכיוון ש-Stylesheets חוסמים רינדור, CSS קטן יותר משפר מדדים כמו First Contentful Paint.