איך אני מפרמט CSS מכווץ כך שיהיה קריא?

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

האם הוא יכול למיין מאפייני CSS לפי סדר אלפביתי?

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

איך אני מכווץ CSS עם הכלי הזה?

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

האם הוא מטפל בחוקי @media, קינון וערכי url()?

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

האם גיליון הסגנונות שלי מועלה לאנשהו?

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

האם זה באמת בחינם?

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

האם זה עובד בנייד?

כן. זה פועל בדפדפנים ניידים עדכניים ב-iOS וב-Android, ללא התקנה.

🎨

מייפה CSS בחינם

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

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

פועל לא-מקוון לאחר טעינה

כניסה:

מיין מאפיינים לפי א-ב

שחרר קובץ כאן, או לחץ כדי לעיין

CSS · מעובד במכשיר שלך

או הקישו Ctrl+V כדי להדביק מהלוח

עיין בקבצים

CSS מכווץ / לא מסודר

CSS מעוצב

הפלט יופיע כאן…

שימושים נפוצים

דבוג CSS ייצורצפה ב-CSS מינימיזציה מאתרי ייצור בפורמט קריא כדי למצוא ולהנדסת לאחור סגנון.
אכוף סגנון CSS של צוותהרץ CSS שהוגש בצוות דרך beautifier עקבי כך diffs דבר עם תוכן, לא עיצוב.
עצב CSS עם קידומת ספקCSS עם קידומת ספק (פלט autoprefixer) כולל לעתים קרובות המון גרסאות -webkit-, -moz-, -ms-. עצבו לבדיקה.
למד מ-Pro CSSלימוד CSS מ-design systems מפורסמות על ידי עיצוב הפלט המועבר שלהם.
עצב CSS לדוחות באגיםבעת הגשת באגי CSS, CSS בעיצוב הוא הרבה יותר קל למבחנים לקרוא והבין.

כיצד זה עובד

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

1
פירוק לאסימונים ברמת תו
פונקציית walkCss סורקת את הקלט הגולמי תו אחר תו, עוקבת אחרי מצב ציטוט ועומק סוגריים כך שנקודה-פסיק או סוגריים מסולסלים בתוך url(), ערכי מחרוזת, או הערות לעולם לא מוטעים למפרידים מבניים.
2
הפרדת בלוק והצהרה
כשהסורק מוצא סוגריים מסולסלים פותחים ברמה עליונה, הוא מחלץ את המבוא (הסלקטור או מילת מפתח at-rule) ומעבד רקורסיבית את גוף הבלוק — שיכול בעצמו להכיל כללים מקוננים (@media, @supports, קינון CSS מקורי) המטופלים בעומק רקורסיה עמוק יותר.
3
מיון מאפיינים והזחה
הצהרות בתוך כל בלוק נאספות לרצף, ואז ממוינות אופציונלית אלפביתית לפי שם המאפיין לפני שהן נכתבות עם רוחב ההזחה שנבחר (2 או 4 רווחים). מצב מזעור מדלג לגמרי על רווחים ומסיר הערות.
4
פלט מיידי בדפדפן
התוצאות מופיעות תוך כדי הקלדה דרך hook של useMemo — שום דבר לא נשלח לשום מקום. ה-CSS המעוצב או המוקטן ניתן להעתקה ללוח או להורדה כקובץ .css, והפאנל מציג את הפרש הגודל לעומת המקור.