cascading style sheets reference

דירוג וירושה

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

דירוג (cascade)

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

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

ניהול הסגנון באתרים גדולים

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

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

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

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

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

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

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

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

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

אנו ממשיכים, עם כל דף סגנון חדש אנו מוסיפים סגנונות הכרחיים בשלב זה, ומייבאים את דף הסגנון שלמעלה (אין צורך לייבא את כל ה-css-ים כיוון שיבוא של css מייבא את כל הcss-ים המיובאים ע"י ss זה).

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

ירושה

כל דף HTML מורכב ממספר (או אולי אפילו ממספר גדול) אלמנטים - כותרות, פסקאות, רשימות וכו'. מה שרבים ממפתחי אתרים לא מבינים (ברובו כיוון שזה לא היה חשוב עד שהופיעו ה-css-ים) הוא שכל אלמנט מוכל באלמנט אחר, ויכול בעצמו להכיל אלמנטים אחרים. טכנית, זה נקרא היררכיית התוכן של דף האתר.

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

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

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

בחלק זה

בחלק זה למדנו אודות שני רעיונות css-ים חזקים וחשובים: דירוג וירושה

בחלק הבא

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