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

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

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

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

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

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

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

محبوب‌ترین پرسش‌های رسانه‌ای در وب، مواردی هستند که با عرض درگاه نمایش سروکار دارند. اما حتی در اینجا، شما با یک انتخاب روبرو هستید. می‌توانید از ویژگی 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 . برای جزئیات بیشتر به ماژول تعامل مراجعه کنید.

پرس و جوهای ترجیحی کاربر

با استفاده از CSS، می توانید با کاربران خود همکاری کنید تا مطمئن شوید که آنها می توانند به محتوای شما به روشی که برای آنها مناسب است دسترسی داشته باشند. در این درس، نحوه اعمال CSS های مختلف بر اساس ابعاد و ویژگی های دستگاه کاربر را یاد گرفتید. اما شما همچنین می توانید CSS های مختلف را بر اساس تنظیمات کاربر اعمال کنید.

حالت تاریک و روشن

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

تنظیم طرح رنگ برای عناصر رابط کاربریx

مرورگر رنگ های پیش فرض را برای مواردی مانند نوارهای پیمایش و عناصر فرم ارائه می کند. می‌توانید تعیین کنید که از یک طرح زمینه روشن برای افرادی که دارای color-scheme: light یا یک تم تیره با color-scheme: dark . همچنین می‌توانید تعیین کنید که صفحه از هر دو پشتیبانی کند، با color-scheme: light dark . می توانید این را در عنصر :root یا html تنظیم کنید تا طرح را برای کل صفحه تنظیم کنید، یا می توانید آن را برای عناصر خاص لغو کنید.

همچنین می‌توانید یک meta تگ برای color-scheme تنظیم کنید تا طرح صفحه را قبل از بارگیری سبک‌ها تنظیم کنید. اگر روی یک عنصر در صفحه، color-scheme: normal تنظیم کنید، از مقدار color-scheme که در این متا تگ تنظیم کرده اید استفاده می کند.

<meta name="color-scheme" content="dark light">

ویژگی رسانه ای prefers-color-scheme

همچنین می‌توانید سبک‌های سفارشی را در پاسخ به تم رنگی ترجیحی کاربر با یک درخواست رسانه برای prefers-color-scheme تعریف کنید.

light-dark

اگر به کاربران خود امکان انتخاب بین تم روشن و تاریک را می‌دهید، ممکن است تنظیم هر رنگ در داخل یک جستجوی رسانه‌ای پیچیده باشد. light-dark() به شما امکان می دهد هر دو را در یک ویژگی واحد مشخص کنید.

برای فعال کردن این کار، باید color-scheme: light dark روی عنصر یا یکی از اجداد آن. ابتدا یک رنگ را برای استفاده در حالت روشن و سپس یک رنگ را برای استفاده در حالت تاریک تنظیم می کنید.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

اگر کاربر اولویت سیستم خود را برای درخواست حالت نور تنظیم کرده باشد، عنوان سیاه خواهد شد. اگر ترجیح آنها حالت تاریک باشد، عنوان سفید خواهد بود.

ترجیحات کنتراست

کاربران شما ممکن است خواندن محتوایی با کنتراست بالا یا پایین را آسان‌تر کنند و ممکن است سیستم خود را طوری تنظیم کنند که طرح زمینه شما را با آنچه که برای آنها بهتر است نادیده بگیرد. نقش شما این است که اطمینان حاصل کنید که سایت شما همچنان با ترجیحات آنها به خوبی کار می کند.

ممکن است در ماژول Cascade به یاد داشته باشید که سبک‌های کاربری محلی !important می‌توانند سبک‌های تألیفی را که یک صفحه وب ارائه می‌کند، لغو کنند. این به کاربران اجازه می دهد تا از سبک هایی استفاده کنند که برای آنها بهتر عمل می کند.

رنگ های اجباری

Windows «موضوعات کنتراست» را ارائه می‌کند که کاربران می‌توانند تم‌های یک وب‌سایت را لغو کنند. اینها اغلب تم هایی با کنتراست بالا هستند و ممکن است در حالت روشن یا تاریک باشند. در CSS به آن رنگ های اجباری می گویند و در بیشتر موارد سایت شما در این حالت همانطور که انتظار می رود رفتار می کند. دکمه‌ها، پیوندها، ورودی‌ها و سایر محتواها از رنگ‌های تم استفاده می‌کنند.

گاهی اوقات، ممکن است لازم باشد سبک های خود را تنظیم کنید، برای مثال اگر از عناصر به روش های غیر استاندارد استفاده می کنید. هنگامی که کاربر رنگ های اجباری را فعال کرده است، می توانید از پرس و جو رسانه @media (forced-colors: active) برای اعمال سبک ها استفاده کنید.

در برخی موارد، سبک های یک سایت برای درک خود محتوا ضروری است، به عنوان مثال با انتخابگر رنگ یا نمودار با کلید رنگی. شما می توانید forced-color-adjust: none; روی یک عنصر برای انصراف از حالت رنگ های اجباری. مطمئن شوید که فقط از عناصر خاصی انصراف داده اید و بررسی کنید که محتوا همچنان در حالت رنگ های اجباری قابل دسترسی باشد.

کنتراست بالا

برخی از کاربران همچنین ممکن است سیستم خود را طوری تنظیم کنند که کنتراست افزایش یافته را درخواست کند. می‌توانید استایل‌های خود را در پاسخ با عبارت prefers-contrast: more media query تنظیم کنید.

کاهش حرکت

می‌توانید به ترجیح کاربر برای حرکت کاهش‌یافته با پرس‌وجو رسانه prefers-reduced-motion پاسخ دهید. این اغلب برای ارائه انیمیشن های جایگزین استفاده می شود که از حرکات بزرگی که ممکن است برای افراد مبتلا به صرع، اختلالات حرکت دهلیزی یا حساسیت به میگرن محرک باشد، جلوگیری می کند. در ملاحظات هنگام کار با انیمیشن بیشتر بخوانید.

اسکریپت

کاربران شما ممکن است با غیرفعال بودن جاوا اسکریپت از سایت شما بازدید کنند و شما می توانید CSS خود را طوری تنظیم کنید که همچنان بتوانند با استفاده از پرسش رسانه scripting به محتوای شما دسترسی داشته باشند.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

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

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