4 כלים לבדיקת אופטימיזציה של CSS

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

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

הנה 5 כלים טובים שיעזרו לך לבדוק ולייעל CSS.

סוג-o-matic

סוג-o-matic הוא תוסף Firebug לנתח גופנים הנמצאים בשימוש באתר אינטרנט. תוסף זה נותן דוח חזותי בטבלה, הנושאים מאפייני גופן כגון משפחת גופנים, גודל, משקל, צבע, וכן את מספר הפעמים הגופן משמש בדף האינטרנט. באמצעות טבלת הדוחות, תוכל בקלות לייעל את השימוש בגופן, להסיר מה שאינו נחוץ, או לשלב סגנונות הדומים מדי.

CSS מוך

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

CSSGuard

CSSGuard הוא כלי חדש יחסית. הוא בנוי כמודול צומת והוא פועל בכל הפלטפורמות: Windows, OS X ו- Linux. CSS ColorGuard הוא כלי שורת הפקודה אשר יודיע לך אם אתה משתמש בצבעים דומים בגיליון הסגנונות שלך; לדוגמה,. # f3f3f3 הוא די קרוב # f4f4f4, אז אולי כדאי לך לשקול מיזוג בין השניים. CSS ColorGuard הוא להגדרה, אתה יכול להגדיר את סף הדמיון, כמו גם להגדיר את הצבעים שאתה רוצה את הכלי להתעלם.

Dig dig

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

 צבע: #ccc; צבע: #cccccc; צבע: #CCC; צבע: #CCCCCC; 

הצהרות צבע אלה לעשות את אותו הדבר. אתה יכול גם ללכת עם #ccc או עם ההון #CCC כמו תקן. CSS Dig יכול לחשוף גם יתירות זו עבור מאפייני CSS אחרים, ותוכלו להפוך את הקוד שלכם לעקבי יותר.