ویژگی های رسانه

گردآوری تمام روش هایی که ویژگی های رسانه به شما امکان می دهد به دستگاه ها و اولویت ها پاسخ دهید.

طراحی پاسخگو بدون پرسش های رسانه ای امکان پذیر نخواهد بود. قبل از پرسش های رسانه ای، هیچ راهی برای دانستن اینکه افراد از چه نوع دستگاهی برای بازدید از وب سایت شما استفاده می کنند، وجود نداشت. طراحان باید فرضیاتی می‌کردند. این مفروضات در طرح‌های با عرض ثابت یا طرح‌بندی مایع کدگذاری شدند.

همه اینها با معرفی پرسش های رسانه ای تغییر کرد. برای اولین بار طراحان توانستند در نیمه راه با مردم ملاقات کنند. طراحان می‌توانند طرح‌بندی خود را طوری تنظیم کنند که به دستگاه‌های افراد پاسخ دهد.

به یاد داشته باشید، درخواست رسانه شامل یک نوع رسانه اختیاری و یک ویژگی رسانه اجباری است. در طول این سال ها تغییر چندانی در انواع رسانه ها ایجاد نشده است. هنوز فقط چهار مقدار ممکن وجود دارد:

@media all
@media screen
@media print
@media speech

از سوی دیگر، ویژگی‌های رسانه بسیار گسترش یافته است. اکنون طراحان می‌توانند با کاربران فراتر از نیمه راه ملاقات کنند و طرح‌ها را طوری تطبیق دهند که بسیار بیشتر از اندازه صفحه نمایش باشد.

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

• 1
• 12
• 1
• 3

منبع

ابعاد ویوپورت

محبوب‌ترین پرسش‌های رسانه‌ای در وب، مواردی هستند که با عرض درگاه نمایش سروکار دارند. اما حتی در اینجا، شما با یک انتخاب روبرو هستید. می‌توانید از ویژگی max-width رسانه برای اعمال سبک‌های زیر یک عرض معین استفاده کنید، یا می‌توانید از ویژگی رسانه min-width برای اعمال سبک‌های بالاتر از عرض معین استفاده کنید.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

من شخصاً دوست دارم از min-width استفاده کنم. من سبک های چیدمان را به روشی افزودنی اعمال می کنم. من قوانین طرح بندی جدیدی را در هر نقطه شکست به جای لغو قوانین قبلی معرفی می کنم.

این رویکرد افزودنی برای ارتفاع نیز کار می کند. با استفاده از min-height می‌توانید قوانین بیشتری را با در دسترس قرار گرفتن ارتفاع بیشتر درگاه معرفی کنید. برای مثال، ممکن است یک عنصر هدر داشته باشید که اگر فضای عمودی کافی وجود دارد، بخواهید آن را به بالای پنجره مرورگر متصل کنید.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

اما در صورت تمایل می توانید از ویژگی رسانه max-height استفاده کنید. در اینجا، هدر به طور پیش‌فرض لنگر است، اما اگر فضای عمودی کافی وجود نداشته باشد، چسبندگی حذف می‌شود.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

انتخاب بین پیشوندهای min- و max- فقط برای width و height اعمال نمی شود. ویژگی رسانه aspect-ratio همین انتخاب را ارائه می دهد. همچنین اگر می خواهید استایل ها را با نسبت دقیق عرض به ارتفاع اعمال کنید، یک نسخه بدون پیشوند ارائه می دهد.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

ارائه سبک های مختلف برای نسبت های مختلف می تواند به سرعت از کنترل خارج شود. اگر به آن سطح دقیق از کنترل نیاز ندارید، ویژگی رسانه orientation ممکن است با نیازهای شما مطابقت بیشتری داشته باشد. دو مقدار ممکن دارد: portrait یا landscape .

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

حتی اگر عبارات "عمودی" و "منظره" اغلب برای اشاره به جهت گیری دستگاه های تلفن همراه استفاده می شود، ویژگی رسانه orientation مختص دستگاه نیست. یک پنجره مرورگر تمام صفحه در یک لپ‌تاپ معمولی دارای مقدار orientation landscape است.

نمایش می دهد

نمایشگرهای مختلف دارای تراکم پیکسلی متفاوتی هستند که بر حسب dpi ، نقطه در اینچ اندازه گیری می شود. می‌توانید با استفاده از ویژگی رسانه resolution ، استایل‌های خود را برای تراکم پیکسل‌های مختلف تنظیم کنید. مانند aspect-ratio ، resolution در سه نوع ارائه می شود: حداقل، حداکثر و دقیق.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

ممکن است هرگز نیازی به استفاده از پرس و جوهای رسانه ای resolution نداشته باشید. تراکم پیکسل معمولاً فقط برای تصاویر یک مشکل است و تصاویر واکنش گرا راهی برای مقابله مستقیم با تراکم پیکسل در HTML هستند.

از طرف دیگر، CSS جایی است که شما انیمیشن ها و انتقال های خود را تعریف می کنید. می‌توانید با استفاده از ویژگی update رسانه، آن انیمیشن‌ها و انتقال‌ها را طوری تنظیم کنید که به نرخ‌های تازه‌سازی متفاوت پاسخ دهند. این ویژگی رسانه یکی از سه مقدار را گزارش می‌کند: none ، slow ، و fast .

مقدار update none به این معنی است که نرخ تازه‌سازی وجود ندارد. برای مثال، یک صفحه چاپ شده را نمی توان به روز کرد.

مقدار update slow به این معنی است که نمایشگر نمی‌تواند به سرعت تازه‌سازی شود. نمایشگر جوهر الکترونیکی نمونه ای از صفحه نمایش با نرخ تازه سازی کند است.

مقدار update fast به این معنی است که نمایشگر آنقدر سریع تازه می‌شود که بتواند انیمیشن‌ها و انتقال‌ها را مدیریت کند.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

همه جنبه های نمایشگر به قابلیت های سخت افزاری مربوط نمی شود. در ماژول theming ، نحوه تعریف ویژگی ها در فایل مانیفست برنامه وب را مشاهده کردید. یکی از این ویژگی ها display نام دارد و می توانید به آن مقدار fullscreen ، standalone ، minimum-ui یا browser بدهید. ویژگی مدیا display-mode مربوطه به شما امکان می دهد سبک های خود را برای این گزینه های مختلف تنظیم کنید.

فرض کنید یک مقدار display standalone در مانیفست برنامه وب خود ارائه کرده اید. اگر شخصی سایت شما را به صفحه اصلی خود اضافه کند، سایت بدون رابط مرورگر راه اندازی می شود. ممکن است تصمیم بگیرید که یک دکمه برگشت را برای آن کاربران نمایش دهید.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

رنگ

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

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

یک ویژگی رسانه color مربوطه وجود دارد.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

برای صفحه‌های رنگی، می‌توانید پرس‌و‌جوهایی را با ویژگی‌های رسانه color-gamut ، color-index یا dynamic-range بنویسید. همه آنها جزئیات خاصی را در مورد قابلیت های رنگی صفحه نمایش گزارش می دهند.

در این مثال، مقادیر رنگ در پاسخ به ویژگی رسانه dynamic-range ، که ترکیبی از حداکثر روشنایی، عمق رنگ و نسبت کنتراست نمایشگر را گزارش می‌کند، به‌روزرسانی می‌شوند. مقادیر ممکن standard یا high هستند. به صفحه‌ای با وضوح بالا که یک مقدار dynamic-range high را گزارش می‌کند، با استفاده از تابع color() CSS جدید، فضای رنگی متفاوتی داده می‌شود.

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

تعامل

ویژگی‌های رسانه همچنین می‌توانند نوع مکانیزم ورودی مورد استفاده برای تعامل با سایت شما را گزارش کنند: hover ، any-hover ، pointer و any-pointer . برای جزئیات بیشتر به ماژول تعامل مراجعه کنید.

ترجیحات

طیف وسیعی از پرسش‌های رسانه وجود دارد که به شما امکان می‌دهد به تنظیمات برگزیده کاربر پاسخ دهید: prefers-color-scheme ، prefers-contrast و prefers-reduced-motion . برای جزئیات بیشتر، ماژول‌های موضوع‌بندی و دسترسی را ببینید.

می‌توانید ویژگی‌های رسانه را در یک درخواست رسانه ترکیب کنید. می‌توانید سبک‌های انیمیشن خود را طوری تنظیم کنید که فقط در صورتی اعمال شوند که دستگاه دارای نرخ تازه‌سازی سریع باشد و کاربر تمایلی به کاهش حرکت نشان نداده باشد.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

ویژگی های رسانه ای بیشتر

ویژگی های رسانه ای بیشتری در راه است.

ویژگی‌های رسانه forced-colors و inverted-colors گزارش می‌دهند که آیا دستگاهی از یک پالت رنگ محدود یا معکوس استفاده می‌کند.

یک ویژگی رسانه scripting به شما این امکان را می دهد که CSS خود را بر اساس در دسترس بودن جاوا اسکریپت تنظیم کنید.

یک ویژگی رسانه ای به نام prefers-reduced-data به کاربران این امکان را می دهد تا مشخص کنند که در یک اتصال اندازه گیری شده هستند تا بتوانید دارایی های کوچکتر یا کمتری را ارسال کنید.

پیشنهادهای دیگر هنوز در حال تدوین است. در ماژول بعدی و نهایی، با پیشنهادی برای یک ویژگی رسانه ای آشنا خواهید شد که پیکربندی های مختلف صفحه نمایش را مدیریت می کند.

درک خود را بررسی کنید

دانش خود را از ویژگی های رسانه آزمایش کنید

یک پرسش رسانه ای می تواند دستگاهی را در عرض خاصی مانند @media (width: 1024px) بررسی کند؟

درست است

یک عرض خاص فقط با بررسی همزمان عرض بالای 1023px و کمتر از 1025px قابل انجام است.

نادرست

min-width و max-width چیزی است که در دسترس است.

یک پرسش رسانه ای می تواند دستگاهی را با aspect-ratio خاص مانند @media (aspect-ratio: 4/3) بررسی کند؟

درست است

منحصر به فرد به نسبت ابعاد، یک نسبت منفرد را می توان مطابقت داد.

نادرست

این گزینه برای aspect-ratio وجود دارد.

پرس و جوهای رسانه رنگی معتبر کدامند؟

@media (color)

با هر دستگاه رنگی مطابقت دارد.

@media (monochrome)

با هر دستگاه بدون قابلیت رنگ مطابقت دارد.

@media (color-gamut: srgb)

دستگاه های دارای قابلیت رنگ sRGB را مطابقت می دهد.

@media (min-color-index: 15000)

با دستگاه هایی با حداقل 15 هزار رنگ در دسترس مطابقت دارد.

@media (dynamic-range: high)

منطبق با دستگاه هایی که دارای طیف رنگی HD هستند.

کدام یک از پرس و جوهای رسانه ترجیحی کاربر زیر معتبر است؟

@media (prefers-color-scheme: dark)

زمانی مطابقت دارد که کاربر سیستم عامل خود را روی حالت تاریک تنظیم کرده باشد.

@media (prefers-colors: high-definition)

واقعی نیست.

@media (prefers-reduced-motion: reduce)

زمانی مطابقت دارد که کاربر سیستم عامل خود را برای کاهش حرکت تنظیم کرده باشد.

@media (prefers-contrast: more)

زمانی مطابقت دارد که کاربر سیستم عامل خود را روی کنتراست بالاتر تنظیم کرده باشد.

@media (prefers-site-speed: fast)

واقعی نیست.