69- استعلامات الوسائط CSS

قاعدة @media، التي تم تقديمها في CSS2، جعلت من الممكن تحديد قواعد أنماط مختلفة لأنواع وسائط مختلفة.

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

يمكن استخدام استعلامات الوسائط للتحقق من العديد من الأشياء، مثل:

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

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

أنواع الوسائط في CSS

خصائص الوسائط الشائعة في CSS

فيما يلي بعض خصائص الوسائط الشائعة الاستخدام:

بنية استعلام الوسائط

يتكون استعلام الوسائط من نوع وسائط ويمكن أن يحتوي على ميزة وسائط واحدة أو أكثر، والتي يتم حلها إلى قيمة صواب أو خطأ.

@media not|only mediatype and (media feature) and (media feature) {
  CSS-Code;
}

يعد mediatype اختياريًا (إذا تم تجاهله، فسيتم تعيينه على all). ومع ذلك، إذا كنت تستخدم not أو only ، فيجب عليك أيضًا تحديد mediatype.

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

معنى الكلمات المفتاحه not, only, and

• not : تقلب هذه الكلمة المفتاحه معنى استعلام وسائط كامل.
• only : تمنع هذه الكلمة المستعرضات القديمة التي لا تدعم استعلامات الوسائط من تطبيق الأنماط المحددة. لا يوجد لها تأثير على المتصفحات الحديثة.
• and : تجمع هذه الكلمة المفتاحه بين نوع وسائط وميزة وسائط واحدة أو أكثر.

يمكنك أيضًا ربط أوراق أنماط مختلفة بوسائط مختلفة وعروض مختلفة لنافذة المتصفح (النافذة):

<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">
etc....

أمثلة بسيطة على استعلامات الوسائط

هناك طريقة واحدة لاستخدام استعلامات الوسائط وهي أن يكون لديك قسم CSS بديل داخل ورقة الأنماط الخاصة بك.

يغير المثال التالي لون الخلفية إلى lightgreen إذا كان عرض النافذة 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;}
}