وثائق CSS قابلة للتشغيل: استعلامات الوسائط

Q: كيف أكتب استعلام وسائط للوضع الداكن؟

استخدم @media (prefers-color-scheme: dark) { ... }. يتطابق حين يكون نظام تشغيل المستخدم أو متصفحه مضبوطًا على سمة داكنة، ويمكنك تجاوز الألوان أو متغيرات CSS داخله.

استعلام وسائط في مثال واحد

يحيط استعلام الوسائط CSS بشرط. القواعد داخل @media (min-width: 600px) لا تنطبق إلا ما دام عرض نافذة العرض 600px على الأقل:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Media query</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .banner { padding: 16px; background: #f59e0b; color: #111827; }
    .banner::after { content: " (narrow: under 600px)"; }

    @media (min-width: 600px) {
      .banner { background: #2563eb; color: white; }
      .banner::after { content: " (wide: 600px or more)"; }
    }
  </style>
</head>
<body>
  <p class="banner">This box changes color at 600px</p>
  <p id="w"></p>
  <script>
    const show = () => { document.getElementById('w').textContent = 'This preview is ' + window.innerWidth + 'px wide.'; };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

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

صيغة @media

@media (min-width: 600px) { ... }                        /* one condition */
@media (min-width: 600px) and (max-width: 899px) { ... } /* both must be true */
@media (max-width: 599px), print { ... }                 /* either one (comma = or) */
@media not print { ... }                                 /* negation */
@media screen and (orientation: landscape) { ... }       /* media type plus a feature */
@media (width >= 600px) { ... }                          /* range syntax */
@media (600px <= width < 900px) { ... }                  /* a range with both ends */

تحتاج and إلى مسافة على جانبيها: (min-width: 600px)and(max-width: 900px) غير صالحة ويُتجاهل الاستعلام كله. صيغة النطاق (width >= 600px) مدعومة في الإصدارات الحالية من Chrome وFirefox وSafari، وهي أوضح في القراءة من min-width، خاصةً لمعنى «حتى هذا الحد من دون أن يشمله».

الميزات التي ستستخدمها أكثر:

الميزة	تتطابق حين	مثال
`min-width` / `width >=`	تكون نافذة العرض بهذا العرض على الأقل	`(min-width: 768px)`
`max-width` / `width <=`	تكون نافذة العرض بهذا العرض على الأكثر	`(max-width: 767px)`
`orientation`	`portrait` (أطول من عرضها) أو `landscape`	`(orientation: landscape)`
`hover`	المؤشر الرئيسي يستطيع التمرير (`hover`) أو لا (`none`، معظم الشاشات اللمسية)	`(hover: hover)`
`pointer`	المؤشر الرئيسي `fine` (فأرة) أو `coarse` (إصبع)	`(pointer: coarse)`
`prefers-color-scheme`	اختار المستخدم سمة `dark` أو `light`	`(prefers-color-scheme: dark)`
`prefers-reduced-motion`	طلب المستخدم من النظام حركة أقل	`(prefers-reduced-motion: reduce)`
`print` (نوع وسائط)	تُطبع الصفحة أو تُحفظ بصيغة PDF	`@media print`

الهاتف أولًا: نقاط توقف min-width

اكتب تخطيط الهاتف كـ CSS أساسية، ثم أضف استعلامات min-width تغيّر التخطيط كلما زادت المساحة. كل استعلام يكفيه أن يصف ما يتغير:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mobile first</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .cards div { background: #16a34a; color: white; padding: 18px; border-radius: 6px; }

    @media (min-width: 480px) {
      .cards { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 720px) {
      .cards { grid-template-columns: 1fr 1fr 1fr; }
    }
  </style>
</head>
<body>
  <div class="cards"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>
  <p id="out"></p>
  <script>
    const show = () => {
      const n = getComputedStyle(document.querySelector('.cards')).gridTemplateColumns.split(' ').length;
      document.getElementById('out').textContent = innerWidth + 'px wide: ' + n + ' column(s)';
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

في نافذة سطح مكتب عريضة تتجاوز المعاينة 720px، فترى ثلاثة أعمدة؛ والسطر تحت الشبكة يعرض العرض وعدد الأعمدة. ضيّق النافذة فتنزل إلى عمودين تحت 720px وإلى عمود واحد تحت 480px. ترتيب الاستعلامين مهم: كلاهما صحيح على الشاشة العريضة، واللاحق يفوز، لذلك تُرتَّب استعلامات min-width من الأصغر إلى الأكبر. (ومع استعلامات max-width يكون العكس: الأكبر أولًا.)

اختيار نقاط التوقف

لا توجد قائمة رسمية. هذه قيم شائعة وما تفصل بينه عادةً:

نقطة التوقف	عادةً
`min-width: 640px`	الهواتف الكبيرة بالوضع الأفقي، والأجهزة اللوحية الصغيرة
`min-width: 768px`	الأجهزة اللوحية بالوضع العمودي
`min-width: 1024px`	الأجهزة اللوحية بالوضع الأفقي، والحواسيب المحمولة الصغيرة
`min-width: 1280px`	أجهزة سطح المكتب

طريقة أفضل: ابدأ بالتخطيط الضيق، ووسّع النافذة حتى يبدو شيء خاطئًا (أسطر طويلة جدًا، بطاقات عريضة جدًا)، وضع نقطة توقف هناك. نقطتان أو ثلاث تكفي معظم الصفحات. وغالبًا لا تحتاج إلى أي نقطة: repeat(auto-fit, minmax(200px, 1fr)) في grid، وflex-wrap، وclamp() تتكيف باستمرار.

كل صفحة تحتاج إلى وسم meta الخاص بنافذة العرض

من دون هذا الوسم في <head> ترتّب متصفحات الهاتف الصفحة كأن عرض الشاشة نحو 980px ثم تصغّرها، فيكون استعلامك min-width: 480px صحيحًا دائمًا ولا يظهر تخطيط الهاتف أبدًا:

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

تشرح صفحة meta viewport كل قيمة فيه.

الوضع الداكن مع prefers-color-scheme

تتبع prefers-color-scheme إعداد الوضع الفاتح أو الداكن في نظام التشغيل. أنظف طريقة لاستخدامها أن تحفظ الألوان في متغيرات CSS وتغيّر المتغيرات فقط داخل الاستعلام:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dark mode</title>
  <style>
    :root { --bg: #ffffff; --text: #111827; --card: #e5e7eb; }

    @media (prefers-color-scheme: dark) {
      :root { --bg: #111827; --text: #f9fafb; --card: #1f2937; }
    }

    /* A theme toggle sets the same variables by hand */
    :root[data-theme="dark"] { --bg: #111827; --text: #f9fafb; --card: #1f2937; }
    :root[data-theme="light"] { --bg: #ffffff; --text: #111827; --card: #e5e7eb; }

    body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; padding: 12px; }
    .card { background: var(--card); padding: 16px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="card">This card follows your system setting, or the button.</div>
  <p><button id="toggle">Switch theme</button></p>
  <p id="out"></p>
  <script>
    const mq = matchMedia('(prefers-color-scheme: dark)');
    const root = document.documentElement;
    const show = () => {
      document.getElementById('out').textContent =
        'Dark mode query matches: ' + mq.matches + '. Theme: ' + (root.dataset.theme || 'system');
    };
    document.getElementById('toggle').addEventListener('click', () => {
      const dark = root.dataset.theme ? root.dataset.theme === 'dark' : mq.matches;
      root.dataset.theme = dark ? 'light' : 'dark';
      show();
    });
    mq.addEventListener('change', show);
    show();
  </script>
</body>
</html>

في هذه المعاينة قد يعرض الاستعلام false حتى لو كان نظامك على الوضع الداكن: لا يمرّر Chrome إعداد النظام إلى إطار معزول (sandbox) مثل هذا. يغيّر الزر المتغيرات نفسها يدويًا، وهكذا يعمل مبدّل السمة في المواقع. المحدد :root[data-theme] أكثر تحديدًا من :root البسيط داخل الاستعلام، لذلك يتقدّم اختيار القارئ على إعداد النظام. احفظ المثال في ملف وافتحه لترى الاستعلام يتبع نظامك.

يعرض السكربت النصف الثاني من استعلامات الوسائط: تشغّل matchMedia() الاستعلام نفسه من JavaScript، وتعيد هل يتطابق الآن، وتطلق حدث change حين يتغير الجواب. استخدمها حين يعتمد السلوك (لا التنسيق وحده) على الشاشة، مثل فتح قائمة بطريقة مختلفة على الأجهزة اللمسية.

والحركة تعمل بالطريقة نفسها. أحط الحركات الكبيرة أو المتكررة بفحص لـ prefers-reduced-motion، كما تعرض صفحة animation.

استعلامات الحاوية: حين يجب أن يقرر المكوّن

استعلام الوسائط لا يعرف إلا نافذة العرض. البطاقة التي تقع في عمود رئيسي عريض وفي شريط جانبي ضيق في الصفحة نفسها تحتاج إلى معرفة مساحتها هي بدلًا من ذلك. هذا هو استعلام الحاوية: ميّز الأب بـ container-type: inline-size، ثم استخدم @container بالشروط نفسها.

اسحب زاوية الصندوق الرمادي لتغيير حجمه. تبدّل البطاقة تخطيطها عند عرض 360px للصندوق، مهما كان حجم النافذة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Container query</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .holder {
      container-type: inline-size;
      resize: horizontal;
      overflow: hidden;
      width: 480px;
      max-width: 100%;
      min-width: 160px;
      padding: 8px;
      background: #e5e7eb;
    }
    .card { display: grid; gap: 10px; background: white; padding: 10px; border-radius: 8px; }
    .pic { height: 70px; background: #2563eb; border-radius: 6px; }

    @container (min-width: 360px) {
      .card { grid-template-columns: 120px 1fr; }
    }
  </style>
</head>
<body>
  <div class="holder">
    <div class="card"><div class="pic"></div><p>Image beside the text when the box is 360px or wider, above it when narrower.</p></div>
  </div>
</body>
</html>

عند عرضه الابتدائي 480px تقع الصورة بجانب النص. اسحب الصندوق ليصبح أضيق من 376px (360px من المحتوى مع 8px من الحشو على كل جانب) فتنتقل الصورة فوق النص. تعمل استعلامات الحاوية في كل المتصفحات الرئيسية الحالية.

أنماط للطباعة

تنطبق @media print فقط حين تُطبع الصفحة أو تُحفظ بصيغة PDF. أخفِ التنقل والأزرار، واستخدم نصًا داكنًا على خلفية بيضاء:

@media print {
  nav, .ad, button { display: none; }
  body { color: black; background: white; }
  a::after { content: " (" attr(href) ")"; } /* print the URL after each link */
}

أخطاء شائعة

لا وسم meta لنافذة العرض. عندها تعلن الهواتف نافذة تخطيط عريضة ولا تتطابق استعلامات الشاشة الصغيرة أبدًا.
استعلامات بترتيب خاطئ. استعلامان صحيحان بالمحدد نفسه: اللاحق يفوز. رتّب استعلامات min-width من الصغير إلى الكبير.
حدود متداخلة أو بينها فجوة. يتطابق max-width: 768px وmin-width: 768px كلاهما عند 768px بالضبط. استخدم 767px لأحدهما، أو صيغة النطاق (width < 768px) و(width >= 768px).
لا مسافة بعد and. and( غير صالحة ويُسقط الاستعلام بصمت.
الاختبار فقط بتغيير حجم نافذة سطح المكتب. افحص أيضًا على هاتف حقيقي أو في وضع الأجهزة في المتصفح، الذي يطبّق نافذة عرض الهاتف ونسبة البكسلات واللمس.
نقاط توقف كثيرة جدًا. إن احتاج كل مكوّن إلى نقاطه الخاصة، جرّب auto-fit في grid أو flex-wrap أو استعلامات الحاوية بدلًا من ذلك.

الأسئلة الشائعة

ما هو استعلام الوسائط في CSS؟

قاعدة تطبّق CSS التي بداخلها فقط حين يكون شرط يخص الجهاز أو النافذة صحيحًا. تطبّق @media (min-width: 600px) { ... } أنماطها فقط حين يكون عرض نافذة العرض 600px على الأقل، وهكذا تتكيف الصفحة الواحدة من الهواتف إلى أجهزة سطح المكتب.

هل أستخدم استعلامات min-width أم max-width؟

معظم المواقع تكتب بنهج الهاتف أولًا: CSS الأساسية للشاشات الصغيرة، واستعلامات min-width تضيف التخطيط كلما كبرت الشاشة. أما استعلامات max-width فتعمل بالعكس، بدءًا من تخطيط سطح المكتب. كلاهما يعمل؛ لكن خلطهما على العنصر نفسه يؤدي إلى تداخلات وفجوات عند الحدود.

ما نقاط التوقف القياسية لاستعلامات الوسائط؟

لا يوجد معيار رسمي. الخيارات الشائعة نحو 640px و768px و1024px و1280px، لكن القاعدة الأفضل أن تضيف نقطة توقف حيث يبدأ تخطيطك أنت بالظهور بشكل خاطئ، وأن تبقي عدد نقاط التوقف قليلًا.

لماذا لا يعمل استعلام الوسائط على الهاتف؟

السبب الأكثر شيوعًا غياب وسم meta الخاص بنافذة العرض. من دون <meta name="viewport" content="width=device-width, initial-scale=1"> تتظاهر متصفحات الهاتف بأن عرض الصفحة نحو 980px، فلا تتطابق استعلامات العرض الصغير أبدًا. وتحقق أيضًا أن الاستعلام يأتي بعد القواعد التي يتجاوزها.

كيف أكتب استعلام وسائط للوضع الداكن؟

استخدم @media (prefers-color-scheme: dark) { ... }. يتطابق حين يكون نظام تشغيل المستخدم أو متصفحه مضبوطًا على سمة داكنة، ويمكنك تجاوز الألوان أو متغيرات CSS داخله.

ما الفرق بين استعلامات الوسائط واستعلامات الحاوية؟

يفحص استعلام الوسائط نافذة العرض (النافذة كلها). أما استعلام الحاوية، المكتوب بـ @container، فيفحص حجم عنصر أب تميّزه بـ container-type: inline-size. استخدم استعلامات الحاوية لمكوّن يظهر في أماكن عريضة وضيقة في الصفحة نفسها.

مفاهيم ذات صلة