11. תאימות ו - CSS
אנו יודעים כי דפדפנים ישנים יותר (גרסה 3 או ישנה יותר מכל הדפדפנים העיקריים) אינם תומכים ב-CSSים. כיצד נוכל לעצב אתרים המתבססים על CSSים, עבור המראה שלהם, ואינם נראים פשוטים מדיי בדפדפנים ישנים יותר? זהו נושא מסובך, אך ברצוני לפרט עליו קצת בשיעור זה. במשך הזמן אנו נלמד על סוג בורר חשוב שעדיין לא נתקלנו בו.
קוד ירושה
יש לכם אתר שקיים זמן רב, המשתמש במייצגת HTML (אלמנטים כמו FONT, B, וכו') כיצד נעצב CSS ונשתמש בו יחד עם דף זה?
הבה נבחן את הבעיה בצורה יותר מפורטת.
לאחרונה נזכר בשאלה זו מתוך קבוצת חדשות של CSSים:
"אם יש דף אתר המשתמש בסימוני מייצגת (כמו התג FONT) אז ה-CSSים לא מבטלים אותם. אני חייב להסיר אותם. למה זה?"
הבה נבדוק את ה-HTML כאן כדי לראות מה באמת קורה.
דמיינו לכם שיש לנו את ה-HTML הבא בדף שלנו:
<P><Font face="Arial">here is the text of the paragraph.</Font></P>
וחוקי CSS :
P {font-family: Verdana }
בוחן פתע
מדוע הדפדפן עדיין יראה את הפסקה ב- Arial ולא ב- Verdana?
חישבו על כך. למעשה, הטקסט הוא באלמנט הפונטים, והוא בעצמו כלול בתוך הפסקה. הכלל בוחר את הפסקה אך הטקסט אינו יורש את הסגנון של הפסקה, מכיוון שיש מידע ספציפי יותר הקשור FONT, ששם התכונה שלו הוא: face="Arial".
כיצד נהפוך את הפסקאות שלנו ל- Verdana?
בניסיון הראשון שלנו אנו נבחר את אלמנט FONT, ונקבע אותו ל- Verdana. זה יעבוד אך זה לא אידיאלי.
בוחן פתע
מה יקרה אם יהיה לנו גם:
<H1><FONT face="Times">Important Announcement</FONT></H1>
לפתע כל הכותרות שלנו הן ב-Verdana . זו לא תוצאה טובה.
כיצד נוכל לפתור את זה? באופן הגיוני היינו רוצים כלל שיבחר רק את האלמנטים של FONT הפונטים כאשר הם בתוך פסקאות, ולקבוע אותם ב- Verdana, ועוד כלל, שיבחר את האלמנטים של FONT הפונטים רק כאשר הם בתוך כותרות ברמות שונות, ולקבוע אותם ל- Times
אנחנו יכולים לעשות זאת בדיוק, וזהו הנושא החשוב האחרון שנסקור בשיעורים אלה.
תוכן
עד כה ראינו שלכללים יכולים להיות בוררים פשוטים, הבוחרים אלמנטים של HTML, כמו כל פיסקה או כל כותרת ובוררי קישורים (בוררי קבוצה מדומים עבור הקפדנים שבינינו) שבוחרים קישורים במצבים שונים, בוררי קבוצות, שבוחרים אלמנטים על בסיס ערך תכונת הקבוצה שלהם. למדנו גם על קבוצות של בוררים המיישמים את אותם המאפיינים למספר סוגים של אלמנטים באותו זמן. הבורר האחרון שעליו נלמד בשיעורים אלה, הוא בורר התוכן.
הוא מאפשר לנו לקבוע כלל שקשור לאלמנט רק כשהוא כלול בתוך אלמנט אחר. לדוגמא, לפונטים רק כאשר הם בתוך כותרות, או פונטים רק בתוך פסקאות. לדוגמא, הבורר עבור פונטים בתוך הפסקאות יהיה:
P FONT
תרגיל מס' 1
צרו סדרת כללים המשיגה את האפקט הרצוי לנו שכל הפסקאות תהיינה ב- Verdana, וכל הכותרות (תעשו רק רמה 1,2,3) ב- Times.
התשובות נמצאות בסוף השיעור הזה.
הנה גרסה מעט שונה של הדוגמא של דף האתר לבדוק האם כללים אלה פועלים. צרו קובץ חדש, הדביקו אותו פנימה ושימרו אותו באותה תיקייה של דף האתר השני .
<HTML>
<HEAD>
<TITLE>Choux</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="core-style.css">
</HEAD>
<BODY>
<H1><FONT FACE="Times">Classic Patisserie Recipes</FONT></H1>
<H2><FONT FACE="Times">Pastry Cream</FONT></H2>
<P><FONT FACE="Arial">Also known as creme patissiere, this is the
traditional filling for fresh fruit tarts. It is also used to fill
choux puffs.</FONT></P>
<H3><FONT FACE="Times">Ingredients</FONT></H3>
<P><FONT FACE="Arial">2 cups milk</FONT></P>
<P><FONT FACE="Arial">1 vanilla bean</FONT></P>
<P><FONT FACE="Arial">6 egg yolks</FONT></P>
<P><FONT FACE="Arial">175g castor sugar</FONT></P>
<P><FONT FACE="Arial">50g cornflour</FONT></P>
<H3><FONT FACE="Times">Method</FONT></H3>
<P><FONT FACE="Arial">Scald milk with vanilla bean. Beat egg yolks
with cornflour until thick. Pour in milk and whisk until quite
smooth.</FONT></P>
<H1><FONT FACE="Times">More Information</FONT></H1>
<P><FONT FACE="Arial">to contact the author, email me on
john@masterchef.org</FONT></P>
<P><FONT FACE="Arial">to download all my recipes in acrobat format,
click here</FONT></P>
><P><FONT FACE="Arial">for other recipes, see biodynamic recipes from
http://www.biodyn.nu</FONT></P>
</BODY>
</HTML>
שלב הבא
הספקנו ממש הרבה עד עכשיו, ואנו מגיעים לסוף השיעורים שלנו. עד עכשיו כיסינו את כל הדרכים הנפוצות ביותר לבחירת אלמנטים בדף, והרבה סגנונות עיקריים שנוכל להשתמש בהם בעזרת ה-CSSים. בסוף השיעור הזה יש הצעות לאן ללכת מכאן.
אנו נסיים בדיון מפורט יותר בנושא (קישור ושיבוץ) linking and embedding של CSSים, כיצד לעשות זאת ומה הכי מומלץ.
Answer to Exercise 1
P FONT {font-family: Verdana, sans-serif}
H1 FONT {font-family: Times, serif}
H2 FONT {font-family: Times, serif}
H3 FONT {font-family: Times, serif}
האם הוספתם את סוג משפחת הפונטים, כפי מה שהומלץ?
|
