استعلامات الإعلام CSS

تم إدخال نوع وسائل التواصل في

تم إدخال @media القواعد التي تجعل من الممكن تعريف قواعد النمط المختلفة لكل نوع من أنواع وسائل التواصل.

على سبيل المثال: قد يكون لديك مجموعة من القواعد النمطية لشاشات الحواسيب، ومجموعة أخرى للطابعات، ومجموعة أخرى للجهاز المحمول، وحتى مجموعة لل티فاز، وما إلى ذلك.

للأسف، لم يتم دعم هذه أنواع الإعلام على نطاق واسع سوى نوع الإعلام الطباعي.

أدخل الاستعلامات الإعلامية في CSS3

توسعت الاستعلامات الإعلامية في CSS3 مفهوم أنواع الإعلام في CSS2: فهي لا تقوم بالبحث عن نوع الجهاز، بل تركز على قدرات الجهاز.

يمكن استخدام الاستعلامات الإعلامية للتحقق من العديد من الأمور، مثل:

  • عرض وارتفاع النافذة
  • عرض وارتفاع الجهاز
  • اتجاه الجهاز (هل الجهاز اللوحي أو الهاتف المحمول في وضع أفقي أو عمودي)
  • دقة الشاشة

استخدام الاستعلامات الإعلامية هو تقنية شائعة تتيح تقديم جدول ستايلات مخصصة لأجهزة الكمبيوتر المكتبية، أجهزة الكمبيوتر المحمولة، أجهزة الهواتف اللوحية، والهواتف المحمولة (مثل iPhone وAndroid Phone).

دعم المتصفح

أرقام الجدول تشير إلى دعم كامل @media الإصدار الأولي للمتصفح الذي يدعم القاعدة.

الصفة
@media 21.0 9.0 3.5 4.0 9.0

قواعد النص النصية

تتكون الاستعلامات الإعلامية من نوع إعلام واحد، ويمكن أن تحتوي على تعبيرات واحدة أو أكثر، يمكن تحويل هذه التعبيرات إلى true أو false.

@media not|only mediatype و (expressions) {
  كود CSS;
}

إذا كان نوع الإعلام المحدد يتطابق مع نوع الجهاز الذي يعرض المستند، وكل تعبير في الاستعلام الإعلامي صحيح، فإن نتيجة الاستعلام تكون صحيحة. عند تكون الاستعلام الإعلامي صحيحًا، يتم تطبيق جدول الستايلات أو القواعد الستايلية المحددة، وتبعًا للقواعد الطبيعية للتسلسل.

إلا إذا كنت تستخدم معاملات not أو only، فإن نوع الإعلام هو اختياري ويكون مبدئيًا all النوع.

يمكنك أيضًا استخدام جدول ستايلات مختلفة لكل نوع إعلام:

<link rel="stylesheet" media="mediatype و|لا|فقط (expressions)" href="print.css">

نوع الإعلام CSS3

القيمة الوصف
all لجميع أنواع الأجهزة الإعلامية.
print للآلات الطابعة.
screen للشاشات الحاسوبية، أجهزة الهواتف الذكية، أجهزة الهواتف اللوحية، وما إلى ذلك.
speech لقراءة الصفحة بصوت عالٍ من قبل مساعدات الشاشة المخصصة لقراءة الصفحة.

مثال بسيط على الاستعلامات الإعلامية

واحدة من طرق استخدام الاستعلامات الإعلامية هي وجود جزء 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.

دليل @media CSS

للإطلاع على وصف كامل لجميع أنواع الإعلام وخصائص/التعبيرات، يرجى زيارة قاعدة @media في دليل CSS.