تسمح استعلامات الوسائط (media queries) بتطبيق أنماط CSS مختلفة بناءً على نوع جهاز العرض (شاشة أو طابعة أو غير ذلك) وحجمه، فيُحدَّد نوع الجهاز عن طريق نوع الوسط media type، بينما تُحدد مواصفات الجهاز الأخرى مثل اللون وأبعاد شاشة العرض باستخدام خصائص الوسط media features.

الصيغة العامة لكتابة وسائط الاستعلامات media queries

@media [...] {
    /* القواعد التي ستُطبق عند استيفاء شروط استعلامات الوسيط */
}

تحديد نوع الجهاز

@media print {
    /* القواعد التي ستُطبق عند استيفاء شروط استعلامات الوسيط */
}

تحديد نوع وخصائص الجهاز

@media screen and (max-width: 600px) {
    /* القواعد التي ستُطبق عند استيفاء شروط استعلامات الوسيط */
}

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

@media (orientation: portrait) {
    /* القواعد التي ستُطبق عند استيفاء شروط استعلامات الوسيط */
}

مثال

@media screen and (min-width: 720px) {
    body {
        background-color: skyblue;
    }
}

تُحدد استعلامات الوسائط في المثال أعلاه شرطين لتطبيق قواعد CSS هما:

1. يجب عرض الصفحة على شاشة، أي ألَّا تكون مطبوعة أو ما شابه ذلك.

2. يجب أن يكون عرض الشاشة 720 بكسل على الأقل.

تُطبق القاعدة background-color: skyblue في حال تحقق الشرطين أعلاه ويُصبح لون الصفحة أزرق سماوي.

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

في المثال أعلاه، إذا كان عرض شاشة العرض في البداية أقل من 720 بكسل تُطبق القاعدة ويُصبح لون الصفحة أزرق سماوي. إذا قَلَّص المستخدم عرض الشاشة (عن طريق تصغير حجم المتصفح مثلًا) إلى أقل من 720 بكسل يتوقف تطبيق القاعدة ويتغير لون الصفحة للون المحدد خارج media query.

ملخص القول، المعاملات التي تأخذها القاعدة ‎@media هي باختصار:

تحديد نوع الوسط أو الجهاز عبر media type

يستخدم المعامل media type لتحديد نوع الجهاز المُراد تطبيق قواعد CSS عليه، وهو معامل اختياري يُوضع مباشرة بعد التعريف media@. يوضح المثال التالي كيفية استخدامه:

@media print {
    html {
        background-color: white;
    }
}

تُعطي الشيفرة أعلاه صفحة HTML خلفية بيضاء عند الطباعة.

يُمكن إضافة المعامل not قبل نوع الجهاز لتطبيق قواعد CSS على كل الأجهزة عدا الجهاز المحدد، أو المعامل only والذي يُطبق قواعد CSS على الجهاز المحدد فقط كما هو موضح في الأمثلة التالية:

@media not print {
    html {
        background-color: green;
    }
}

@media only screen {
    .fadeInEffects {
        display: block;
    }
}

انواع الأجهزة

استعلامات الوسائط للشاشات الشبكية وغير الشبكية

على الرغم من أن هذا النوع من استعلامات لوسائط يعمل فقط على مصفحات المبنية على مُحرِّك Webkit إلَّا انه قد يكون مفيدًا في بعض الأحيان، يوضح المثال التالي كيفية استعمالها:

/* ---- الشاشات غير الشبكية ---- */
@media screen
    and (min-width: 1200px)
    and (max-width: 1600px)
    and (-webkit-min-device-pixel-ratio: 1) {
        /* CSS rules */
}

/* ---- الشاشات الشبكية ---- */
@media screen
    and (min-width: 1200px)
    and (max-width: 1600px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi) {
        /* CSS rules */
}

معلومات أساسية

يوجد نوعان من البكسلات المُستخدمة في شاشات العرض، البكسلات المنطقية والبكسلات الفيزيائية، وغالبًا ما تكون البكسلات الفيزيائية ثابتة لكل أجهزة العرض بينما تتغير البكسلات المنطقية مع وضوح الشاشة، فكلَّما زاد وضوح الشاشة تزيد جودة البكسلات.

نسبة بكسلات الجهاز (device pixel ratio) هي نسبة البكسلات الفيزيائية إلى المنطقية. على سبيل المثال الأجهزة MacBook Pro Retina، و iPhone4 لها نسبة بكسلات 2، أي أن عدد البكسلات الفيزيائية ضعف عدد البكسلات المنطقية.

خصائص الوسيط (الجهاز) (media features)

بعض الخصائص الملغية

العرض (Width) مقابل إطار العرض (Viewport)

من المهم تحديد عرض الصفحة (viewport) ليكون موافقاً لعرض الجهاز (device-width) باستخدام البيانات الوصفية meta tags. توضع البيانات الوصفية داخل رمز

وتُكتب بالطريقة الموضحة في المثال التالي:

<meta name="viewport" content="width=device-width, initial-scale=1">

تُحدد خاصية width في استعلامات الوسائط عرض المساحة الفعلية المستعملة لعرض المحتوى، بينما تحدد view-port عرض الجهاز نفسه.

تستخدم العديد من الأجهزة عدد من البكسلات الفيزيائية لتمثيل بكسل فيزيائي واحد. على سبيل المثال وضوح شاشة جهاز iPhone 6 Plus هو 2208 * 1242 لكنَّ مساحة العرض الفعلية هي 736 * 414، أي أن كل ثلاثة بكسلات منطقية تُمثل بكسل فيزيائي واحد.

عدم ضبط البيانات الوصفية meta tag ضبطاً صحيحاً يؤدي إلى عرض الصفحة بوضوحها الحقيقي مما يتسبب في ظهورها مُصغَّرة (نصوص وصور بحجم أصغر).

استخدام استعلامات الوسائط لاستهداف شاشات محددة

غالبًا ما تستخدم استعلامات الوسائط في إنشاء التصميم المستجيب لمواقع الويب (Responsive web design)، وذلك لأنها تمكن من تطبيق قواعد CSS مختلفة بناءً على حجم ونوع الجهاز المستخدم لعرض الصفحة.

@meida only screen and (min-width: 300px) and (max-width: 767) {
    /*
        تطبق القواعد المحددة في هذا الجزء فقط إذا كان عرض الشاشة بين 300 بكسل و 767 بكسل
    */
    .site-title {
        font-size: 80%;
    }
}

@meida only screen and (min-width: 768px) and (max-width: 1023) {
    /*
        تطبق القواعد المحددة في هذا الجزء فقط إذا كان عرض الشاشة بين 768 بكسل و 1023 بكسل
    */
    .site-title {
        font-size: 80%;
    }
}

@media only screen and (min-width: 1024) {
    /*
        تطبق القواعد المحددة في هذا الجزء فقط إذا كان عرض الشاشة أكبر من 1024 بكسل
    */
    .site-title {
        font-size: 120%;
    }
}

إنشاء استعلامات الوسائط عبر العنصر link

<link rel="stylesheet" media="min-width: 600px" href="example.css" />

يُحمَّل ملف CSS المحدد في الرابط أعلاه في كل الحالات ولكن لا يُطبق إلا إذا كان عرض شاشة الجهاز أكبر من 600 بكسل.

استعلامات الوسائط في متصفح IE 8

استعلامات الوسائط غير مدعومة في متصفح IE 8 والإصدارات السابقة له.

تُوجد بعض الحلول البديلة التي تستخدم Javascript وفيما يلي بعض هذه الحلول:

1. استخدام مكتبة Respond.Js

   <!--[if It IE 9]>
   <script>
       <src="respond.min.js">
   </script>
   <![endif]

2. استخدام مكتبة CSS Mediaqueries

   <!--[if It IE 9]>
   <script>
       <src="css3-mediaqueries.js">
   </script>
   <![endif]

إذا لم تكن ترغب في استعمال Javascript فعليك إضافة ملف CSS منفصل يتم تحميله فقط في حالة عرض الصفحة على المتصفحات السابقة لمتصفح IE 9.

<!--[if It IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style.ieIt9.css" />
<![endif]-->

اطّلع على المزيد من الطرق لدعم استعلامات الوسائط ي المتصفحات السابقة لمتصفح IE 9.

تقسيم الصفحات عبر استعلامات الوسائط

ملاحظة: تستخدم هذه الخواص عند طباعة صفحات الويب، لذلك من الشائع استخدامها مع استعلامات الوسائط

مثال

@media print {
    p {
        page-break-inside: avoid;
    }
    h1 {
        page-break-before: always;
    }
    h2 {
        page-break-after: avoid;
    }
}

• القاعدة الأولى تمنع إضافة فواصل الصفحات داخل الفقرة، وبمعنى آخر أنها تمنع فصل الفقرة على صفحتين.
• القاعدة الثانية تضيف تبدأ صفحة جديدة قبل كل عناصر h1، أي أن كل عنصر h1 سيبدأ في صفحة جديدة.
• القاعدة الثالثة تمنع بدء صفحة جديدة بعد عناصر h2.

وسائط الميزات (Feature Queries)

استخدام supports@

@supports (display: flex) {
    /* Flexbox is available, so use it */
    .my-container {
    display: flex;
    }
}

تستعمل supports@ لمعرفة ما إذا كانت الخاصية مدعومة في المتصفح أم لا وتطبيقها إذا كانت مدعومة.

الاستعلام عن عدد من الميزات

تستخدم العمليات and وnot وor للاستعلام عن عدد من الميزات.

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
    /* Probably do some fancy 3d stuff here */
}

@supports (display: flex) or (display: table-cell) {
    /* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
    /* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}

ولتسهيل قراءة الشيفرة، من الجيد وضع الجمل المنطقية بين قوسين كما هو موضح في المثال التالي

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or
(transform: translateX(1px)) {
    /* ... */
}

تُطبَّق الشيفرة المحددة داخل هذا الاستعلام إذا كان:

1. يدعم المتصفح الخاصيتين display: block و zoom: 1، أو إذا كان
2. يدعم الخاصية display: flex ولا يدعم الخاصية display: table-cell، أو إذا كان
3. يدعم الخاصية transform: translate(1px)‎.

ترجمة -وبتصرف- للفصل Media Queries والفصل Feature Queries من كتاب CSS Notes for Professionals