آموزش رایگان برنامه نویسی در کانال یوتیوب yasharhabibimedia
سبد خرید
0

هیچ محصولی در سبد خرید نیست.

آموزش کامل مدیا کوئری در سی اس اس

آموزش کامل مدیا کوئری در سی اس اس

مطلب پیشنهادی:آموزش رایگان برنامه نویسی
این مطلب رو برای اونایی آماده کردم که دنبال یه آموزش کامل مدیا کوئری در سی اس اس میگردن. همین اول مقاله یه تعریف راجب مدیا کوئری بهتون بدم که یه دید خوبی ازش بدست بیارین. مدیا کوئری‎‌ها، باعث تغییر ظاهر و رفتار سایت میشن. بسته به طرح سایت هر برنامه نویسی میتونه استایل دهی خاص خودش رو اعمال کنه. ولی در کل کار مدیا کوئری‎‌ها همینه و خیلی هم توی ریسپانسیو کردن کمک میکنن.

چرا مدیا کوئری‎ رو یاد بگیریم؟

یکی از مهمترین ویژگی‎هایی که سایت شما باید داشته باشه، ریسپانسیو بودن هست. با کمک مدیا کوئری‎‌، ما ظاهر سایت رو برای دستگاه‎‌های مختلف (مثل لپ‎تاپ، موبایل، تبلت و غیره) سازگار میکنیم. منظورم از سازگار اینه که سایت به خوبی نمایش داده میشه و کاربر راحته و هیچی توی سایت غیرطبیعی نیست. اگر مدیا کوئری بلد نباشید، نمیتونید سایت‎‌های ریسپانسیو بسازید.

مدیا کوئری روشیه که با استفاده از اون میتونیم با توجه به تنظیمات، خصوصیت و ویژگی‎های هر مرورگر استایل‎‌های مرتبط به اون رو پیاده سازی کنیم. رایج‎ترین مدیا کوئری‎‌ها، اونایی هستند که با هدف ریسپانسیو کردن سایت برای مرورگرهای مختلف استفاده میشن. در عکس زیر مثالی از استفاده از مدیا کوئری رو می‌بینید.

/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
  .element {
    /* Apply some styles */
  }
}

 

چیزای دیگه زیادی هست که می‎تونیم با مدیا کوئری‎‌ها توی مرورگرای مختلف مدیریت کنیم. مثلا رزولوشون صفحه یا جهت‌‎گیری دیوایس.

استفاده از مدیا کوئری‎‌ها

مدیا کوئری به CSS مرتبط میشن و معمولا توی فایل CSS نوشته میشن. ولی می‎تونیم توی فایل‎های html یا js هم اونا رو بنویسیم. برای استفاده از مدیا کوئری‎‌ها از روش‎های مختلفی میشه استفاده کرد. مثلا می‎تونیم از تگ link برای این کار استفاده کنیم. تگ link توی تگ head در فایل‎های html قرار میگیره. مثلا توی عکس زیر به مرورگر میگیم که در اندازه‎های مختلف، چه استایلی رو برای کاربر لود کنه.

<html>
  <head>
    <!-- Served to all users -->
    <link rel="stylesheet" href="all.css" media="all" />
    <!-- Served to screens that are at least 20em wide -->
    <link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
    <!-- Served to screens that are at least 64em wide -->
    <link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
    <!-- Served to screens that are at least 90em wide -->
    <link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
    <!-- Served to screens that are at least 120em wide -->
    <link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
    <!-- Served to print media, like printers -->
    <link rel="stylesheet" href="print.css" media="print" />
  </head>
  <!-- ... -->
</html>

 

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

ما می‎تونیم مدیا کوئری‎‌ها رو در عنصر source هم استفاده کنیم که مشخص میکنه مرورگر از کدوم نسخه تصویر در یک مجموعه تصاویر باید استفاده کنه؟ مثال این نکته رو در عکس بعدی می‎بینید.

<picture>
  <!-- Use this image if the screen is at least 800px wide -->
  <source srcset="cat-landscape.png" media="(min-width: 800px)">
  <!-- Use this image if the screen is at least 600px wide -->
  <source srcset="cat-cropped.png" media="(min-width: 600px)">

  <!-- Use this image if nothing matches -->
  <img src="cat.png" alt="A calico cat with dark aviator sunglasses.">
</picture>

 

این روش هم میتونه یه روش مناسب باشه و ما میتونیم تصاویر مناسب هر دیوایس رو نمایش بدیم اینجوری که برای دیوایس‎‌های کم قدرتی که ممکنه به اینترنت پرسرعت و قوی دسترسی نداشته باشن. (دیتا پلن محدودی داشته باشن). تصاویر کوچیکتر و با حجم کمتری رو نمایش بدیم.

مدیا کوئری‎ها رو در تگ style هم میشه استفاده کرد. توی عکس بعدی یه مثالش رو اوردم.

<style>
  p {
    background-color: blue;
    color: white;
  }
</style>

<style media="all and (max-width: 500px)">
  p {
    background-color: yellow;
    color: blue;
  }
</style>

 

مدیا کوئری‎‎ در CSS

تا الان هرچی گفتم راجب استفاده مدیا کوئری‎‌ها توی فایل‌های html بود. در این قسمت میخوام درمورد استفاده یا نوشتن مدیا کوئری‌‎ها توی فایل‎های css بگم. نوشتن مدیا کوئری‎‌ها در فایل‎های css رایج‎ترین روش هست و خیلیا ازش استفاده میکنن. برای نوشتن این مدیا کوئری‎‌ها باید از @media استفاده کنید. توی توضیحات قبلی گفتیم که با تگ link فایل‎‌ها رو اضافه می‎کنیم به html بعد مشخص می‎کنیم، کجا کدوم استایل لود بشه. ولی توی این روش همه مدیا کوئری‎‌ها رو توی یک فایل css با کمک @media می‎نویسم. توی عکس زیر یک مثالش رو می‎بینید.

/* Viewports between 320px and 480px wide */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .card {
    background: #bada55;
  }
}

 

البته میشه از روش import هم استفاده کرد ولی توصیه میشه شکل استانداردش رو رعایت کنید بهتره. عکس زیر یه مثال از روش import رو نشون میده.

/* Avoid using @import if possible! */

/* Base styles for all screens */
@import url("style.css") screen;
/* Styles for screens in a portrait (narrow) orientation */
@import url('landscape.css') screen and (orientation: portrait);
/* Print styles */
@import url("print.css") print;

 

استفاده از مدیا کوئری‎ در js

یکی دیگه از روش‎های دیگه استفاده از مدیا کوئری‎‌ها توی زبان جاوااسکریپت هستش. مدیا کوئری‎‌ها همون طور که توی css کار می‎کنن، در js هم به خوبی کار می‎کنن. ولی طرز استفاده یکمی فرق داره. برای تعریف شرط مدیا کوئری توی js باید از تابع window.matchMedia(); استفاده می‎کنیم. به عنوان مثال فرض کنید که ما می‎خوایم یک عبارت رو توی محیط کنسول مرورگر چاپ کنیم به این شرط که حداقل عرض نمایشگر ۷۶۸ پیکسل باشه.

برای این کار اول باید شرط رو تعریف کنیم. شرط رو به این صورت تعریف می کنیم:

const mediaQuery = window.matchMedia( '( min-width: 768px )' )

 

بعد از اون با کمک if مشخص می‎کنیم که اگر شرط ما برقرار بود، کد اجرا بشه.

if ( mediaQuery.matches ) {
  console.log('Media Query Matched!')
}

متاسفانه این کد فقط یک بار اجرا میشه.اگه یه بار اجرا بشه یا از شرط رد بشه و

بعد از اون عرض صفحه رو درست کنیم، اجرا نمیشه. مگه اینکه صفحه رو رفرش کنیم تا از نو کدها رو بخونه. ولی اگر خواستیم بدون رفرش هر وقت عرض صفحه زیاد و کم شد و در همین حین شرط ما برقرار میشد به صورت مرتب کدمون اجرا بشه باید چیکار کنیم؟ از addListener استفاده می‎کنیم. توی عکس بعدی کد کامل رو می‎تونید ببینید.

const mediaQuery = window.matchMedia('(min-width: 768px)')

function handleTabletChange(e) {
  // Check if the media query is true
  if (e.matches) {
    // Then log the following message to the console
    console.log('Media Query Matched!')
  }
}

// Register event listener
mediaQuery.addListener(handleTabletChange)

// Initial check
handleTabletChange(mediaQuery)

 

آناتومی مدیا کوئری

توی این قسمت می‎خوام مدیا کوئری رو براتون مو شکافی کنم و دقیقا بگم که هر قسمت چیکار میکنه؟ اول از همه به عکس زیر دقت کنید و بعدش به ترتیب تمامی اجزا رو توضیح میدم که چی هستن و چطور استفاده میشن؟

@media:

اولین و مهم‎ترین دستور مدیا کوئری‎ها همین دستوره که خیلی هم مهمه و میشه گفت که نقش اصلی رو بازی میکنه. @meida یکی از at-ruleهای css هستش که وظیفه‌‎اش تعیین نحوه رفتار هست. دلیل اهمیت این دستور اینه که متناسب با نوع دستگاهی هست که از سایت بازدید میکنه.

Media types:

مدیا تایپ‎‌ها، مشخص میکنن که چه رسانه‌‎ای مد نظر ماست؟ در اکثر موارد از screen استفاده میشه که منطقی هست. چون هدف ما از استفاده کردن از مدیا کوئری‌ها هم همینه که روی نمایشگرهای مختلف کار کنیم و سایت ما ریسپانسیو بشه. به جای screen می‎تونیم از all استفاده کنیم که منظور همه دیوایس‌ها هست. اگر از print استفاده کردیم منظور استایل سایت موقع پرینت هست.

همین جا یه مثال برای این مدیا تایپ بزنم. فرض کنید که شما سایتتون قابلیت پرینت گرفتن داره و کاربر میتونه صفحات رو پرینت کنه. شما با مدیا کوئری می‌تونید مشخص کنید که هنگام پرینت گرفتن برخی از اجزا حذف بشن. مثل تبلیغات سایت. از speech هم می‌تونیم استفاده کنیم که منظور دستگاه‎هایی هست که محتوای نوشتاری رو به صوتی تبدیل میکنن. (مثل کتابخوان‌ها)

Media features:

بعد از اینکه نوع مدیا یا رسانه رو مشخص کردیم، باید بریم سراغ مطابقت دادن استایل‌ها با مدیای مورد نظر. برای این کار از Media features استفاده می‌کنیم. چند تا مثال توی همین مطلب با هم دیدیم که screen رو با انواع عرض‎‌ها مطابقت میدیم. Screen یک type هست و max-width و min-width هر دو feature هستند که مقادیر خاصی رو میگیرن.

در ادامه دسته بندی‎‌ها و توضیح هر کدوم از Media features یا ویژگی‎‌های رسانه رو میگم.

اولین ویژگی width هست که برای مشخص کردن عرض صفحه استفاده میشه. مقدارش میتونه
یه عدد مشخص مثل 400 پیکسل باشه یا اینکه به صورت حدودی با min-width و
max-width بهش مقدار بدیم. مشخصه height هم مثل width هست با این تفاوت که اندازه
ارتفاع رو مشخص میکنه. مقدار این مشخصه هم میتونه عدد مشخصی باشه یا اینکه به
صورت حدودی اونو تعریف کرد.

ویژگی aspect-ratio هم نسبت عرض به ارتفاع صفحه نمایش رو مشخص میکنه. پس مقدار
یا valueیی که میگیره، یک نسبت هست. ویژگی orientation جهت‎‌گیری عمودی و افقی
صفحه رو مشخص می‌کنه. این کار رو بر اساس چرخش دیوایس انجام میده. مقادیری که
میگیره شامل portrait و landscape میشه.

overflow-block هم مشخص میکنه که دیوایس در حین سرریز کردن محتوا، چه رفتاری
نشون بده. مقادیری هم که میگیره scroll، optional-paged و paged هستش. این
مشخصه توی مدیا کوئری سطح 4 اضافه شده. همچنین overflow-inline مشخص میکنه که
اگر محتوا سرریز کرد، بقیه‌اش رو نشون بده یا نه؟ مقادیری هم که میگیره شامل،
scroll و none میشه. اینم توی مدیا کوئری سطح 4 اضافه شد.

اگر مقدار overflow-inline رو برابر none بذاریم، به این معنی هست که محتوای
سرریز شده اسکرول نشه و چیزی هم نمایش داده نشه.

Display Quality یا کیفیت صفحه نمایش، دسته دیگه‌ای از Media features هستند که
برای تعیین کیفیت نمایشگر استفاده میشن که همین جا اونا رو به شما معرفی میکنم.
resolution ویژگی هست که تراکم پیکسل‌های نمایشگر رو مشخص میکنه. مقادیری که
میتونه بگیره، یک رزولوشن خاص یا مقدار infinite هست. وقتی infinite رو انتخاب
میکنیم، به این معنی هست که رزولوشن خاصی مدنظر ما نیست و همه قابل قبولن.

scan هم فرآینده پردازش اسکن رو تعریف میکنه. کلا دو مقدار میگیره. مقدار
interlace تمامی خطوط زوج و فرد رو به صورت متناوب ترسیم میکنه و مقدار
progressive همون خطوط رو به صورت متوالی ترسیم میکنه. ویژگی دیگه grid هستش که
دو مقدار میگیره. اگر 0 رو انتخاب کنیم، به معنی bitmap یا گرافیک شطرنجی هست.
اگر اون یکی مقدار یعنی 1 رو بذاریم به معنی گرید یا grid هستش. این ویژگی توی
مدیا کوئری سطح 5 اضافه شد.

ویژگی دیگه update هست که مشخص میکنه دیوایس چطور میتونه ظاهر محتواها رو تغییر
بده. سه تا مقدار میتونه بگیره. slow، fast و none. update هم توی مدیا کوئری
سطح 4 اضافه شد. مشخصه environment-blending هم محیط خارجی دیوایس مورد نظر رو
تعریف میکنه. مثلا نور صفحه رو میتونه تنظیم کنه. مقدارهایی که میتونه بگیره هم
سه تا هستند. opaque، additive و subtractive.

display-mode همونطور هم که از اسمش پیداست، حالت نمایش دیوایس یا دستگاه رو
تست میکنه. چندتا مقدار هم میتونه بگیره. تمام صفحه fullscreen . اگر مقدار standalone رو گذاشتیم، به معنی
یک اپلیکیشن مستقل هست. اگر minimal-ui رو انتخاب کردیم، به معنی اپلیکیشن
مستقل با همون navigation هست. و در آخر اگر مقدار browser رو قرار دادیم، به
معنی پنجره رایج(سنتی) مرورگر هست.

color یا رنگ یه دسته‌بندی دیگه‌ای از Media features هستن. ویژگی color به
عنوان مقدار یک عدد میگیره که رنگهایی که توسط دیوایس پشتیبانی میشن رو تعریف
یا مشخص میکنه. مثلا عدد 12 به معنی دستگاهی هستش که از 12 تا بیت رنگ پشتیبانی
میکنه. اگر 0 بذاریم هم نشون میده که از رنگی پشتیبانی نمیکنه.

color-index هم مقدار عددی می‌گیره و کارش تعیین کردن تعداد مقادیری هست که
دیوایس پشتیبانی میکنه. میتونیم یه عدد مشخص بذاریم یا اینکه به صورت حدودی
مشخص کنیم. (مثال : 10000 یا min-color-index:10000) مقداردهی این ویژگی شبیه
به ویژگی width هستش.

ویژگی monochrome تعداد بیت‎های هر یک از پیکسل‎ها که تک‌رنگ‎های دیوایس
پشتیبانی میکنه رو مشخص میکنه. مقداری که میگیره عددی هست. هرجا مقدارش صفر
باشه به این معنی هست که هیچ تک‎رنگی پشتیبانی نمیشه. ویژگی color-gamut هم
محدوده رنگ‌هایی که تو مرورگر ساپورت میشه رو تعریف میکنه. مقدارهایی که میگیره
srgb، p3 و rec2020 هست. این ویژگی توی مدیا کوئری سطح 4 اضافه شد.

ویژگی dynamic-range ترکیبی از میزان روشنایی، عمق رنگ و تنظیم کردن نسبتی که
ساپورت میشه رو توسط ویدیو پلن مرورگر کاربر مشخص میکنه. مقدارش میتونه high یا
standard باشه. ویژگی inverted-colors هم کارش اینه که بررسی میکنه آیا مرورگر
یا سیستم عامل برای رنگهای معکوس تنظیم شده یا نه؟ این ویژگی توی مدیا کوئری
سطح 5 اضافه شد و مقدارهای inverted و none رو میگیره.

اثر متقابل یا interaction دسته دیگه‌ای از Media features هستند که ویژگی‎هاشو
اینجا بهتون میگم. pointer یکی از این ویژگی‌هاست که از مدیا کوئری سطح 4 به
بعد اضافه شد و مقادیر coarse، fine و none رو میگیره. این ویژگی مثل
any-pointer مرتب میشه. Hover ویژگی دیگه‌ای هست که مانند any-like مرتب میشه و
دو تا مقدار hover و none رو میتونه بگیره. ویژگی any-pointer هم بررسی میکنه
که آیا دستگاه از موس یا استایل‌های موس استفاده میکنه یا نه؟ مقادیری که
میگیره 3 تا هستن. coarse، fine و none. ویژگی any-hover هم دو تا مقدار hover
و none رو میگیره و بررسی میکنه که آیا عناصر از hover شدن پشتیبانی میکنن یا
نه؟

پیشوند ویدیو یا video prefixed مرجع مشخصات دستگاه کاربر از جمله
تلویزیون‎هاست که فیلم و گرافیک رو در دو پلن جدا رندر میکنه که هرکدوم خصوصیات
خاص خودشون رو دارن. ویژگی‌هایی که الان میگم پلن‌ها رو توصیف میکنن.
video-color-gamut طیف تقریبی رنگ‎های پشتیبانی شده توسط پلن ویدیو مرورگر
دستگاه کاربر رو توصیف میکنه. 3 مقدار میتونه بگیره. srgb، p3 و rec2020. این
ویژگی از مدیا کوئری سطح 5 اضافه شد.

ویژگی video-dynamic-range هم ویژگی‎هایی عمق رنگ و شدت نور رو کنترل میکنه و
دو مقدار standard و high رو میگیره. اینم از مدیا کوئری سطح 5 اضافه شد.
video-height هم ارتفاع ویدیو رو مشخص میکنه و مقداری که می‌گیره طول هست. رو
بگیره. اینم از مدیا کوئری سطح 5 اضافه شد.

آخرین ویژگی هم video-resolution هست که رزولوشن پلن یا صفحه رو مشخص میکنه و
میتونه یکی از دو مقدار resolution و inifinite رو بگیره. این ویژگی هم از مدیا
کوئری سطح 5 اضافه شد.

دسته دیگه scripting هستن که شامل 1 ویژگی scripting میشه و کارش اینه که آیا
دیوایس اجازه اجرای اسکریپت رو میده یا نه. این ویژگی هم از مدیا کوئری سطح 5
اضافه شد و دو مقدار میتونه بگیره. enabled و initial-only.

اولویت‎های کاربر یا user preference شامل چند ویژگی هستند. ویژگی
prefers-reduced-motion تشخیص میده که تنظیمات سیستم کاربر برای کاهش حرکت در
صفحه تنظیم شده یا نه؟ دو مقدار میتونه بگیره. no-preference و reduce. این
ویژگی از مدیا کوئری سطح 5 اضافه شد.

ویژگی بعدی prefers-reduced-transparency هست که مشخص میکنه سیستم کاربر اجازه
شفافیت عناصر یا transparent رو میده یا نه؟ مقدارهایی که میگیره no-preference
و reduce هستش. این ویژگی هم از مدیا کوئری سطح 5 اضافه شد.

ویژگی prefers-contrast تشخیص میده که سیستم کاربر برای افزایش یا کاهش کنتراست
بین رنگ‎ها تنظیم شده یا نه؟ مقادیری که میگیره no-preference، high، low و
forced هستند. این ویژگی از مدیا کوئری سطح 5 اضافه شد. Prefers-color-scheme
تشخیص میده که کاربر ترجیح میده رنگ روشن یا تیره داشته باشه؟ light و dark دو
مقداری هستن که این ویژگی میتونه بگیره. این ویژگی هم از مدیا کوئری سطح 5
اضافه شد.

forced-color تست میکنه که آیا مرورگر رنگ‌های موجود برای استفاده رو محدود
میکنه یا نه؟ مقدارهای active و none رو میتونه بگیره. ویژگی آخر هم
prefers-reduced-data هستش که تشخیص میده آیا کاربر ترجیح میده از داده کمتری
برای صفحه رندر شده استفاده کنه یا نه؟ no-prefernce و reduce هم مقادیری هستن
که میتونه بگیره. این ویژگی از مدیا کوئری سطح 5 اضافه شد.

آخرین دسته بندی ویژگی‎های Media feature مربوط میشه به اون دسته از ویژگی‌هایی
که منسوخ شدن و دیگه ازشون استفاده نمیشه. ویژگی‎های device-aspect-ratio،
device-height و device-width ویژگی‎هایی هستن که همشون از مدیا کوئری سطح 4 به
بعد حذف شدن.

 

Operators

خب قسمت بعدی آناتومی مدیا کوئری (Media queries) عملگرها هستند. عملگرهای مدیا کوئری شامل عملگرهای منطقی هم میشه. مثل عملگرهای اکثر زبان‎های برنامه نویسی. عملگرها به ما کمک میکنن تا یه شرطی رو بررسی کنیم و در صورت غلط یا درست بودن اون شرط عملیات خاصی انجام بشه. دستور العمل @media خودش یه عملگر منطقی هست به این معنی که اگر type ها و feature ها مطابق فلان شرط بودن، کاری رو انجام بده.

and یکی از عملگرهای مدیا کوئری هست که چند شرط برای اجرا شدن رو چک میکنه. مثلا توی عکس زیر هدف ما دو تا عرض متفاوت هستش.

@media screen (min-width: 320px) and (max-width: 768px) {
  .element {
    /* Styles! */
  }
}

 

عملگر or هم برای چندتا شرطه ولی فرقش با and اینه که اجباری نیست همه شرط‌ها برقرار باشه ولی حداقل یکی باید برقرار باشه. ولی توی and باید همه شرط‌ها برقرار باشن تا کد اجرا بشه. برای or هم می‎تونیم از کاما استفاده کنیم. مثل عکس زیر:

@media screen (prefers-color-scheme: dark), (min-width 1200px) {
  .element {
    /* Styles! */
  }
}

 

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

@media print and ( not(color) ) {
  body {
    background-color: none;
  }
}

 

آیا واقعا به مدیا کوئری نیاز هست؟

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

در Accessibility For Everyone یا دسترسی برای همه، لورا کالبگ اینطور توضیح میده که تفاوت بین طراحی قابل دسترسی و  طراحی جهانی ظریف، اما مهمه. یک طراحی قابل دسترس یا Accessible Designer برای ورود مردم یک در بزرگ و صندلی چرخی ایجاد میکنه. در حالیکه که یک طراح جهانی ورودیی رو تولید میکنه که برای هرکسی بدون توجه به توانایی‎هاش مناسبه.

صحبت کردن در مورد طراحی جهانی در وب سخته ولی اگه راجبش فکر کنیم، حدود ۱۵۰ مرورگر مختلف وجود داره که هرکدوم تعداد زیادی تنظیمات مختلف دارن و همچنین دیوایس‌های اندروید به بیش از ۲۴ هزارتا میرسه و به این معنی هست که حدود ۱۸ میلیارد کیس مختلف برای طراحی داریم. به قول میریام سوزان، css اینجا سعی در طراحی گرافیکی محتوای ناشناخته در بی نهایت و canvasهای ناشناخته در سراسر سیستم عامل‌ها، رابط‌های کاربری و زبان‌ها داره و هیچ راهی ممکن نیست که ما بفهمیم چه کاری داریم انجام میدیم. به همین دلیل هم هست که تصور میشه واقعا خطرناکه و وقتی شما طراحی می‌کنید و در مورد محصول تولیدی خودتون فکر می‎کنید و اونو توسعه میدین، فرضیاتی رو برای خودتون بذارید و از مدیا کوئری‎ها برای اطمینان از نمایش درست محتوا برای هر کاربر و دیوایسی استفاده کنید.

استفاده از min- و max- برای مقادیر حدودی

خیلی از ویژگی‎های مدیا کوئری که معرفی کردم مثل width، height، color و color-index میتونن با پیشوندهای min- و max- برای تعیین ماکزیمم و مینیمم مقداردهی بشن. نکته ای که وجود داره اینه که میتونیم به جای دادن عدد دقیق از همین پیشوندها استفاده کنیم و یک محدوده رو تعریف کنیم. مثلا توی مثال پایین یه حداقل و حداکثری رو برای عرض مشخص کردیم.

body {
  background-color: #fff;
}

@media (min-width: 30em) and (max-width: 80em) {
  body {
    background-color: purple;
  }
}

 

مدیا کوئری سطح ۴ به بعد سینتکس ساده و جدید رو معرفی کرد که توی اون می‎تونیم عملگرهای <، > و = استفاده کنیم. ولی متاسفانه این ویژگی فقط توی مرورگر فایرفاکس ساپورت میشه.

Nesting و تصمیم گیری مختلط

css به شما این امکان رو میده که بتونید شرط‌‎های گروهی بسازید که برای نوشتنشون از پرانتزها استفاده کنید. همچنین این امکان فراهم میشه که عملگرها رو مختلط استفاده کنیم. مثال:

@media (min-width: 20em), not all and (min-height: 40em) {  
  @media not all and (pointer: none) { ... }
  @media screen and ( (min-width: 50em) and (orientation: landscape) ), print and ( not (color) ) { ... }
}

 

دسترسی

اکثر ویژگی‎‌هایی که توی مدیا کوئری سطح ۴ اضافه شدند، بیشتر مربوط به بحث دسترسی هستند. مثلا prefers-reduced-motion تشخیص میده که آیا کاربر حرکات رو کاهش داده یا اینکه انیمیشن‎ها و حرکت‎ها رو به حداقل رسونده؟ در واقع یه جور دسترسی رو مدیریت کرده. این ویژگی دو مقدار میگیره، یکی no-preference هست که نشون میده کاربر تنظیمات خاصی رو تعیین نکرده و مقدار reduce مشخص میکنه که کاربر تنظیمات رو جوری انجام داده که حداقل انیمیشن‎ها اجرا بشن. و تا جایی که امکان داره، حرکات حذف بشن.

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

@media screen and (prefers-reduced-motion: reduce) {  
  * {
    /* Very short durations means JavaScript that relies on events still works */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

 

 

prefers-color-scheme

داشتن یک طرح رنگ حالت دارک(شب) چیزی هست که این روزها خیلی شاهدش هستیم. ما می‎تونیم، بر اساس تنظیمات سیستم کاربر، تم حالت دارک یا روشن ارائه بدیم. این ویژگی دو مقدار می‌تونه بگیره. مقدار light برای وقتی هست که یک کاربر حالت روشن یا حالت روز رو ترجیح میده. dark هم برای وقتی هست که کاربر حالت دارک یا حالت شب رو انتخاب میکنه. مثال:

body {
  --bg-color: white; 
  --text-color: black;

  background-color: var(--bg-color);
  color: var(--text-color);
}

@media screen and (prefers-color-scheme: light) {
  body {
    --bg-color: black;
    --text-color:white;
  }
}

 

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

جمع بندی

توی این مطلب سعی کردم که یه راهنمای کامل برای مدیا کوئری ها در سی اس اس آماده کنم و کامل راجبش توضیح بدم. آناتومی مدیا کوئری و هر نکته مهمی که راجبش بود رو توی همین پست بهتون گفتم، امیدوارم که براتون مفید بوده باشه.

امتیاز 5 از 4 رای

20

من یاشار حبیبی 15 سال تو حوزه برنامه نویسی وب در حال فعالیت هستم و اینجا قراره تجربیاتم رو باشما به اشتراک بزارم و باهم کلی چیز یادبگیریم و لذت ببریم

دیدگاه کاربران
  • آواتار
    yusyn__ 5 مرداد 1400 / 3:56 ب.ظ

    جامع و کامل و عالی

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

توسط
تومان