טעינת כללי עיצוב
אנו מעצבים עמודי ווב באמצעות כללי ה-CSS שאנו כותבים וטוענים לתוך הדף. שילוב כללים ממספר מקורות מאפשר לנו גמישות בבניית קוד העיצוב, כך אפשר לטעון למשל ספריית כללי עיצוב חיצונית ולשלב אותה בעיצוב שלנו.
בפרק זה נלמד דרכים שונות לטעון כללי עיצוב ומתי נשתמש בכל אחת.
1. שימוש בקובץ CSS חיצוני
תגית link מאפשרת טעינה של קובץ עיצוב חיצוני באופן הבא:
<link href="style.css" rel="stylesheet">
כשדפדפן קורא דף HTML ומוצא בו התיחסות לקובץ עיצוב חיצוני, הוא מפסיק את פענוח העמוד הנוכחי ועובר לבקש את קובץ העיצוב. רק לאחר שכל כללי העיצוב נטענו ימשיך הדפדפן לקרוא את דף התוכן ולהציג אותו. התנהגות זו מאפשרת הצגה מעוצבת של תוכן העמוד כבר מהרגע הראשון.
מסיבה זו אנו גם מעדיפים לשים את כל תגיות ה link בראש העמוד, בתור ילדים של אלמנט head. כל התנהגות אחרת תגרום לטעינת כללי העיצוב לאחר שחלק מהתוכן כבר הוצג, מה שיפגע בחווית השימוש של המשתמשים שלנו.
2. עיצוב מוטמע בעמוד
תגית style מאפשרת הטמעה של כללי עיצוב בתוך דף HTML באופן הבא:
<style type="text/css">
body {
color:red;
}
</style>
אפשר למקם את התגית בכל מקום ב-HTML, אך נהוג למקמה בראש העמוד כילד של אלמנט head.
השימוש בעיצוב מוטמע לא נפוץ. תקופה ארוכה הוא נחשב להרגל רע של מתכנתים עצלנים. כיום השימוש הנפוץ ביותר בעיצוב מוטמע הוא לצורך שיפור זמני טעינה של עמודים: במקום לטעון את כל כללי העיצוב בעליית הדף, מתכנתים מפצלים את כללי העיצוב לכאלה הדרושים לתצוגה הראשונית וכללים נוספים (שמשפיעים למשל על תוכן שצריך לגלול כדי להגיע אליו). את הכללים הקריטיים לתצוגה הראשונית שמים בתגית style בראש העמוד, וכל שאר הכללים נטענים מתגית link. קריס קוייר כתב על כך בהרחבה בקישור:
http://css-tricks.com/authoring-critical-fold-css/
3. כללי עיצוב לאלמנט ספציפי
כל תגית HTML יכולה לכלול מאפיין style המאפשר יישום כללי עיצוב על אלמנט ספציפי. נתחיל בדוגמא קצרה:
<body style="background: red;font-size:24px;"></body>
בכתיב כזה אין צורך לציין בורר (Selector), מאחר וברור על איזה תגית אנו מחילים את כלל העיצוב. השימוש הנפוץ במאפיין style הוא בהגדרתה באופן דינמי מתוך JavaScript כדי לשנות בזמן ריצה כיצד נראה אלמנט מסוים. לדוגמא, הסתרה או הצגה של אלמנט מבוצעת ב JavaScript באמצעות שינוי ערך מאפיין העיצוב display.
כללי עיצוב הנטענים ממאפיין style מקבלים עדיפות על כל כלל עיצוב אחר החל על האלמנט. כך למשל בעמוד ה HTML הבא צבע הרקע יהיה אדום:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>intro</title>
<style>
body {
background: orange;
}
</style>
</head>
<body style="background: red;>
Hello CSS
</body>
</html>