מדריך CSS – מדיה

סוגי המדיה הקיימים הם:

אפשרות נוספת להגדיר סגנון למדיה מסוימת היא פקודת ה- @media, וזה נעשה כך:

Body{background-color:green;}
@media print,tv,projection {body{background-color:orange;} 
h2{display:none;} }

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

אז מה ההבדל בין קישור לייבוא?

אם מדובר בקובץ CSS חיצוני אחד בלבד, אין כל הבדל.
אם מדובר ביותר מקובץ אחד, והכללתם נעשתה בשיטת <link>, הדפדפן ישאל את המשתמש באיזה קובץ הוא רוצה להשתמש ומהשני הוא יתעלם לחלוטין.
לעומת זאת, בייבוא, הדפדפן מעמיס את ההגדרות זו על גבי זו והאחרונה לבוא היא הקובעת.
לעומת זאת, בשל השוני בין דפדפנים, נטסקייפ עד גרסה 6 התעלם לגמרי מהגדרות CSS שיובאו באמצעות @import וכן מהגדרות @media.
ישנם דפדפנים שכלל אינם תומכים בסגנון, ממש כשם שיש שאינם תומכים ב-JavaScript. את כל הטקסט הכלול בתוך תגית ה-<style>, (הגדרות ה-CSS) הם מציגים ללא בושה.
לכן נהוג, בהגדרת סגנון בתוך תגית <style> להתחיל ולסיים בסימן הערה:

<style>
<!-- 
    הגדרת הסגנונות
-->
</style>

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