مقدمه‌ای بر Media Queries و استفاده از آن
پیشرفت در زمینه وب و فناوری‌های مرتبط با آن این روزها به ارتقا تجربه کاربری برای افراد مختلف کمک شایانی کرده است. Media Queries یکی از این ابزارهای عالی در CSS است که به ما اجازه می‌دهد تنها با یک تجربه‌ی کاربری مشابه در دستگاه‌های مختلف بسازیم.چرا ترجیحات کنتراست مهم هستند؟
یکی از جنبه‌های مهم طراحی برای دسترسی راحت‌تر و استفاده آسان از وب، تنظیمات کنتراست است. کنتراست مناسب می‌تواند تاثیر بزرگی بر خوانایی و کاربرپسندی محتوا داشته باشد، به ویژه برای افرادی که مشکلات بینایی یا حساسیت‌های بصری دارند.@media (prefers-contrast)
پشتیبانی CSS از Media Queries اجازه می‌دهد تا باتوجه به تنظیمات دستگاه کاربر، مانند ترجیحات کنتراست، طرح‌بندی بهینه شده‌ای را ارائه دهید. با استفاده از @media (prefers-contrast) می‌توان طرح‌های کنتراست بالا یا پایین را برای محیط‌های مختلف پیاده‌سازی کرد.چگونه استفاده کنیم؟
در اینجا نمونه کد ساده‌ای برای استفاده از @media (prefers-contrast) آورده شده است که به شما کمک می‌کند با این ویژگی آشنا شوید.
body {
background-color: #f0f0f0;
}
@media (prefers-contrast: high) {
body {
background-color: #000;
color: #fff;
}
}
@media (prefers-contrast: low) {
body {
background-color: #fff8e1;
color: #333;
}
}
توضیح کد
body {
background-color: #f0f0f0;
}ابتدا سبک پیش‌فرض بدنه با رنگ پس‌زمینه خاکستری روشن تنظیم می‌شود.
@media (prefers-contrast: high) {...}این بخش بررسی می‌کند که آیا ترجیح کنتراست بالا تعریف شده است یا خیر.
background-color: #000;رنگ پس‌زمینه در صورت کنتراست بالا به سیاه تغییر می‌کند.
color: #fff;رنگ متن به سفید تغییر می‌کند تا کنتراست مناسب ایجاد شود.
@media (prefers-contrast: low) {...}این بخش در صورتی اجرا می‌شود که ترجیح کنتراست پایین داشته باشیم.
background-color: #fff8e1;پس‌زمینه با رنگ روشن‌تر تنظیم می‌شود.
color: #333;رنگ متن تیره‌تر می‌شود تا کنتراست کمینه حفظ شود.