אחד היתרונות העיקריים בשימוש ב CSS הוא הפחתת זמן הטעינה של העמוד.
בעבר על מנת לתת סטייל לטקסט היינו משתמשים בתגית font המון פעמים באותו עמוד,כנ”ל לגבי טבלאות שהיו פזורות בעמוד היינו חוזרים על תגית table ומאפייניה בלי סוף,או גיף מפריד על מנת ליצור ריווחים במקומות שונים בעמוד. כיום כל המאפיינים הללו יכולים להיות ממוקמים בקובץ CSS בודד, כאשר כל פקודה נכתבת פעם אחת בלבד!.
OK, אז לאחר שהבנו את יתרונות השימוש בCSS נפרט את הדרך לחסוך בכתיבת קוד CSS ע”י שימוש נכון בקיצורי מאפיינים.
Font
הדרך הקצרה:
הדרך הארוכה:
line-height: {1.5em;}
font-weight: { bold;}
font-style: { italic;}
font-family: {serif;}
קיצור זה יעבוד אך ורק אם נגדיר את המאפיין :font-size ואת המאפיין font-family במידה ונתעלם ממאפיינים אלו
לא תיהיה השפעה כלל על לשאר המאפיינים.ובמידה ונתעלם משני המאפיינים האחרים font-weight או מfont-varient
הערכים יהיו בברירת המחדל normal.
Background
הדרך הקצרה:
הדרך הארוכה:
background-image: { url(image.gif);}
background-repeat: {no-repeat;}
background-position: { top left;}
במידה ונתעלם מאחד המאפיינים הדפדן יתייחס לערכים בברירת המחדל, במידה ונתעלם מהמאפיין background-position המיקום יהיה top left , במידה ולא נגדיר את ציר השכפול,
השיכפול יהיה ורטיקלי והוריזונטלי.
List
הדרך הקצרה:
הדרך הארוכה:
list-style-type: {disc;}
list-style-position: { outside;}
list-style-image: {url(image.gif)}
כנ”ל לגבי מאפייני list במידה ונתעלם מאחד המאפיינים הערכים יהיו כברירת המחדל.
Margin/Padding
הדרך הקצרה:
הדרך הארוכה:
margin-right: {1px;}
margin-bottom: {3px;}
margin-left: {4px;}
Border
הדרך הקצרה:
הדרך הארוכה:
border-color: {black;}
border-style: {solid;}
מסקנה:
קיצורי מאפיינים בCSS הם הכרחיים בהחלט! ומורידים את משקל העמוד בזמן הורדה,
פחות שורות קוד והרבה יותר נוח לערוך את הקוד בשעת הצורך.
בהצלחה.
מעולה,תודה