פורמט CSS

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

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

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

בדיקה קטנה מראה מה עושה מעצב CSS זה באינטרנט. הדבק @media (רוחב מקסימלי:600px){.nav a,.nav button{padding:8px 12px;color:#333}} ולחץ על Beautify עם 2 רווחים. שאילתת המדיה פותחת בלוק משלה, כפתור .nav a ו.nav עוברים בשורות נפרדות רמה אחת פנימה, וכל הצהרה יושבת בשורה משלה עם רווח אחרי המעי הגס. בתג הגודל כתוב 73 B → 98 B, +34%, מכיוון שהזחה מוסיפה בתים. לחץ על מזעור על הפלט הזה והוא חוזר ל-73 הבתים המקוריים.