استعلامات وسائط CSS
أنواع الوسائط المقدمة في CSS2
القاعدة @media، المقدمة في CSS2 ، جعلت من الممكن تحديد قواعد نمط مختلفة لأنواع الوسائط المختلفة.
أمثلة: يمكن أن يكون لديك مجموعة واحدة من قواعد الأنماط لشاشات الكمبيوتر ، وواحدة للطابعات ، وواحدة للأجهزة المحمولة ، وواحدة للأجهزة من نوع التلفزيون ، وما إلى ذلك.
لسوء الحظ ، لم تحصل أنواع الوسائط هذه على الكثير من الدعم من قبل الأجهزة ، بخلاف نوع وسائط الطباعة.
استعلامات الوسائط المقدمة لـ CSS3
وسعت استعلامات الوسائط في CSS3 فكرة أنواع وسائط CSS2: بدلاً من البحث عن نوع من الأجهزة ، فإنها تنظر في قدرة الجهاز.
يمكن استخدام استعلامات الوسائط للتحقق من أشياء كثيرة ، مثل:
- عرض وارتفاع منفذ العرض
- عرض الجهاز وارتفاعه
- الاتجاه (هل الجهاز اللوحي / الهاتف في وضع أفقي أم عمودي؟)
- الدقة
يعد استخدام استعلامات الوسائط تقنية شائعة لتقديم ورقة أنماط مخصصة لأجهزة الكمبيوتر المكتبية وأجهزة الكمبيوتر المحمولة والأجهزة اللوحية والهواتف المحمولة (مثل هواتف iPhone و Android).
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم @mediaالقاعدة بشكل كامل.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
صيغة استعلام الوسائط
يتكون استعلام الوسائط من نوع وسائط ويمكن أن يحتوي على تعبير واحد أو أكثر ، والتي يتم حلها إلى صواب أو خطأ.
@media not|only mediatype and (expressions) {
CSS-Code;
}
تكون نتيجة الاستعلام صحيحة إذا كان نوع الوسائط المحدد يطابق نوع الجهاز الذي يتم عرض المستند عليه وكانت جميع التعبيرات في استعلام الوسائط صحيحة. عندما يكون استعلام الوسائط صحيحًا ، يتم تطبيق قواعد النمط أو ورقة الأنماط المقابلة ، باتباع قواعد التتالي العادية.
ما لم تستخدم عاملي not أو only ، يكون نوع الوسائط اختياريًا
allوسيتم تضمين النوع.
يمكنك أيضًا الحصول على أوراق أنماط مختلفة لوسائط مختلفة:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
أنواع وسائط CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
استعلامات الوسائط أمثلة بسيطة
تتمثل إحدى طرق استخدام استعلامات الوسائط في الحصول على قسم CSS بديل داخل ورقة الأنماط مباشرةً.
يغير المثال التالي لون الخلفية إلى اللون الأخضر الفاتح إذا كان عرض إطار العرض 480 بكسل أو أعرض (إذا كان إطار العرض أقل من 480 بكسل ، فسيكون لون الخلفية ورديًا):
مثال
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
يوضح المثال التالي قائمة ستطفو على يسار الصفحة إذا كان عرض إطار العرض 480 بكسل أو أعرض (إذا كان إطار العرض أقل من 480 بكسل ، فستكون القائمة أعلى المحتوى):
مثال
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
المزيد من أمثلة استعلام الوسائط
لمزيد من الأمثلة على استعلامات الوسائط ، انتقل إلى الصفحة التالية: أمثلة CSS MQ .
مرجع CSSmedia
للحصول على نظرة عامة كاملة على جميع أنواع الوسائط والميزات / التعبيرات ، يرجى إلقاء نظرة على قاعدةmedia في مرجع CSS الخاص بنا .