CSS/@media

القاعدة ‎@media في CSS يمكن أن تستعمل لتطبيق الأنماط بناءً على شروط معيّنة (تسمى media queries)، التي تختبر نوع الجهاز، وخصائصه، وبيئة التشغيل.

لاحظ أنَّ بالإمكان وضع القاعدة ‎@media داخل قواعد At-rules الأخرى، مثل القاعدة ‎@supports.

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

يمكن تطبيق استعلامات الوسائط (media queries) على قواعد ‎@media بالإضافة إلى العنصر <link> في HTML الذي يؤدي إلى جعل صفحة الأنماط كلها تابعة لتحقيق ذاك الشرط.

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css">

أمثلة

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي (أنواع الوسائط all و print و screen)	1.0	1.0	6.0	9.2	1.3
ميزات الوسائط	1.0	1.0	9.0	9.2	1.3
ميزة الوسائط resolution	29.0	3.5	؟	مدعومة	؟

البنية العامة

القاعدة ‎@media تتألف من استعلام أو أكثر عن الوسائط (media queries)، التي يتألف كلٌ منها من نوع وسائط (media type) اختياري، وأي عدد من تعابير ميزات الوسائط (media feature)، يمكن جمع استعلامات الوسائط باستخدام المعاملات المنطقية (logical operators)، وهي غير حساسة لحالة الأحرف.

ستُطبَّق الأنماط المرتبطة باستعلامات الوسائط إذا كانت قيمة الاستعلام هي true، أي أنَّ نوع الوسائط يماثل نوع الجهاز الذي يُعرَض المستند عليه، وكانت نتيجة جميع ميزات الوسائط هي true؛ لاحظ أنَّ الاستعلامات التي فيها أنواع غير معروفة من الوسائط ستكون قيمتها false دومًا.

ملاحظة: صفحات الأنماط المرتبطة مع استعلامات عن الوسائط المُضافة عبر العنصر <link> ستُنزَّل حتى لو كانت نتيجة الاستعلام false، لكن محتوياتها لن تُطبَّق إلا إذا أصبحت نتيجة الاستعلام true.

أنواع الوسائط

أنواع الوسائط تصف التصنيف العام للجهاز؛ وما لم تستعمل المعاملَين المنطقيَين not أو only، فسيكون نوع الوسائط اختياريًا، وقيمته الافتراضية هي all.

all

صفحة الأنماط مناسبة لكل الأجهزة.

print

الغرض من هذا النوع هو تطبيق الأنماط على المحتوى المطبوع أو الظاهر على الشاشة في نافذة معاينة الطباعة.

screen

الغرض من هذا النوع هو شاشات الحاسوب الملونة.

speech

الغرض من هذا النوع هو برمجيات تحويل النص إلى كلام.

ملاحظة: عرَّفَت مواصفة CSS 2.1 و Media Queries 3 عدِّة أنواع وسائط أخرى (وهي tty و tv و projection و handheld و braille و embossed و aural) لكنها أصبحت مهملةً في مواصفة Media Queries 4 ولا يجب استخدامها؛ لاحظ أنَّ النوع aural قد حلّ محلهُ النوع speech.

ميزات الوسائط

ميزات الوسائط هي اختبارات لخصائص المتصفح أو جهاز العرض أو البيئة، واستخدامها اختياريٌ، ويجب أن يحاط كل تعبير يختبر ميزة من ميزات الوسائط بأقواس.

ملاحظة: هنالك بعض الميزات التي أُهمِلَت في مواصفة Media Queries Level 4، وهي device-width و device-height و device-aspect-ratio.

width

يمكن أن تستخدم ميزة width لتطبيق الأنماط اعتمادًا على عرض إطار العرض (viewport).

تُحدَّد الميزة width كقيمة طولية <length> تُمثِّل عرض إطار العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام min-width و max-width لتحديد أدنى عرض وأقصى عرض على التوالي وبالترتيب.

<div>Watch this element as you resize your viewport's width.</div>

شيفرة CSS:

/* تحديد العرض */
@media (width: 360px) {
  div {
    color: red;
  }
}

/* أدنى عرض */
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/* أقصى عرض */
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}

height

يمكن أن تستخدم ميزة height لتطبيق الأنماط اعتمادًا على ارتفاع إطار العرض (viewport).

تُحدَّد الميزة height كقيمة طولية <length> تُمثِّل ارتفاع إطار العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام min-height و max-height لتحديد أدنى ارتفاع وأقصى ارتفاع على التوالي وبالترتيب.

<div>Watch this element as you resize your viewport's height.</div>

شيفرة CSS:

/* تحديد الارتفاع */
@media (height: 360px) {
  div {
    color: red;
  }
}

/* أدنى ارتفاع */
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/* أقصى ارتفاع */
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}

aspect-ratio

يمكن أن تستخدم ميزة aspect-ratio لتطبيق الأنماط اعتمادًا على نسبة أبعاد (aspect ratio) إطار العرض (viewport).

تُحدَّد الميزة aspect-ratio كنسبة <radio> تُمثِّل نسبة العرض-إلى-الارتفاع لإطار العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام min-aspect-ratio و max-aspect-ratio لتحديد أدنى نسبة أبعاد وأقصى نسبة أبعاد على التوالي وبالترتيب.

<div>Watch this element as you resize your viewport's width and height.</div>

شيفرة CSS:

/* تحديد نسبة الأبعاد */
@media (aspect-ratio: 1/1) {
  div {
    color: red;
  }
}

/* أدنى نسبة أبعاد */
@media (min-aspect-ratio: 8/5) {
  div {
    background: yellow;
  }
}

/* أقصى نسبة أبعاد */
@media (max-aspect-ratio: 2/1) {
  div {
    border: 2px solid blue;
  }
}

orientation

يمكن أن تستخدم ميزة aspect-ratio لتطبيق الأنماط اعتمادًا على اتجاه إطار العرض (viewport).

ملاحظة: هذه الميزة لا علاقة لها باتجاه الجهاز، إذ إنَّ فتح لوحة المفاتيح في أغلبية الأجهزة بالوضع الرأسي (portrait) سيؤدي إلى جعل عرض إطار العرض أكبر من ارتفاعه مما يؤدي إلى جعل المتصفح يستعمل أنماط landscape بدلًا من portrait.

تقبل الميزة orientation كلمةً محجوزةً من الكلمتين الآتيتين:

• portrait: إطار العرض في الوضع الرأسي، أي أنَّ ارتفاعه أكبر أو يساوي عرضه.
• landscape: إطار العرض في الوضع الأفقي، أي أنَّ عرضه أكبر من ارتفاعه.

سنستخدم تخطيط flex في المثال الآتي:

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

شيفرة CSS:

body {
  display: flex;
}

div {
  background: yellow;
}

@media screen and (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

resolution

يمكن أن تستخدم ميزة resolution لتطبيق الأنماط اعتمادًا على كثافة البكسلات في شاشة العرض.

تُحدَّد الميزة resolution كقيمة <resolution> تُمثِّل كثافة البكسلات في الشاشة، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام min-resolution و max-resolution لتحديد أدنى وأقصى كثافة للشاشة على التوالي وبالترتيب.

<p>This is a test of your device's pixel density.</p>

شيفرة CSS:

/* تحديد كثافة الشاشة */
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/* أدنى كثافة */
@media (min-resolution: 72dpi) {
  p {
    font-size: 1.5em;
  }
}

/* أقصى كثافة */
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}

scan

يمكن أن تستخدم ميزة scan لتطبيق الأنماط بناءً على عملية المسح (scanning process) المستخدمة من جهاز العرض، لاحظ أنَّ كلمة «مسح» (scanning) في هذا السياق لا علاقة لها بالماسح الضوئي الذي يحوِّل المستندات المطبوعة إلى رقمية، وإنما تصف العملية التي تُعرَض فيها الصورة على شاشة التلفاز أو الحاسوب.

تقبل الميزة scan كلمةً محجوزةً من الكلمتين الآتيتين:

• interlace: المسح المتداخل، أي أنَّ جهاز العرض سيعرض الأسطر الفردية والزوجية بالتبادل، وبعض أجهزة التلفاز تستعمل المسح المتداخل.
• progressive: المسح التدريجي، أي أنَّ جهاز العرض سيعرض الأسطر بالترتيب، وجميع شاشات الحاسوب تستخدم المسح التدريجي.

لاحظ كيف سيتغير نوع الخط في المثال الآتي اعتمادًا على طريقة المسح المستخدمة من جهاز العرض:

<p>If your screen uses interlaced rendering, this text should
   be in a sans-serif font. If your screen uses progressive
   scanning, you should see a serif font.</p>

شيفرة CSS:

p {
  font-family: cursive;
}

@media (scan: interlace) {
  p {
    font-family: sans-serif;
  }
}

@media (scan: progressive) {
  p {
    font-family: serif;
  }
}

grid

يمكن أن تستخدم ميزة grid لتطبيق الأنماط اعتمادًا على إذا كان جهاز العرض يستعمل شاشة نقطية (bitmap) أو على شكل شبكة (grid، مثل الطرفيات terminals، أو أجهزة بريل braille).

تُحدَّد الخاصية grid باستخدام 0 (جهاز العرض على شكل شبكة) أو 1 (جهاز العرض نقطي).

<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device!</p>

شيفرة CSS:

:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: red;
  }
}

update

يمكن أن تستخدم ميزة update لتطبيق الأنماط اعتمادًا على سرعة تعديل جهاز العرض لمظهر المحتويات.

تقبل الميزة update كلمةً محجوزةً من الكلمات الآتية:

• none: لا يمكن تغيير التخطيط بعد عرضه، مثل المستندات المطبوعة على الورق.
• slow: يمكن تغيير تخطيط الصفحة ديناميكيًا اعتمادًا على قواعد CSS، لكن جهاز العرض لن يكون قادرًا على عرض التغييرات بسرعة كافية لكي تكون الحركة سلسلةً، مثل قارئات الكتب أو الأجهزة ذات القدرات المحدودة جدًا.
• fast: يمكن تغيير تخطيط الصفحة ديناميكيًا اعتمادًا على قواعد CSS، وسيكون جهاز العرض قادرًا على عرض التغييرات بسرعة، مثل الحركات أو الانتقالات، كما في شاشات الحواسيب.

مثال عن استخدام الخاصية animation لتحريك النص إن كان الجهاز سريعًا:

<p>If this text animates for you, you are using a fast-updating device.</p>

شيفرة CSS:

@keyframes jiggle {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(25px);
  }
}

@media (update: fast) {
  p {
    animation: 1s jiggle linear alternate infinite;
  }
}

overflow-block

يمكن أن تستخدم ميزة overflow-block لتطبيق الأنماط اعتمادًا على طريقة تعامل جهاز العرض مع المحتوى الذي يزيد عن الصندوق الكتلي على المحور الطولي.

تقبل الميزة overflow-block كلمةً محجوزةً من الكلمات الآتية:

• none: المحتوى الذي يزيد عن الصندوق الكتلي لن يُعرَض.
• scroll: يمكن عرض المحتوى الزائد بالتمرير إليه.
• optional-paged: يمكن عرض المحتوى بالتمرير إليه، لكن يمكن وضع فاصل يدوي للصفحة لجعل المحتوى يتنقل إلى الصفحة الآتية.
• paged: سيُقسَم المحتوى إلى صفحات منفصلة.

مثال:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p>

شيفرة CSS:

@media (overflow-block: scroll) {
  p {
    color: red;
  }
}

overflow-inline

يمكن أن تستخدم ميزة overflow-inline لتطبيق الأنماط اعتمادًا على طريقة تعامل جهاز العرض مع المحتوى الذي يزيد عن الصندوق الكتلي على المحور السطري (inline).

تقبل الميزة overflow-inline كلمةً محجوزةً من الكلمات الآتية:

• none: المحتوى الذي يزيد عن الصندوق الكتلي لن يُعرَض.
• scroll: يمكن عرض المحتوى الزائد بالتمرير إليه.

مثال:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p>

شيفرة CSS:

@media (overflow-inline: scroll) {
  p {
    color: red;
  }
}

color

يمكن أن تستخدم ميزة color لتطبيق الأنماط اعتمادًا على عدد البتات في كل مكوِّن من مكونات اللون (الأحمر والأخضر والأزرق) في جهاز العرض.

تُحدَّد الميزة color كعدد صحيح <integer> يُمثِّل عدد البتات في كل مكوِّن من مكونات اللون (الأحمر والأخضر والأزرق) في جهاز العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام min-color و max-color لتحديد أدنى وأقصى قيمة على التوالي وبالترتيب.

ملاحظة: إذا كان عدد المكونات اللونية تُمثَّل بعدد مختلف من البتات، فستستخدم أدنى قيمة، فمثلًا لو كان جهاز العرض يخصص 5 بتات لقناة اللون الأزرق والأحمر و 6 بتات للون الأخضر، فسيُعدّ جهاز العرض على أنَّه يستخدم 5 بتات لكل مكوِّن لوني.

<p>How many bits does your device support for color components?</p>

شيفرة CSS:

p {
  color: #000;
}

/* أي جاهز ملوّن */
@media (color) {
  p {
    color: #ff0000;
  }
}

/* أي جهاز ملوّن له على الأقل 8 بتات في كل قناة لونية */
@media (min-color: 8) {
  p {
    color: #35bd19;
  }
}

pointer

يمكن أن تستخدم ميزة pointer لتطبيق الأنماط اعتمادًا على دقة مؤشر جهاز الإدخال الرئيسي الذي يستعمله المستخدم.

تقبل الميزة pointer كلمةً محجوزةً من الكلمات الآتية:

• none: آلية الإدخال الأساسية لا تتضمن جهاز تأشير.
• coarse: آلية الإدخال الأساسية تتضمن جهاز تأشير ذا دقةٍ محدودة.
• fine: آلية الإدخال الأساسية تتضمن جهاز تأشير له دقة عالية.

مثال عن صندوق تأشير تتغير أبعاده ولونه اعتمادًا على دقة آلية الإدخال الأساسية (جرِّب هذا المثال عن شاشة حاسوب، وعلى هاتف ذكي):

<input id="test" type="checkbox">
<label for="test">Look at me!</label>

شيفرة CSS:

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid red;
  }
}

hover

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

تقبل الميزة hover كلمةً محجوزةً من الكلمات الآتية:

• none: آلية الإدخال الأساسية لا تسمح بالمرور فوق العناصر بالكليّة أو كان سلوك المرور فوق العناصر غير متناسق (فمثلًا بعض متصفحات الهواتف الذكية تحاكي تأثير المرور فوق العناصر عندما يلمسه المستخدم فترةً مطولةً)، أو لم تكن هنالك آلية إدخال أساسية في الجهاز.
• hover: آلية الإدخال الأساسية تسمح بالمرور فوق العناصر بشكل متناسق.

مثال عن ذلك:

<a href="#">Try hovering over me!</a>

شيفرة CSS:

@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}

any-pointer

يمكن أن تستخدم ميزة any-pointer لتطبيق الأنماط اعتمادًا على دقة مؤشر أي جهاز إدخال يمكن أن يستعمله المستخدم.

تقبل الميزة any-pointer كلمةً محجوزةً من الكلمات الآتية:

• none: لا يوجد جهاز تأشير.
• coarse: هنالك جهاز تأشير (واحد على الأقل) ذو دقةٍ محدودة.
• fine: هنالك جهاز تأشير (واحد على الأقل) له دقة عالية.

لاحظ أنَّ بالإمكان مطابقة أكثر من قيمة وذلك إذا كان هنالك أكثر من جهاز تأشير له خصائص مختلفة.

<input id="test" type="checkbox">
<label for="test">Look at me!</label>

شيفرة CSS:

input[type="checkbox"]:checked {
  background: gray;
}

@media (any-pointer: fine) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (any-pointer: coarse) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid red;
  }
}

any-hover

يمكن أن تستخدم ميزة any-hover لتطبيق الأنماط اعتمادًا على إمكانية مؤشر أي جهاز إدخال يمكن أن يستعمله المستخدم على المرور فوق العناصر.

تقبل الميزة any-hover  كلمةً محجوزةً من الكلمات الآتية:

• none: لا توجد أيّة آلية إدخال تسمح بالمرور فوق العناصر بشكل متناسق.
• hover: توجد آلية إدخال واحدة على الأقل تسمح بالمرور فوق العناصر بشكل متناسق.

مثال عن ذلك:

<a href="#">Try hovering over me!</a>

شيفرة CSS:

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

المعاملات المنطقية

يمكن أن تستعمل المعاملات المنطقية not و and و only لإنشاء استعلام معقد، ويمكن أيضًا دمج عدِّة استعلامات عن الوسائط في قاعدة واحدة بفصلها بفاصلة.

and

يُستخدَم المُعامِل and لدمج ميزتين من ميزات الوسائط في استعلام واحد، ويجب أن يكون ناتج كلا الميزتين true لكي تكون نتيجة الطلبية true، ويُستعمَل هذا المعامل أيضًا لدمج ميزات الوسائط مع أنواع الوسائط.

not

يُستخدَم المعامل not لعكس نتيجة الاستعلام، أي سيُعيد true إذا كانت نتيجة الاستعلام false، والعكس صحيح، وإذا استخدم على قائمة مفصولة بفواصل، فسيعكس قيمة الطلبية التي طُبِّق عليها فقط، وإذا استخدمتَ المعامل not فيجب أن تُحدِّد نوع الوسائط.

لاحظ أنَّ الكلمة المحجوزة not لا يمكن أن تستخدم لعكس نتيجة اختبار إحدى الميزات، وإنما كامل استعلام الوسائط.

only

يفيد المعامل only في تطبيق الأنماط إذا تحقق كامل الاستعلام، وهو مفيد لمنع المتصفحات القديمة من تطبيق الأنماط، وإذا استخدم المعامل only فيجب تحديد نوع الوسائط.

القوائم المفصولة بفواصل

ستُعامَل الاستعلامات التي يُفصَل بينها بفاصلة بمعزل عن البقية، فلو كانت نتيجة إحدى الاستعلامات true فسيكون كامل الاستعلام true، أي أنَّ القوائم المفصولة بفواصل تشبه المعامل or.

البنية الرسمية

@media <media-query-list> {
  <group-rule-body>
}

حيث:

<media-query-list> = <media-query>#

حيث:

<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

حيث:

<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

حيث:

<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

حيث:

<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

حيث:

<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

حيث:

<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

انظر أيضًا

• صفحة القاعدة supports@ التي تسمح لنا بتعريف قواعد بناءً على دعم المتصفح لميزات مُعيّنة في CSS.

مصادر ومواصفات

• مواصفة CSS Conditional Rules Module Level 3.
• مسودة Media Queries Level 4.
• مواصفة Media Queries.
• مواصفة ‎CSS Level 2 (Revision 1)‎.