וובמאסטר - תיכנות ובניית אתרים

מדריך CSS - מדיה

רן בר-זיק ,‏ אינטרנט ישראל‏ ‏/‏ 5 דצמבר, 2003
F+
F-
סוגי המדיה הקיימים הם:
  • All (עיבוד קולי).
  • Aural (עיבוד קולי).
  • Braille (לעיוורים - תחושתי).
  • embossed (מדפסות ברייל).
  • handheld ( מחשבי כף יד למיניהם).
  • print (הדפסה).
  • projection ( הקרנה).
  • screen (צג מחשב).
  • tv (מסך טלוויזיה).


  • אפשרות נוספת להגדיר סגנון למדיה מסוימת היא פקודת ה- @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 ויתנו לנו, המתכנתים, קצת יותר התאמה בהצגת הדברים.

    רן בר-זיק, אינטרנט ישראל

    מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.

    אינטרנט ישראל: www.internet-israel.com
    תגיות: CSS‏  /  מדריך‏  /  בניית אתרים‏  

    תגובות בפייסבוק

    תגובות למאמר



    תגיות פופולאריות

    X
    הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
    וובמאסטר © כל הזכויות שמורות