الفرق بين المراجعتين ل"CSS/@media"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
جميل-بيلوني (نقاش | مساهمات) ط |
||
(3 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:القاعدة <code>@media</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:القاعدة <code>@media</code>}}</noinclude> | ||
− | القاعدة <code>@media</code> في CSS يمكن أن تستعمل لتطبيق الأنماط بناءً على شروط معيّنة (تسمى media queries)، التي تختبر نوع الجهاز، وخصائصه، وبيئة التشغيل. | + | القاعدة <code>@media</code> في [[CSS]] يمكن أن تستعمل لتطبيق الأنماط بناءً على شروط معيّنة (تسمى media queries)، التي تختبر نوع الجهاز، وخصائصه، وبيئة التشغيل. |
لاحظ أنَّ بالإمكان وضع القاعدة <code>@media</code> داخل قواعد At-rules الأخرى، مثل القاعدة <code>[[CSS/@supports|@supports]]</code>.<syntaxhighlight lang="css"> | لاحظ أنَّ بالإمكان وضع القاعدة <code>@media</code> داخل قواعد At-rules الأخرى، مثل القاعدة <code>[[CSS/@supports|@supports]]</code>.<syntaxhighlight lang="css"> | ||
سطر 16: | سطر 16: | ||
} | } | ||
} | } | ||
− | </syntaxhighlight>يمكن تطبيق استعلامات الوسائط (media queries) على قواعد <code>@media</code> بالإضافة إلى العنصر <code>[[HTML/link|<link>]]</code> في HTML الذي يؤدي إلى جعل صفحة الأنماط كلها تابعة لتحقيق ذاك الشرط.<syntaxhighlight lang="html"> | + | </syntaxhighlight>يمكن تطبيق استعلامات الوسائط (media queries) على قواعد <code>@media</code> بالإضافة إلى العنصر <code>[[HTML/link|<link>]]</code> في [[HTML]] الذي يؤدي إلى جعل صفحة الأنماط كلها تابعة لتحقيق ذاك الشرط.<syntaxhighlight lang="html"> |
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css"> | <link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css"> | ||
سطر 105: | سطر 105: | ||
يمكن أن تستخدم ميزة <code>width</code> لتطبيق الأنماط اعتمادًا على عرض إطار العرض (viewport). | يمكن أن تستخدم ميزة <code>width</code> لتطبيق الأنماط اعتمادًا على عرض إطار العرض (viewport). | ||
− | تُحدَّد | + | تُحدَّد الميزة <code>width</code> كقيمة طولية <code>[[CSS/length|<length>]]</code> تُمثِّل عرض إطار العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام <code>min-width</code> و <code>max-width</code> لتحديد أدنى عرض وأقصى عرض على التوالي وبالترتيب.<syntaxhighlight lang="html"> |
<div>Watch this element as you resize your viewport's width.</div> | <div>Watch this element as you resize your viewport's width.</div> | ||
سطر 135: | سطر 135: | ||
يمكن أن تستخدم ميزة <code>height</code> لتطبيق الأنماط اعتمادًا على ارتفاع إطار العرض (viewport). | يمكن أن تستخدم ميزة <code>height</code> لتطبيق الأنماط اعتمادًا على ارتفاع إطار العرض (viewport). | ||
− | تُحدَّد | + | تُحدَّد الميزة <code>height</code> كقيمة طولية <code>[[CSS/length|<length>]]</code> تُمثِّل ارتفاع إطار العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام <code>min-height</code> و <code>max-height</code> لتحديد أدنى ارتفاع وأقصى ارتفاع على التوالي وبالترتيب.<syntaxhighlight lang="html"> |
<div>Watch this element as you resize your viewport's height.</div> | <div>Watch this element as you resize your viewport's height.</div> | ||
سطر 164: | سطر 164: | ||
يمكن أن تستخدم ميزة <code>aspect-ratio</code> لتطبيق الأنماط اعتمادًا على نسبة أبعاد (aspect ratio) إطار العرض (viewport). | يمكن أن تستخدم ميزة <code>aspect-ratio</code> لتطبيق الأنماط اعتمادًا على نسبة أبعاد (aspect ratio) إطار العرض (viewport). | ||
− | تُحدَّد | + | تُحدَّد الميزة <code>aspect-ratio</code> كنسبة <code><radio></code> تُمثِّل نسبة العرض-إلى-الارتفاع لإطار العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام <code>min-aspect-ratio</code> و <code>max-aspect-ratio</code> لتحديد أدنى نسبة أبعاد وأقصى نسبة أبعاد على التوالي وبالترتيب.<syntaxhighlight lang="html"> |
<div>Watch this element as you resize your viewport's width and height.</div> | <div>Watch this element as you resize your viewport's width and height.</div> | ||
سطر 228: | سطر 228: | ||
يمكن أن تستخدم ميزة <code>resolution</code> لتطبيق الأنماط اعتمادًا على كثافة البكسلات في شاشة العرض. | يمكن أن تستخدم ميزة <code>resolution</code> لتطبيق الأنماط اعتمادًا على كثافة البكسلات في شاشة العرض. | ||
− | تُحدَّد | + | تُحدَّد الميزة <code>resolution</code> كقيمة <code>[[CSS/resolution|<resolution>]]</code> تُمثِّل كثافة البكسلات في الشاشة، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام <code>min-resolution</code> و <code>max-resolution</code> لتحديد أدنى وأقصى كثافة للشاشة على التوالي وبالترتيب.<syntaxhighlight lang="html"> |
<p>This is a test of your device's pixel density.</p> | <p>This is a test of your device's pixel density.</p> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
سطر 284: | سطر 284: | ||
يمكن أن تستخدم ميزة <code>grid</code> لتطبيق الأنماط اعتمادًا على إذا كان جهاز العرض يستعمل شاشة نقطية (bitmap) أو على شكل شبكة (grid، مثل الطرفيات terminals، أو أجهزة بريل braille). | يمكن أن تستخدم ميزة <code>grid</code> لتطبيق الأنماط اعتمادًا على إذا كان جهاز العرض يستعمل شاشة نقطية (bitmap) أو على شكل شبكة (grid، مثل الطرفيات terminals، أو أجهزة بريل braille). | ||
− | تُحدَّد | + | تُحدَّد الخاصية grid باستخدام 0 (جهاز العرض على شكل شبكة) أو 1 (جهاز العرض نقطي).<syntaxhighlight lang="html"> |
<p class="unknown">I don't know if you're using a grid device. :-(</p> | <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="bitmap">You are using a bitmap device.</p> | ||
سطر 382: | سطر 382: | ||
يمكن أن تستخدم ميزة <code>color</code> لتطبيق الأنماط اعتمادًا على عدد البتات في كل مكوِّن من مكونات اللون (الأحمر والأخضر والأزرق) في جهاز العرض. | يمكن أن تستخدم ميزة <code>color</code> لتطبيق الأنماط اعتمادًا على عدد البتات في كل مكوِّن من مكونات اللون (الأحمر والأخضر والأزرق) في جهاز العرض. | ||
− | تُحدَّد | + | تُحدَّد الميزة <code>color</code> كعدد صحيح <code>[[CSS/integer|<integer>]]</code> يُمثِّل عدد البتات في كل مكوِّن من مكونات اللون (الأحمر والأخضر والأزرق) في جهاز العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام <code>min-color</code> و <code>max-color</code> لتحديد أدنى وأقصى قيمة على التوالي وبالترتيب. |
ملاحظة: إذا كان عدد المكونات اللونية تُمثَّل بعدد مختلف من البتات، فستستخدم أدنى قيمة، فمثلًا لو كان جهاز العرض يخصص 5 بتات لقناة اللون الأزرق والأحمر و 6 بتات للون الأخضر، فسيُعدّ جهاز العرض على أنَّه يستخدم 5 بتات لكل مكوِّن لوني.<syntaxhighlight lang="html"> | ملاحظة: إذا كان عدد المكونات اللونية تُمثَّل بعدد مختلف من البتات، فستستخدم أدنى قيمة، فمثلًا لو كان جهاز العرض يخصص 5 بتات لقناة اللون الأزرق والأحمر و 6 بتات للون الأخضر، فسيُعدّ جهاز العرض على أنَّه يستخدم 5 بتات لكل مكوِّن لوني.<syntaxhighlight lang="html"> | ||
سطر 568: | سطر 568: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | |||
+ | == انظر أيضًا == | ||
+ | * صفحة القاعدة <code>[[CSS/@supports|supports@]]</code> التي تسمح لنا بتعريف قواعد بناءً على دعم المتصفح لميزات مُعيّنة في CSS. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == |
المراجعة الحالية بتاريخ 11:19، 7 أكتوبر 2022
القاعدة @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).