"גליונות הסגנון נקראים "מדורגים" (באנגלית: Cascading) משום שהגדרות סגנון שונות נבנות זו על גבי זו. לדוגמה, יהיו הגדרות סגנון מסוימות החלות על כל האלמנטים מסוג "פסקה" (<p>), והגדרות אחרות התקפות רק לסוגים מסוימים של פיסקאות. במקרה של סתירה לגבי תכונת עיצוב (property) מסוימת, אחד הכללים הוא שההגדרה המתייחסת לסוג מסוים של פיסקאות תגבר על הגדרה המתייחסת לכל הפיסקאות משום שהיא ספציפית יותר, וישנם כללים נוספים. במקרה שאין עדיפות אחרת, ההגדרה המופיעה אחרונה תגבר."
רגע, היי היי.. אתה ציטטת לי עכשיו את ויקיפדיה? אתה אמיתי?!
כן, למה לא? אסור?
אהה.. לא יודע. אה. קוד פתוח והכל… אבל זה לא רציני, שמע. המדור הזה אמור להסביר מושגים בשפה פשוטה לכל, בהגשה קלילה, וויקיפדיה זה ממש לא…
טוב צודק. פשוט נתקעתי על המילה הזו Cascading. נראה אותך אומר 5 פעמים ברצף C-a-s-c-a-d-i-n-g בלי לשבור איזה שן… בלתי אפשרי. המילה הארורה הזו איימה לי על כל המדור. לא ידעתי מה לעשות. אז בלית ברירה הלכתי לויקיפדיה שתושיע אותי.
יאללה יאללה תגיד שלא באמת ידעת מה זה וזהו, תודה פעם אחת שאתה לא יודע הכל.
אני באמת לא יודע הכל.
כן כן, משחק אותה… יאללה יאללה.
טוב, אנחנו בשידור, אתה יודע. אולי נתקדם?
יאללה יאללה…
אז טוב. היום אנחנו מדברים על המושג הפרה-היסטורי ״גליונות סגנון…
למה פרה-היסטורי????
כי אני חושב שבקרוב ממש אף אחד לא ידע מה זה. אף אחד לא יתעסק עם זה. בטח שאף אחד לא יכתוב קוד כזה. הכל יקרה לבד עם בינה מלאכותית שהיא תתעסק עם הקוד, תשבור את השיניים שלה על כל הקסקיידלילגידינג הזה. שתהנה עם זה… ואנחנו פשוט ניצור ונעצב ונעיף אלמנטים באוויר.
רגע רגע, בואו נתחיל מהתחלה. אז ״גליונות סגנון מדורגים״ באנגלית Cascading Style Sheets או בקיצור CSS, זה למעשה הנחיות עיצוב, נכון?
נכון. אתה מחליף אותי לא רע, אגב.
שהקטע שלהן שהן ניתנות בנפרד מהנחיות הקשורות בתוכן שזה קורה דרך HTML שראינו בעבר. אלו למעשה שני מסמכים שמגיעים בנפרד. מסמך אחד מוקדש לתוכן ולמה שקשור לאירגון הבסיסי שלו, והמסמך השני נוגע לסטייל.
הפ הפ.. עשית את זה יפה עד שהשתמשת באותה מילה כדי להסביר את אותו מושג עצמו.
לפחות לא ציטטתי את ויקיפדיה י׳נחש….
טוב, כולם יודעים שסטייל זה סגנון. זה פשוט מילה יותר… בסטייל.
אוקי, אז אני אמשיך: בשביל מי שדילג ובצדק על הפסקה הראשונה והמתישה של הפוסט. המילה הקריטית והדי מגניבה בכל הסיפור הזה היא ״מדורגים״. כלומר פרה פרה. לא אוכלים הכל ביחד.
הנה קוד CSS לדוגמא, רק כדי לשטוף את העיניים ככה:
h1 {
color: red;
text-align: center;
}מה שרואים פה זה התייחסות לסוג תוכן h1 מיודענו מהפעם הקודמת, שזה כותרת ראשית – ההנחיה היא לתת לו צבע אדום, וגם למקם את הטקסט במרכז. למשל…
נכון. זה היה ממש בלאגן אם זה לא היה ככה. תדמיינו שאתם מעצבים מסמך תוכן ונותנים הנחיה לכל חלק במסמך, איזה גודל, איזה צבע, יישור לימין יישור לשמאל, עובי הגבול, סגנון הגבול, צבע הגבול, שולי הגבול, גבול… ואז עוברים לחלק הבא.
הנקרא ״אלמנט״ יש לציין…
ציינת. תודה. בקיצור – זה הופך לבלאגן כאשר מעצבים כך באופן ידני כל חלק, אלמנט, במסמך וזה נורא קשה לעבוד עם זה אחר-כך אם רוצים לשנות דברים וזה. רוצים לערוך. רוצים להוסיף או להפחית. בשביל זה המציאו את הרעיון הזה של הדירוג. כלומר – תבנה שכבה אחת, תהיה מבסוט מעצמך, תוסיף עוד שכבה. כמו עוגת שכבות.
כן. אני אחזור עוד טיפה אחורה למי שנחת מהחלל הרגע: אנחנו בעצם מדברים על עיצוב של דפי אינטרנט. אותם דפים שבעבר הצגנו את השפה שעומדת מאחוריהם – HTML כאמור. אנחנו מדברים על סוג של שפה נוספת שמוקדשת באופן ייעודי לעיצובי הסגנוני של התוכן. כאשר הדפדפן שלנו גולש לתומו ברשת ורוצה למשל ללכת לראות מה חדש באתר החדשות החביב עליו – הוא מבקש מהשרת של אתר החדשות לקבל את התוכן, ומקבל בחזרה מסמך HTML של התוכן, ומתלווה אליו מסמך CSS עם הנחיות הסגנון שנוגע לכל הדברים שידידי כאן ציין, בין השאר דברים כמו שוליים, צבעים, עובי של כל מיני דברים. כאלה…
אז אחרי שהסברנו מה זה ״מדורגים״ אפשר לומר שיש לנו את זה, וביי. לא?
אפשר לומר. רק נציין דבר חשוב לכל הצעירים כאן שלא הולכים לראות CSS בחיים שלהם יותר: תדעו שמתכנתים היו שוברים לא רק שיניים אלא גם אצבעות על הדבר הזה. פשוט עבודה עם קוד CSS לעיתים נוטה להיות קשה ומסובכת כאשר רוצים לגרום לאלמנט מסויים להראות בצורה מסויימת, או להתמקם במיקום מסויים, וצריך לעבור על ערימות ערימות של שכבות מדורגות סו קולד, שמי שחשב שזה רעיון מגניב לא חשב על הסיוט שזה גם יכול להציב… בקיצור – הסיוט הזה נגמר אבל זו היתה תקופה יפה שאולי עוד נתגעגע אליה. זהו.
ובנימה אופטימית זו – ביי לכולם.
ביי.
כתיבת תגובה