איך להשתמש בו

הדביקו CSS לתיבת הקלט, פתחו קובץ .css או נסו את הדוגמה.
בחרו באפשרות ייפוי לקוד קריא או באפשרות מזעור לפלט הקטן ביותר.
בעת הייפוי, בחרו 2 רווחים, 4 רווחים או טאבים.
העתיקו את התוצאה או הורידו אותה כקובץ .css. אם הסוגריים המסולסלים או המרכאות אינם מאוזנים, השגיאה מציגה את השורה והעמודה.

איך זה עובד

המעצב מפצל תחילה את גיליון הסגנונות לאסימונים: מחרוזות במרכאות בודדות או כפולות, ערכי url(…), הערות, סוגריים מסולסלים ונקודה-פסיק. מכיוון שמחרוזות ו-url() הם אסימונים בודדים, נקודה-פסיק בתוך URI של נתונים או סוגר מסולסל בתוך content: "{ }" לעולם לא מבלבלים את המבנה, והתוכן שלהם מועתק בדיוק.

Beautify מציב כל בורר מרשימת בוררים בשורה משלו, מוסיף רווחים סביב המשלבים child, sibling ו-adjacent (>, ~, +), וכותב כל הצהרה כ-“property: value;” בשורה משלו. בלוקים בתוך @media, @supports, @layer, @container וקינון CSS מקורי מוזחים רמה אחת לכל עומק. נקודה-פסיק חסרה לאחר ההצהרה האחרונה של בלוק מתווספת. ההערות נשמרות במקומן.

Minify מסיר הערות (מלבד הודעות רישיון /*! … */), מכווץ רווחים לבנים, מסיר רווחים סביב סוגריים מסולסלים, נקודתיים, נקודה-פסיק, פסיקים ומשלבי בוררים, ומסיר את הנקודה-פסיק לפני כל סוגר מסולסל סוגר. רווחים שמשנים את המשמעות נשמרים: משלב ה-descendant ב-“.a .b”, הרווח ב-“a :focus”, והרווחים בתוך ערכים כמו calc(100% - 2px). “! important” מנורמל ל-“!important”.

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

דוגמאות

קריאת קובץ framework ממוזער

הדבק קטע של bootstrap.min.css בשורה אחת ובחר ב-Beautify עם 2 רווחים כדי לראות כל כלל, את שאילתות המדיה ואת הכללים המקוננים שלהן בשורות נפרדות ומוזחות.

הפצת גיליון סגנונות שנכתב ידנית

מזערו גיליון סגנונות בגודל 12 KB המכיל הערות והזחות לפני הוספתו ישירות לתבנית אימייל או ל-head של דף. הסיכום מציג את מספר התווים לפני ואחרי.

מציאת סוגר חסר

גיליון סגנונות מפסיק לחול באמצע הקובץ. כלי העיצוב מדווח “הסוגר { הזה לעולם לא נסגר עם } תואם” ומציג את שורת הכלל שחסר בה סוגר הסוגר.

שאלות נפוצות

האם CSS ממוזער מהכלי הזה בטוח לשימוש בסביבת ייצור?

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

מדוע נשמר רווח ב־“a :focus”?

בסלקטור, רווח הוא מחבר צאצאים. “a :focus” פירושו אלמנט ממוקד בתוך קישור, בעוד “a:focus” פירושו קישור ממוקד. הסרת הרווח תשנה אילו אלמנטים יימצאו.

האם הכלי יכול לעצב SCSS או Less?

כללי קינון רגילים עוברים עיצוב תקין. תחביר הייחודי למעבדים מקדימים כמו הערות //, מיקסינים עם ארגומנטים או בלוקי @if אינו מזוהה ועלול לעבור עיצוב מוזר, לכן בדקו את התוצאה.

האם הערות רישיון מוסרות בעת מזעור?

הערות שמתחילות ב־/*! נשמרות, כמקובל בהודעות רישיון וזכויות יוצרים. כל שאר ההערות מוסרות.

פרטיות

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