HTML <style> media کیئم

HTML <style> تیگ

تعریف اور استعمال

media صفت کو اس لئے استعمال کیا جاتا ہے کہ CSS استایل کو کس میڈیا/دھارا جات کے لئے مقرر یا بہتر بنایا جائے

اس صفت کو اس لئے استعمال کیا جاتا ہے کہ استایل کو کس دھارا جات (مثلاً iPhone) یا آوڈیو یا پرنٹ میڈیا کے لئے مقرر کیا جائے

نکات:اس صفت میں کئی مقادیر قبول کی جاسکتی ہیں。

مثال

مثال 1

پرنٹ کے لئے مقرر استایل

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

آپ خود بچار کریں

مثال 2

استایل کے دو گروپ کو media کی اپنی 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 مقرر یا آپریشن اور
not مقرر یا آپریشن نایک
, مقرر یا آپریشن آری

استعمال کی شرائط کا استعمال بہت باریک کیا جاسکتا ہے۔ ابتدا میں واضح کرنا ہوتا ہے کہ کس دھارا جات پر اپنی نظر دیکھی جائیگی۔ اس جدول میں تمام مقررہ مقادیر کا مجموعہ دیکھا جاسکتا ہے:

دھارا جات

دھارا جات توضیحات
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)"
grid

تعیین می‌کند که دستگاه خروجی شبکه یا بیت‌مپ است.

دستگاه‌های شبکه‌ای محتوا را با استفاده از شبکه ثابت نمایش می‌دهند، به عنوان مثال، دستگاه‌های پایانه بر اساس کاراکتر و پیام‌رسان‌های سیم کارتی.

مقادیر پشتیبانی شده شامل 0 و 1 (1 به معنای دستگاه‌های شبکه‌ای) است.

این ویژگی دارای限定‌کننده نیست.

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

ویژگی‌هایی مانند width معمولاً با限定‌کننده‌های min و max استفاده می‌شوند. بدون استفاده از این限定‌کننده‌ها، استفاده از استایل‌ها می‌تواند به وسیله اندازه‌های دقیق پنجره‌ها نیز انجام شود، اما اضافه کردن限定‌کننده‌ها می‌تواند شرایط را بیشتر انعطاف‌پذیر کند.

جدول بالا ویژگی‌های مختلف موجود را لیست کرده و معرفی کرده است. مگر که به طور خاص ذکر شده باشد، این ویژگی‌ها می‌توانند با min- و max- استفاده شوند تا مقادیر مرزی را تشکیل دهند و نه مقادیر دقیق.

به طور مشابه با دستگاه‌های تعیین شده، این ویژگی‌ها نیز توسط مرورگرها توضیح داده می‌شوند. شرایط خاصی که مرورگرها کدام ویژگی‌ها را می‌شناسند و زمانی که این ویژگی‌ها وجود دارند و می‌توانند استفاده شوند، پیچیده و پیچیده هستند. اگر می‌خواهید از این ویژگی‌ها برای استفاده از استایل‌ها استفاده کنید، لطفاً به طور کامل تست کنید و استایل‌های جایگزین آماده کنید که در صورت عدم وجود ویژگی‌های مورد انتظار، استفاده شوند.

پشتیبانی از مرورگر

کروم لبه افراط سافاری اپرا
کروم لبه افراط سافاری اپرا
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

HTML <style> تیگ