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

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

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

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

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

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

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

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

يمكنك استخدام قاعدة at-rule‏ @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 إلا إذا تطابق نوع الوسائط وكان الشرط صحيحًا أيضًا. وتُعرف هذه الشروط باسم ميزات الوسائط.

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

@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، قد يكون أمرًا جيدًا، قد لا يكون من المفيد استخدام جدول تصفُّح منفصل لكل طلب استعلام عن الوسائط. استخدِم قواعد at-rules‏ @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 على الأقل وارتفاعه 30em على الأقل لكي يتم تطبيق أنماط الأعمدة. تم اختيار نقاط التوقف هذه استنادًا إلى مقدار المحتوى.

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

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

التحقّق من فهمك

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