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

כיצד למצוא את קובץ ה- CSS של תבנית הבלוג שלך

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

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

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

בצע אופטימיזציה של קוד ה- CSS

לעצב את קוד ה- CSS שלך

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

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

לדוגמה: ייתכן שתרצה להוסיף שורה חדשה לאחר המאפיין CSS של כל תג div. ייתכן שתרצה גם להסיר את כל החללים הלבנים שמופיעים לאחר נקודה פסיק. הגדר את כל הכללים שבהם אתה רוצה את התוכנית לבצע ולאחר מכן ללחוץ על "עיצוב CSS" כפתור. כל הכללים שצוינו יחולו והקוד יעוצב בצורה הבאה:

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

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

ניתן להשתמש בכלי זה למטרות הבאות:

  • להמיר את כל ערכי צבע RGB כדי הקסדצימלי ובכך צמצום תקורה והגברת היעילות.
  • להסיר את כל הערות רווחים לבנים.
  • לייעל את ערכי הגבול לערכים מודרניים. לדוגמה: גבול התכונה: 2px 5px 2px 5px משתנה לגבול: 2px 5px ;.
  • להמיר ערכים מוחלטים לערכים היחסיים. לדוגמה: התכונה font-size: 18px; ניתן לשנות את גודל הגופן: 2em;
  • ממיר רקע מרובה, גופן, שוליים, ריפוד, תכונות רשימה לתכונה אחת.

נקה את קובץ CSS שלך ולהקטין את גודל

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

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

כמה טיפים

להלן מספר טיפים וטריקים שעליך לזכור בעת כתיבת קוד ה- CSS עבור תבנית הבלוג שלך:

1. השתמש תמיד בגליונות סגנונות חיצוניים במקום להדביק את הקוד כולו לפני התג.

2. השתמש במחלקות אוניברסאליות כדי להימנע מחזרות. לדוגמה: אתה יכול להשתמש div.floatleft בכיתה פשוטה {float: שמאל;} כדי לצוף כל אלמנט שמאלה במקום להשתמש באותה תכונה על מספר כיתות.

3. השתמש בדפדפן CSS קבצים ספציפיים לתיקון באגים. כלומר, אם אתה מבחין באג שמתרחש רק בדפדפן מסוים (בדרך כלל Internet Explorer 6 או גירסאות ישנות יותר), השתמש בגיליון סגנונות נפרד כדי לתקן את הבאג. זה שומר את הסגנון הראשי שלך גיליון מסודר ונקי.

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

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