استعلامات الوسائط (Media Queries) في CSS – CSS

تسمح استعلامات الوسائط (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 هي باختصار:

المعامل الوصف
mediatype (اختياري) يُعرِّف الوسط (الجهاز) الذي تُعرض عليه الصفحة،
not (اختياري) يُطبِّق أنماط CSS على كل الأجهزة عدا الجهاز المحدد به.
media feature يًحدِّد خصائص استعلامات الوسائط. الجدول التالي يبين الخصائص المتاحة.

تحديد نوع الوسط أو الجهاز عبر 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;
    }
}

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

نوع الجهاز أو الوسط الوصف
all كل الأجهزة.
screen أجهزة الحاسوب.
print الطابعات، وتستخدم لعمل نسخة مطبوعة من الصفحة.
handheld تشمل الهواتف المحمولة والأجهزة ذات الشاشات الصغيرة.
projection تستعمل لعمل العروض المرئية presentations، مثل جهاز الإسقاط projector
aural الأجهزة الصوتية.
braille أجهزة برايل اللمسية.
embossed طابعات برايل.
tv أجهزة التلفاز.
tty الأجهزة ذات شبكات الأحرف الثابتة.

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

على الرغم من أن هذا النوع من استعلامات لوسائط يعمل فقط على مصفحات المبنية على مُحرِّك 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)

الخاصية الوصف
aspect-ratio نسبة ارتفاع الجهاز إلى عرضه.
color تُشير إلى عدد البِتَّات (الثنائيات) المستعملة لتمثيل اللون في جهاز العرض المتسهدف، وتكون قيمتها صفر إذا كان الجهاز غير ملون.
color-index تشير إلى عدد المُدخلات في جدول ألوان جهاز العرض المستهدف.
gird تُحدِّد ما إذا كان الجهاز شبكي أم انه يسخدم الصور النقطية.
height تُحدد ارتفاع مساحة العرض الخاصة بالجهاز.
max-width تُحدد أكبر عرض تُطبق عليه قواعد CSS.
min-width تُحدد أقل عرض تُطبق عليه قواعد CSS.
max-height تُحدد أكبر ارتفاع تُطبق عليه قواعد CSS.
min-height تُحدد أقل ارتفاع تُطبق عليه قواعد CSS.
monochrome تشير إلى عدد البِتَّات (الثنائيات) في البكسل الواحد على جهاز عرض ذو تدرج رمادي.
orientation تُحدد اتجاه التدوير (أفقي أو رأسي) الذي تُطبَّق فيه قواعد CSS.
resolution تشير إلى وضوح (كثافة بكسلات) جهاز العرض.
scan تشير إلى عملية المسح الضوئي لأجهزة العرض التلفازية.
width تُحدد عرض مساحة العرض الخاصة بالجهاز.

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

الخاصية الوصف
device-aspect-ratio تُطبق أنماط CSS فقط على الاجهزة التي تطابق نسبة ارتفاعها إلى عرضها النسبة المحددة بهذه الخاصية.
max-device-width مماثلة لخاصية max-width لكنها تقيس عرض الشاشة الكُلي بدلًا عن عرض شاشة المتصفح.
min-device-width مماثلة لخاصية min-width لكنها تقيس عرض الشاشة الكُلي بدلًا عن عرض شاشة المتصفح.
max-device-height مماثلة لخاصية max-height لكنها تقيس ارتفاع الشاشة الكُلي بدلًا عن ارتفاع شاشة المتصفح.
min-device-height مماثلة لخاصية min-height لكنها تقيس ارتفاع الشاشة الكُلي بدلًا عن ارتفاع شاشة المتصفح.

العرض (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="https://academy.hsoub.com/programming/css/%D8%A7%D8%B3%D8%AA%D8%B9%D9%84%D8%A7%D9%85%D8%A7%D8%AA-%D8%A7%D9%84%D9%88%D8%B3%D8%A7%D8%A6%D8%B7-media-queries-%D9%81%D9%8A-css-r1059/respond.min.js">
   </script>
   <![endif]
  1. استخدام مكتبة CSS Mediaqueries
   <!--[if It IE 9]>
   <script>
       <src="https://academy.hsoub.com/programming/css/%D8%A7%D8%B3%D8%AA%D8%B9%D9%84%D8%A7%D9%85%D8%A7%D8%AA-%D8%A7%D9%84%D9%88%D8%B3%D8%A7%D8%A6%D8%B7-media-queries-%D9%81%D9%8A-css-r1059/css3-mediaqueries.js">
   </script>
   <![endif]

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

<!--[if It IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="https://academy.hsoub.com/programming/css/%D8%A7%D8%B3%D8%AA%D8%B9%D9%84%D8%A7%D9%85%D8%A7%D8%AA-%D8%A7%D9%84%D9%88%D8%B3%D8%A7%D8%A6%D8%B7-media-queries-%D9%81%D9%8A-css-r1059/style.ieIt9.css" />
<![endif]-->

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

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

القيمة الوصف
auto تُضاف فواصل الصفحات تلقائيًا.
always تُضيف فواصل الصفحات دائمًا.
avoid تتجنب اضافة فواصل الصفحات ما أمكن.
left تُضيف فواصل الصفحات، وتعتبر الصفحة التالية صفحة يُسرى.
right تُضيف فواصل الصفحات، وتعتبر الصفحة التالية صفحة يُمنى.
initial تُرجع القيمة الإبتدائية للخاصية.
inherit ترث قيمة الخاصية من العنصر الأب.

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

مثال

@media print {
    p {
        page-break-inside: avoid;
    }
    h1 {
        page-break-before: always;
    }
    h2 {
        page-break-after: avoid;
    }
}
  • القاعدة الأولى تمنع إضافة فواصل الصفحات داخل الفقرة، وبمعنى آخر أنها تمنع فصل الفقرة على صفحتين.
  • القاعدة الثانية تضيف تبدأ صفحة جديدة قبل كل عناصر h1، أي أن كل عنصر h1 سيبدأ في صفحة جديدة.
  • القاعدة الثالثة تمنع بدء صفحة جديدة بعد عناصر h2.
المعامل الوصف
(property: value) تكون صحيحة إذا كانت الخاصية المحددة مدعومة في المتصفح الذي تُعرض عليه الصفحة.
and تكون صحيحة إذا وقفط إذا تحقق الشرطان معًا.
not تكون صحيحة إذا لم يتحقق الشرط.
or تكون صحيحة إذا تحقق أحد الشروط.
(…) مجموعة الشروط.

استخدام 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


Source link

اظهر المزيد
زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

الاعلانات هي مصدرنا الوحيد لدفع التكلفة التشغيلية لهذا المشروع الريادي يرجى الغاء تفعيل حاجب الأعلانات