الاستعلامات عن الوسائط

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

تبدأ طلبات البحث عن الوسائط باستخدام الكلمة الرئيسية @media (خدمة CSS في القاعدة)، ويمكن استخدامها لمجموعة متنوعة من حالات الاستخدام.

استهداف أنواع مختلفة من المخرجات

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

في هذا المثال، يتم ضبط لون الخلفية على اللون الرمادي. ولكن إذا تمت طباعة الصفحة، ينبغي أن يكون لون الخلفية شفافًا. يؤدي هذا إلى حفظ حبر الطابعة للمستخدم.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

يمكنك استخدام القاعدة @media في القاعدة في ورقة الأنماط بهذه الطريقة، أو يمكنك إنشاء ورقة أنماط منفصلة واستخدام السمة media على عنصر link:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

إذا لم تحدد أي نوع وسائط لخدمة CSS، ستتوفّر تلقائيًا قيمة نوع الوسائط all. هاتان كتلتان CSS متكافئتان:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

هذان السطران في HTML متكافئان أيضًا:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

شروط طلب البحث

يمكنك إضافة شروط إلى أنواع الوسائط. وتسمى هذه الاستعلامات عن الوسائط. يتم تطبيق CSS فقط إذا كان نوع الوسائط مطابقًا وكان الشرط أيضًا true. وتسمى هذه الشروط ميزات الوسائط.

هذه هي بناء الجملة لاستعلامات الوسائط:

@media type and (feature)

يمكنك استخدام الاستعلامات عن الوسائط في عنصر link إذا كانت أنماطك في ورقة أنماط منفصلة:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

لنفترض أنك تريد تطبيق أنماط مختلفة اعتمادًا على ما إذا كانت نافذة المتصفح في الوضع الأفقي (عرض إطار العرض أكبر من ارتفاعه) أو الوضع الرأسي (ارتفاع إطار العرض أكبر من عرضه). تتوفّر ميزة وسائط تُسمى orientation يمكنك استخدامها لاختبار ما يلي:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

أو إذا كنت تفضل الحصول على أوراق أنماط منفصلة:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

في هذه الحالة، يكون نوع الوسائط هو all. ولأن هذه هي القيمة التلقائية، يمكنك استبعادها إذا أردت:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

أو استخدام أوراق أنماط منفصلة:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

أثناء استخدام أوراق أنماط منفصلة لأنواع مختلفة من الوسائط، مثل print، قد لا يُنصح باستخدام ورقة أنماط منفصلة لكل طلب بحث عن وسائط. يمكنك استخدام @media في القواعد بدلاً من ذلك.

ضبط الأنماط استنادًا إلى حجم إطار العرض

بالنسبة للتصميم سريع الاستجابة، تتضمن إحدى ميزات الوسائط الأكثر فائدة أبعاد إطار عرض المتصفح. لتطبيق الأنماط عندما تكون نافذة المتصفّح أعرض من عرض معيّن، استخدِم min-width.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

يمكنك استخدام ميزة الوسائط max-width لتطبيق أنماط أقل من عرض معيّن:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

يمكنك استخدام أي وحدات طول في CSS في الاستعلامات عن الوسائط. إذا كان معظم المحتوى يستند إلى الصور، قد تكون وحدات البكسل هي الأنسب. إذا كان معظم المحتوى يستند إلى النص، من الأفضل على الأرجح استخدام وحدة نسبية تستند إلى حجم النص، مثل em أو ch:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

يمكنك أيضًا دمج الاستعلامات عن الوسائط لتطبيق أكثر من شرط واحد. يمكنك استخدام كلمة and لدمج استعلامات الوسائط:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

اختيار نقاط الإيقاف استنادًا إلى المحتوى

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

في هذا المثال، 50em هي النقطة التي تصبح فيها أسطر النص طويلة بشكل غير مريح. لذلك يتم إنشاء نقطة إيقاف لجعل الواجهة أكثر وضوحًا. باستخدام السمة column-count، يتم تقسيم النص إلى عمودين بدءًا من تلك النقطة فصاعدًا.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

النُسخ

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

يمكنك الجمع بين استعلامات عن الوسائط بحيث لا يتم تطبيق الأنماط إلا عندما تكون جميع الشروط صحيحة. في هذا المثال، يجب أن يكون عرض إطار العرض 50em وارتفاعه 60em على الأقل حتى يتم تطبيق أنماط الأعمدة. وتم اختيار نقاط الإيقاف هذه بناءً على حجم المحتوى.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

توضح هذه الأمثلة كيف يمكن استخدام الاستعلامات عن الوسائط لتكييف التصميمات مع شكل جهاز المستخدم، ولكن لا شيء سوى زيادة الاحتمالات. تتجاوز استعلامات الوسائط حدود العرض والارتفاع، بل يتم من خلالها الوصول إلى تفضيلات المستخدم لميزات إمكانية الوصول وألوان المظاهر. يعد استخدام استعلامات الوسائط لإجراء تعديلات على التخطيط بداية رائعة للتصميم سريع الاستجابة، والذي يعتمد على هذه الميزات وأكثر.

التحقّق من استيعابك

اختبر معلوماتك حول استعلامات الوسائط المتجاوبة.