More

[ دورة CSS ] الدروس المتقدمة CSS – الدرس الثاني عشر – الوسائط Media

تسمح لك أنواع الوسائط بتحديد كيفية ظهور الصفحة بوسائل متعددة . يمكن
عرض الصفحة بطرق مختلفة على الشاشة أو على الورقة أو المتصفحات السمعية ..
إلخ

أنواع الوسائط media

تم تصميم العديد من خاصيات CSS فقط مع الوسائط وعلى سبيل المثال خاصية
“voice-family” صممت خصيصاً للتعامل مع المستخدمون السمعيون (يستخدمون حاسة
السمع) والبعض الآخر صمم لاستخدامات عديدة مثل خاصية “font-size” التي
تستخدم مع كلاً من وسائل الشاشة والطباعة ولكن بقيم مختلفة عما سبق . عادة
تحتاج صفحة الويب حجم خط كبير على الشاشة مقارنةَ مع الورق العادي ونوع
الخط sans-serif fonts سهل للقراءة على الشاشة serif أسهل للقراءة على
الورق .

بالنسبة للغة العربية اسهل خط للقراءة على الشاشة هو Tahoma وأفضل خط
للقراءة على الورق Arial أو بعض الأنواع الأخرى للخطوط العربية .

قانون الوسائط @media

يسمح لك قانون الوسائط @media باستخدام خاصيات معينة تتوافق مع الشاشة والوسائط بنفس ملف التصميم الانسيابي .

في المثال التالي , يخبر التصميم المتصفح باستخدام نوع الخط Verdana
وحجم الخط 14px على الشاشة ولكن ان تم طبع الصفحة على الورقة سيصبح حجم
الخط 10px ونوعه Times . لاحظ أنه تم وضع تركيبة الخط كعريض لكل من الشاشة
والورقة :

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>

تريد تجربتها؟! اذا كان لديك متصفح Mozilla/Firefox أو IE5+ وقمت بطباعة
الصفحة ستشاهد أن الفقرة تحت نوع الوسائط ستصبح بنوع خط آخر وحجم مختلف
وصغير عن الحجم والنوع الأصلي .

الأنواع المختلفة للوسائل

ملاحظة : ليست حالة حساسة case-sensitive عند كتابة أنواع الوسائط

أنواع الوسائط المختلفة

نوع الوسائط الشرح
all يستخدم لجميع أنواع أدوات الوسائط
aural يستخدم لمركبات الصوت والكلام
braille يستخدم لأدوات المراجعة اللمسية بريل (نوع كتابة خاص بالعميان)
embossed يستخدم لطابعات بريل المرقّمة
handheld يستخدم مع الأدوات الصغيرة و اليدوية
print يستخدم مع الطابعات
projection يستخدم مع العروض التقديمية للمشاريع , مثل الطبقات
screen يستخدم مع شاشات الحواسيب
tty يستخدم مع ألواح أحرف بدرجة مثبتة مثل teletypes و terminals
tv يستخدم مع أدوات التلفاز
READ  [ دورة CSS ] الدروس المتقدمة CSS - الدرس الثامن - شريط القوائم navbar
Tags
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker
Inline
Inline