ב-Online
 
 
 
 
 
 
 
לפרק את הבייט 
מבוא ל-CSS 
 
 ההשוואה האולטימטיבית: HTML מול CSS    צילום: flickr, eelke dekker, cc by    
לפרק את הבייט |
 

גם אתר האינטרנט הבסיסי ביותר הוא לא רק HTML: עידו גנדל מסביר איך נראית ועובדת CSS, שפת העיצוב הבסיסית לאתרים

 
 
 
 
 
 
 
 
 
 
 
מפרט HTML 4.01, שמהווה את תקן ה-HTML בפועל עבור כל אתרי האינטרנט כמעט (וכמובן שעבור הדפדפנים עצמם) מאז 1999 לערך, עומד להתחלף. הטיוטה של מחליפו, HTML 5, פורסמה בינואר 2008 ואלמנטים ראשונים שלו כבר משולבים בדפדפנים המתקדמים, אם כי אימוץ מלא שלו ברחבי האינטרנט ייקח עוד זמן – שלא לדבר על זניחת התקן הקודם. המפרט החדש כולל, בתיאוריה, מספר חידושים מרגשים כגון "בד ציור" (Canvas) ותקני אודיו ו-וידאו שיעשו חיים קשים להרבה טכנולוגיות מוטמעות שקיימות כיום. אך השינוי שנגע ביותר ללבנו הוא היעלמותו הסופית של התג Center, המשמש למרכוז של טקסט.

התג הזה הוא לא סתם תג. הוא אולי ה-"Hello world!" של כל מי שהתעסק ב-HTML, כלומר החוויה הראשונה והנוסטלגית של כתיבת קוד בסיסי שממש עושה משהו. נכון, הוא נחשב למיושן ולא-מומלץ כבר ב-HTML 4.01, אבל הוא עבד. בעוד כך וכך שנים, כשהכל יפעל לפי HTML 5, הדפדפנים לא יכירו אותו בכלל. זה יהיה כמו לנסות לדחוף אסימון לתוך טלפון ציבורי – אם בכלל אפשר למצוא כזה. האם פירוש הדבר שבעתיד לא יהיה טקסט ממורכז? חס וחלילה. הוא פשוט ייעשה בעזרת CSS.
 

מה זה CSS?

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

הכינוי CSS הינו קיצור של Cascading Style Sheets, או "גליונות סגנון מדורגים" בעברית. הדירוג מתייחס לשלוש רמות שונות ש-CSS פועל בהן: רמת האתר, רמת המסמך ורמת האלמנט הבודד, כאשר כל רמה "דורסת" את הגבוהות ממנה. נתחיל בהדגמת רמת האלמנט הבודד (המכונה גם CSS Inline), בה קוד ה-CSS מוטמע בתוך תג HTML.
 
 

רמת ה-Inline

בתמונה הבאה מופיע קוד HTML משולב בקוד CSS (בחלק התחתון), וכיצד הוא נראה בדפדפן (בחלק העליון). מידע ה-CSS הוא זה שמסומן בקו מקווקו אפור, חבוי בתוך המאפיין "Style" של תגי ה-HTML השגרתיים Div ו-Span.
 
קוד CSS Inline והשפעתו (צילומסך ועיבוד: עידו גנדל)
 קוד CSS Inline והשפעתו (צילומסך ועיבוד: עידו גנדל) 
 

רמת ה-Embedded

התמונה לעיל הציגה את התחליף המוצע לתג Center המיושן, אך בשלב זה נראה שאין שום יתרון בדרך החדשה. כדי להבין מדוע היא בכל זאת עדיפה, נעלה רמה אחת למעלה אל ה-Embedded. כאן מתבצעת הצמדה של סגנון לתג HTML ברמת המסמך כולו, כך שבכל פעם שהתג יופיע, הסגנון יחול על הטקסט שהוא מקיף. בתמונה הבאה מוצגת דוגמה לכך, כאשר לתג Div מוצמדים (בתוך החלק HEAD של מסמך ה-HTML) הצבע האדום והמרכוז. היתרון העצום של השיטה הזו הוא שבשינוי יחיד, בראש המסמך, אפשר לשנות את העיצוב של הטקסט במסמך כולו.
 
קוד Embedded CSS והשפעתו (צילומסך: עידו גנדל)
 קוד Embedded CSS והשפעתו (צילומסך: עידו גנדל) 
 
אך יש כאן בעיה: מה אם המעצב מעוניין בשני סוגי עיצובים לטקסט, או יותר? מספר תגי HTML מוגבל, ויש לכל אחד מהם משמעות בפני עצמו, כך שאי אפשר פשוט להקצות תג שונה לכל עיצוב. כדי לפתור את הקושי משתמשים בשני סוגי מאפיינים – id ו-class – שמחלקים את התגים לתת-סוגים שונים. ההבדל בין השניים הוא ש-id מיועד לזהות תג ספציפי במסמך, לדוגמה זה שמקיף את הכותרת העליונה של המסמך כולו, ואילו class מיועד לזהות את כל התגים, בלי קשר למספרם, שיש להם משמעות אחידה (כמו למשל תגים שמסמנים ציטוטים, או טקסט מודגש באדום). את זיהויי ה-id מסמנים בקוד ה-CSS בתחילית "#" (סולמית), ואילו class בתחילית "." (נקודה). דוגמה לזיהוי class אפשר לראות בתמונה הבאה – השוו את ההבדלים לעומת הקודמת בהגדרת ה-CSS ובשורה האחרונה.
 
כמו התמונה הקודמת, רק בתוספת זיהוי class (צילומסך: עידו גנדל)
 כמו התמונה הקודמת, רק בתוספת זיהוי class (צילומסך: עידו גנדל) 
 

רמת ה-External

בעיקרון, יש לנו כעת כל מה שצריך כדי לעצב דף HTML בצורה חכמה. אבל מה קורה אם מדובר באתר שיש בו יותר מדף אחד, ושכולם משתמשים באותו סגנון עיצוב? אם נגדיר Embedded CSS בנפרד, בתוך כל אחד מהם, ניתקל שוב בבלגן כשנבקש לשנות משהו בעיצוב המשותף. לשם כך, כפי שכבר הוזכר, קיימת הרמה השלישית – External – בה מוגדר קובץ CSS נפרד וחיצוני, שכל קבצי ה-HTML השונים פשוט מקשרים אליו. שינוי בקובץ זה יביא לשינוי מיידי בכל אחד מהקבצים הנפרדים. למעשה, בעזרת קובצי CSS חיצוניים, המעצב יכול לעבוד על תבניות עיצובים עוד לפני שנכתבה מילה אחת במסמך עצמו. התוכן של קובץ CSS נראה ממש כמו ב-Embedded, פרט לתג Style המקיף, ואילו הקישור מקובץ ה-HTML נעשה בקלות כך:
 
קובץ HTML מימין, קובץ CSS למטה, והתוצאה בדפדפן משמאל ברקע (צילומסך ועיבוד: עידו גנדל)
 קובץ HTML מימין, קובץ CSS למטה, והתוצאה בדפדפן משמאל ברקע (צילומסך ועיבוד: עידו גנדל) 
 
התוצאה במקרה זה היא זהה, אך כל דף באתר שלנו יוכל להשתמש באותו קובץ CSS וב-class שהוגדרה בו. אם נרצה, בדף מסוים, לעצב משהו בצורה אחרת נוכל להשתמש ב-Embedded CSS, ואם בנקודה ספציפית באותו קובץ נרצה להשתמש בעיצוב שלישי, נעשה זאת בעזרת Inline CSS. כמובן, המפרט המלא של CSS כולל הרבה יותר מאשר צבעי גופן ומרכוז טקסט – אפשר להגדיר בו אזורים נפרדים על המסך, התנהגות של אלמנטים כשהעכבר עובר מעליהם ועוד המון דברים שימושיים.
 

תקן אחד, הרבה בעיות

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

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

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

כל הזכויות שמורות 2011 © נענע 10 בע"מ
 
 
 
 
כל הזכויות שמורות © Nana10 בע"מ
Video powered by