خصائص الـ media في <style>

HTML <style> العلامة

التعريف والاستخدام

media تستخدم هذه الخاصية لتحديد الوسائط أو الأجهزة التي تستهدفها أو تؤتمت لهم النمط.

تستخدم هذه الخاصية لتحديد أن النمط ينطبق على وسائط معينة (مثل iPhone) أو وسائط نطق أو طباعة.

نصيحة:يمكن لهذه الخاصية أن تأخذ عدة قيم.

مثال

مثال 1

تحديد النمطات المخصصة للطباعة:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

جرب ذلك بنفسك

مثال 2

استخدام خاصية عرض الوسائط width لتمييز النمطين.

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

جرب ذلك بنفسك

التعليق:يستخدم النمط الأول عندما يكون عرض نافذة المتصفح أقل من 500 بكسل، والنمط الثاني عندما يكون عرض النافذة أكبر من 500 بكسل.

النحو

<style media="القيمة>

المعادلات الممكنة

المعادلات الوصف
and المعادلة AND.
not المعادلة NOT.
, المعادلة OR.

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

الجهاز

الجهاز الوصف
all المبدأ الأساسي. ينطبق على جميع الأجهزة.
aural المحول إلى صوت.
braille أجهزة التغذية البصرية للمكفوفين.
handheld الأجهزة المحمولة (شاشة صغيرة، نطاق عرض محدود).
projection المشروعور.
print عرض الطباعة المسبق/صفحة الطباعة.
screen شاشة الكمبيوتر.
tty استخدام شبكة حروف مسافات ثابتة في الطابعات الكاتبة الإلكترونية والوسائط المشابهة.
tv الأجهزة التلفزيونية (دقة منخفضة، قدرة على التمرير محدودة).

المتصفح مسؤول عن تفسير تصنيف الأجهزة. بعض أنواع الأجهزة (مثل screen و print) يتم تفسيرها بشكل مشابه في جميع المتصفحات، لكن بعض الأجهزة الأخرى (مثل handheld) قد يتم تفسيرها بشكل عشوائي. لذلك، من الضروري التحقق من تفسير المتصفح للمعدات المحددة إذا كان متطابقًا مع تفسيرك.

الميزات

الميزات الوصف
width

يحدد العرض للمنطقة المستعرضة المستهدف.

يمكن استخدام بدائل "min-" و "max-".

على سبيل المثال: media="screen and (min-width:500px)"
height

يحدد الارتفاع للمنطقة المستعرضة المستهدف.

يمكن استخدام بدائل "min-" و "max-".

على سبيل المثال: media="screen and (max-height:700px)"
device-width

يحدد العرض للمستعرض/ورق الورق المستهدف.

يمكن استخدام بدائل "min-" و "max-".

على سبيل المثال: media="screen and (device-width:500px)"
device-height

يحدد الارتفاع للمستعرض/ورق الورق المستهدف.

يمكن استخدام بدائل "min-" و "max-".

على سبيل المثال: media="screen and (device-height:500px)"
orientation

يحدد اتجاه المستعرض/ورق الورق المستهدف.

القيم المدعومة: portrait أو landscape.

لا توجد تعريفيات لهذه الخاصية.

على سبيل المثال: media="all and (orientation: landscape)"
aspect-ratio

يحدد نسبة عرض/ارتفاع المنطقة المستعرضة المستهدف.

يمكن استخدام بدائل "min-" و "max-".

على سبيل المثال: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

يحدد نسبة عرض/ارتفاع الجهاز المستخدم/ارتفاع الجهاز.

يمكن استخدام بدائل "min-" و "max-".

على سبيل المثال: media="screen and (aspect-ratio:16/9)"
color

يحدد عدد أقسام البيكسل لكل لون في المستعرض المستهدف.

يمكن استخدام بدائل "min-" و "max-".

على سبيل المثال: media="screen and (color:3)"
color-index

يحدد عدد الألوان التي يمكن معالجتها من قبل المستعرض المستهدف.

يمكن استخدام بدائل "min-" و "max-".

على سبيل المثال: media="screen and (min-color-index:256)"
monochrome

يحدد عدد أقسام البيكسل في كل بكسل في منطقة التخزين اللونية أحادية الألوان.

يمكن استخدام بدائل "min-" و "max-".

على سبيل المثال: media="screen and (monochrome:2)"
resolution

يحدد كثافة البكسل للمستعرض/ورق الورق المستهدف (dpi أو dpcm).

يمكن استخدام بدائل "min-" و "max-".

على سبيل المثال: media="print and (resolution:300dpi)"
scan

يحدد نمط مسح التلفزيون.

القيم المدعومة: progressive و interlace.

لا توجد تعريفيات لهذه الخاصية.

على سبيل المثال: media="tv and (scan:interlace)"
شبكة

يحدد هذا التعريف ما إذا كانت الوحدة الناتجة تكون شبكية أم رسومية.

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

القيم المدعومة هي 0 و 1 (1 تمثل الأجهزة الشبكية).

لا توجد تعريفيات لهذه الخاصية.

مثلاً: media="handheld and (grid:1)"

عادة ما يتم استخدام خصائص مثل width مع限定ات min و max. يمكن استخدام هذه التعريفيات لجعل استخدام النمط أكثر مرونة.

الجدول أعلاه يوضح ويصف الميزات المتاحة. إذا لم يتم ذكر ذلك بشكل خاص، يمكن استخدام هذه الميزات مع min- و max- لتكوين حدود بدلاً من القيم الدقيقة.

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم

HTML <style> العلامة