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

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

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

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

@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. */
}

يمكن أيضًا كتابة طلب البحث عن الوسائط هذا باستخدام ميزة الوسائط width وعامل التشغيل "أقل من أو يساوي".

@media (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. /*
}

يمكن أيضًا كتابة ذلك باستخدام صيغة النطاق.

@media (50em <= 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;
  }
}

يمكنك أيضًا استخدام الكلمتَين الرئيسيتَين or وnot للتعبير عن حالات أكثر تعقيدًا عندما تريد تطبيق أنماط. قد يكون من الصعب منطقيًا التفكير في هذه الحالات، لذا احرص على اختبارها للتأكّد من أنّها تعمل وتتفاعل على النحو المتوقّع.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

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

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

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