🎁 تخفیف ویژه تمامی پکیج های آموزشی 🎁

آموزش CSS Media Queries

پرس‌وجوهای رسانه‌ای (media queries) می‌توانند ظاهر (و حتی رفتار) یک وبسایت یا برنامه را بر اساس مجموعه‌ای از شرایط منطبق با دستگاه کاربر، مرورگر یا تنظیمات سیستم تغییر دهند.

آموزش CSS Media Queries

CSS Media Queries

media queries می توانند ظاهر (و حتی رفتار) یک وبسایت یا برنامه را بر اساس مجموعه ای از شرایط منطبق با دستگاه کاربر، مرورگر یا تنظیمات سیستم تغییر دهند.

media queries

CSS Media queries راهی برای هدف قرار دادن مرورگر بر اساس ویژگی ها، فیچرها و تنظیمات دلخواه کاربر، سپس اعمال سبک ها یا اجرای کدهای دیگر بر اساس آن چیزها است. شاید رایج ترین media queries در جهان آنهایی باشند که محدوده های نمایشی خاص را هدف قرار می دهند و سبک های سفارشی را اعمال می کنند، که کل ایده طراحی واکنش گرا (responsive design) را به وجود آورد.

media queries

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

استفاده از media queries

media queries معمولاً با CSS مرتبط هستند، اما می توانند در HTML و جاوا اسکریپت نیز استفاده شوند.

HTML

چند راه وجود دارد که می توانیم از media queries به طور مستقیم در HTML استفاده کنیم.

عنصر <link> در بخش <head> قرار می گیرد. در این مثال. ما به مرورگر می گوییم که می خواهیم از stylesheet های مختلف در اندازه های ویوپورت مختلف استفاده کنیم:

HTML

چرا می خواهید این کار را انجام دهید؟ این می تواند راه خوبی برای تنظیم دقیق عملکرد سایت شما با تقسیم سبک ها به گونه ای باشد که توسط دستگاه هایی که به آنها نیاز دارند دانلود و ارائه شوند.

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

بنابراین، اگر دستگاهی با صفحه نمایش کوچک مانند تلفن از سایت بازدید کند، تنها stylesheet را در media queries دانلود می کند که با اندازه ویوپورت آن مطابقت دارند. اما یک صفحه دسکتاپ بزرگ تر، کل دسته را دانلود می کند زیرا با تمام آن query ها مطابقت دارد (به استثنای درخواست چاپ در این مثال خاص).

همانطور که در مورد تصاویر واکنش گرا (responsive images) می دانیم، می توانیم از query های رسانه ای در عنصر <source> استفاده کنیم، که به عنصر <picture> اطلاع می دهد که مرورگر چه نسخه ای از تصویر را باید از مجموعه ای از گزینه های تصویر استفاده کند.

آموزش میدیا کویری

این عمل می تواند یک قدم بزرگ در بهبود کارایی باشد زیرا می توانیم تصاویر کوچک تر را به دستگاه های کوچک تر ارائه کنیم - که احتمالاً (اما نه همیشه) دستگاه هایی با انرژی کم هستند که ممکن است به یک طرح داده محدود شوند.

و فراموش نکنیم که می توانیم از media queries مستقیماً در عنصر <style> نیز استفاده کنیم:

media queries

خروجی کد بالا در حالتی که width بیشتر از px 500 است به صورت زیر می باشد.

CSS media queries

در حاتی که width برابر با px 500 و یا کمتر باشد، خروجی کد به صورت زیر می باشد.

HTML and media queries

CSS

CSS رایج ترین مکان برای یک media query است. آنها در stylesheet در یک قاعده@media قرار می گیرند که عناصر را با شرایطی برای زمان و مکان اعمال مجموعه ای از سبک ها در زمانی که یک مرورگر با آن شرایط مطابقت دارد، قرار می دهد.

CSS and media queries

همچنین می توان صفحه استایل وارد شده (imported style sheet) را محدوده بندی کرد، اما به عنوان یک قاعده کلی از استفاده از import@ اجتناب کنید زیرا عملکرد ضعیفی دارد.

آموزش میدیا کویری

JavaScript

ما می توانیم از media queries در جاوا اسکریپت نیز استفاده کنیم! و آنها مانند CSS کار می کنند. تفاوت در چیست؟ ابتدا با استفاده از متد ()window.matchMedia شروع می کنیم تا ابتدا شرایط را تعریف کنیم.

بنابراین، می خواهیم زمانی که مرورگر حداقل ۷۶۸ پیکسل عرض دارد، پیامی را به کنسول وارد کنیم. ما می توانیم ثابتی (constant) ایجاد کنیم که ()matchMedia را فراخوانی کند و عرض آن صفحه را تعریف کند:

JavaScript and media queries

سپس زمانی که آن شرط مطابقت داشت، می توانیم لاگ را به کنسول وارد کنیم:

media queries

متأسفانه، این فقط یک بار فعال می شود، بنابراین اگر هشدار نادیده گرفته شود، اگر عرض صفحه را تغییر دهیم و دوباره بدون refreshing تلاش کنیم، دوباره فعال نمی شود. به همین دلیل استفاده از شنونده ای که updates را بررسی می کند، ایده خوبی است.

CSS media queries

Anatomy of a Media Query

اکنون که چندین نمونه از موارد استفاده از query های رسانه ای را دیدیم، بیایید آنها را از هم جدا کنیم و ببینیم واقعاً چه می کنند.

media@

@media

اولین عنصر در دستور العمل media query، خود قانون media@ است که یکی از بسیاری از قوانین CSS at-rule است. چرا media@ همه توجه را به خود جلب می کند؟ زیرا به نوع رسانه ای که یک سایت با آن مشاهده می شود (Media types)، ویژگی هایی که آن نوع رسانه پشتیبانی می کند (Media Features) و عملگرهایی که می توانند برای ترکیب و مطابقت با شرایط ساده و پیچیده به طور یکسان ترکیب شوند (Operators)، تنظیم می شود.

انواع رسانه (Media types)

Media types

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

اما صفحه نمایش (screens) تنها نوع رسانه ای نیست که می توانیم هدف قرار دهیم. چندتا داریم از جمله:

1- همه: همه دستگاه ها را مطابقت می دهد.

2- چاپ (print): اسنادی را که در یک پیش نمایش چاپ مشاهده می شوند یا هر رسانه ای که محتوا را به صفحات در نظر گرفته شده برای چاپ تقسیم می کند، مطابقت می دهد.

3-صفحه نمایش (screen): دستگاه های دارای صفحه نمایش را مطابقت می دهد.

4-گفتار (speech): با دستگاه هایی مطابقت دارد که محتوا را به صورت شنیداری می خوانند، مانند screenreader. این جایگزین نوع شنیداری (aural) منسوخ شده از زمان Media Queries Level 4 می شود.

برای پیش نمایش سبک های چاپ در یک صفحه، همه مرورگرهای اصلی می توانند خروجی یک stylesheet چاپ را با استفاده از DevTools تقلید کنند. انواع رسانه های دیگر مانند tty ،tv ،projection ،handheld ،braille ،embossed و aural منسوخ شده اند. اگر از یکی از این موارد استفاده می کنید، آن را با یک رویکرد مدرن جایگزین کنید.

ویژگی های رسانه (Media Features)

وقتی نوع رسانه ای را که می خواهیم مطابقت دهیم تعریف کردیم، می توانیم شروع کنیم به تعریف ویژگی هایی که می خواهیم آن را با آن مطابقت دهیم. ما نمونه های زیادی را بررسی کرده ایم که صفحه ها را با عرض تطبیق می دهند، جایی که صفحه نمایش type است و حداقل عرض (min-width) و حداکثر عرض (max-width) ویژگی هایی (features) با مقادیر خاص هستند.

اما «ویژگی های» بسیار دیگری وجود دارد که می توانیم با آنها مطابقت دهیم. چند نمونه از پرکاربردترین feature ها در ادامه نشان داده شده است.

عرض (Width)

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

ارتفاع (Height)

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

جهت (Orientation)

این ویژگی نحوه جهت گیری صفحه را نشان می دهد، مانند بلند (portrait) یا عریض (landscape) بر اساس نحوه چرخش دستگاه.

عملگرها (Operators)

مدیا کویری از عملگرهای منطقی مانند بسیاری از زبان های برنامه نویسی پشتیبانی می کنند تا بتوانیم انواع رسانه ها را بر اساس شرایط خاص مطابقت دهیم. قانون media@ خود یک عملگر منطقی است که اساساً بیان می کند که «اگر» انواع و ویژگی های زیر مطابقت دارند، سپس کارهایی را انجام دهید.

and

اما اگر بخواهیم صفحه هایی را در محدوده ای از widths هدف قرار دهیم، می توانیم از عملگر and استفاده کنیم:

operators and media queries

or (or comma-separated)

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

css media queries

not

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

عملگرها در میدیا کویری

آیا واقعاً به CSS media queries نیاز داریم؟

media queries ابزار قدرتمندی در جعبه ابزار CSS هستند. اما اگر طراحی خود را با هر موقعیت ممکن تطبیق دهید، در نهایت به یک پایگاه کدی خواهید رسید که برای نگهداری بسیار پیچیده است و همانطور که همه ما می دانیم CSS مانند یک توله خرس است: زیبا و بی آزار اما وقتی بزرگ شود شما را زنده می خورد.

به همین دلیل است که من توصیه می کنم از مفهوم طراحی جهانی Ranald Mace پیروی کنید که : طراحی محصولات قابل استفاده برای همه افراد، تا حد امکان، بدون نیاز به انطباق یا طراحی تخصصی است.

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

من می دانم که صحبت در مورد طراحی جهانی در وب سخت است، اما فکر کنید، حدود 150 مرورگر مختلف، حدود 50 ترکیب مختلف از اولویت های کاربر وجود دارد، و بیش از 24000 دستگاه اندرویدی مختلف و منحصر به فرد وجود دارد.

این به این معنی است که حداقل 18 میلیون مورد احتمالی وجود دارد که ممکن است محتوای شما نمایش داده شود. به قول Miriam Suzanne، CSS در اینجا تلاش می کند تا طراحی گرافیکی محتوای ناشناخته را بر روی بوم ناشناخته، در سیستم عامل ها، رابط ها و زبان ها انجام دهد. هیچ راهی برای هیچ یک از ما وجود ندارد که بدانیم داریم چه کار می کنیم.

به همین دلیل است که فرض کردن واقعاً خطرناک است، بنابراین زمانی که محصولات خود را طراحی، توسعه و در مورد آنها فکر می کنید، فرضیات را پشت سر بگذارید و از media queries استفاده کنید تا مطمئن شوید که محتوای شما به درستی در هر contact و قبل از هر کاربری نمایش داده می شود.

استفاده از حداقل (min) و حداکثر (max) برای مطابقت با محدوده های مقدار

بسیاری از ویژگی های رسانه ای (media features) که در بخش قبلی بیان شد - از جمله عرض، ارتفاع، رنگ و شاخص رنگ - می توانند با min یا max برای بیان محدودیت های حداقل یا حداکثر پیشوند شوند. ما قبلاً این موارد را در بسیاری از مثال ها مشاهده کرده ایم، اما نکته اینجاست که می توانیم به جای اعلام مقادیر خاص، محدوده ای از مقادیر را برای مطابقت ایجاد کنیم.

در قطعه زیر، پس زمینه بدنه را زمانی به رنگ بنفش در می آوریم که viewport از 30 میلی متر و باریکتر از 80 میلی متر باشد. اگر عرض viewport با محدوده مقادیر مطابقت نداشته باشد، به رنگ سفید بر می گردد.

استفاده از حداقل (min) و حداکثر (max) برای مطابقت با محدوده های مقدار

Media Queries سطح 4 یک سینتکس جدید و ساده تر را با استفاده از عملگرهای کمتر از (<)، بزرگتر از (>) و برابر با (=) معرفی می کند. متأسفانه، در زمان نگارش، فقط توسط فایرفاکس پشتیبانی می شود.

تصمیم گیری های پیچیده و تو در تو

CSS به شما این امکان را می دهد که با استفاده از پرانتز، قوانین و عبارات گروهی را در درون خود قرار دهید، و این امکان را فراهم می کند تا به عمقی که برای ارزیابی عملیات پیچیده میخواهیم برسیم.

آموزش CSS

اگرچه امکان ایجاد عبارات قدرتمند و پیچیده وجود دارد، ممکن است در نهایت با یک query بسیار سخت مواجه شوید. همانطور که براد فراست می گوید: "هرچه رابط های ما پیچیده تر باشند، بیشتر باید برای نگهداری و مراقبت درست از آنها فکر کنیم."

media queries media types media features