جلسه ۷۱ – مدیا کوئری در CSS

مدیا کوئری ها چی هستن و چطور می‌شه از مدیا کوئری ها استفاده کرد؟ چطور می‌تونیم با استفاده از اون ها صفحاتمون واکنش‌گرا کنیم؟

مفهوم مدیا کوئری

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

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

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

این روش برای کار کردن، از break point ها یا نقاط شکست کمک می‌گیره.

نقاط شکست

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

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

علاوه بر عرض های ذکر شده در شکل بالا، عرض های دیگه ای هم داریم،‌که استاندارد ترین اون ها به شرح زیر هستن:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

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

• بر اساس عرض استاندارد صفحه دستگاه

تو این روش، بر حسب دستگاه مورد استفاده کاربر، محدوده ای از عرض ها رو در نظر می‌گیریم و بر اساس اون ها، صفحمون رو واکنش گرا می‌کنیم.

• بر اساس متناسب بودن چیدمان محتوا

تو این یکی روش، به دستگاه خاصی توجه نمی‌کنیم. بلکه چیدمان محتوا رو در تمامی عرض ها بررسی می‌کنیم. هر جا که چیدمان محتوا بهم بخوره، کد CSS رو تغییر می‌دیم. این روش، روش بهینه تری هست. چرا که تمامی عرض ها رو در نظر می‌گیره و دستگاه های جدید، در صورت داشتن عرض جدید نمی‌تونن واکنش گرایی رو بهم بزنن.

سینتکس و نحوه نوشتار مدیا کوئری

سینتکس مدیا کوئری به دو شکل خارجی (external) و داخلی (internal) تعریف می‌شه.

شکل داخلی یا intrenal

این سینتکس، زمانی به کار می‌ره که ما بخوایم از کد مدیا کوئری، مستقیما داخل یک فایل CSS استفاده کنیم. نحوه نوشتار کد ها به شکل زیر خواهد بود:

@media only|not mediaType (condition){
   /* --- CSS کد های --- */
}

هدف کد بالا، اینه که اگه شرط مدیا کوئری درست بود، کد های CSS داخل خودش رو اجرا کنه و اون ها رو نسبت به کد های CSSای که قبلا نوشتیم، اولویت بده. (دقت کنین که کد های مدیا کوئری رو بعد از کد های CSS اولیتون بنویسین)

شکل خارجی یا external

سینتکس فوق، زمانی استفاده می‌شه که ما بخوایم با چند فایل CSS مختلف کار کنیم و بر حسب صادق بودن شرط مدیا کوئری، از اون ها استفاده کنیم.

این سینتکس، با استفاده از عنصر link در HTML به فرم زیر استفاده می‌شه:

<link rel="stylesheet" href="main.css" media="only|not mediaType (condition)">

هدف این کد، اینه که هر وقت شرط مدیا کوئری ما صادق بود، از کد های فایل main.css به جای کد های فایل CSS اولیه استفاده کنه.

حالا به بررسی بخش های مختلف این سینتکس می‌پردازیم.

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

بخش های مختلف سینتکس مدیا کوئری

کلمه کلیدی مدیا کوئری

این کلمه کلیدی که تو حالت خارجی و داخلی، به ترتیب با صفت media و عبارت media@ مشخص می‌شه، مشخص کننده کد مدیا کوئری هست. این کلمه، در هر جایی که بخوایم از مدیا کوئری استفاده کنیم، باید ذکر بشه.

بخش شرطی only|not

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

• not: تمام حالت ها، به جز حالتی که شرط بیان می‌کنه رو قبول می‌کنه.
• and: بین دو یا چند شرط میاد، و زمانی مدیا کوئری رو اجرا می‌کنه که تمامی شرط ها صادق باشن.
• or: بین دو یا چند شرط به شکل ” , ” نوشته می‌شه،‌ و مدیا کوئری رو اجرا می‌کنه که حداقل یکی از شرط ها صادق باشن.
• only: قبل از mediaType میاد، تو مرورگر های قدیمی، زمانی استفاده می‌شد که نمی‌خواستیم مرورگر استایل‌هایی اضافه بر استایل های مدیا کوئری رو به صفحه بده. تو مرورگر های مدرن نیازی بهش نیست.

نوع مدیای مورد تغییر

این بخش، مشخص می‌کنه که کد مدیا کوئری، باید چه صفحه ای رو تغییر بده؟

• screen: چیدمان محتوا رو در حالت کلی تغییر می‌ده.
• speech: چیدمان محتوا رو برای screen reader ها (مختص نابینایان) تغییر می‌ده.
• print: چیدمان محتوا رو در حالت پرینت صفحه تغییر می‌ده. (ctrl+p)
• all: چیدمان محتوا رو برای تمامی حالت های بالا به شکل یکسان تغییر می‌ده.

شرط مدیا کوئری

این بخش، مهم ترین بخش سینتکس مدیا کوئری هست و مشخص می‌کنه که صفحه تحت چه شرایطی باید از کد مدیا کوئری تبعیت کنه. این شرط به ۴ شکل می‌تونه تعریف بشه. مهم ترین شکل این شرط، استفاده از height و width هست:

• width و height: با استفاده از خاصیت های min-width ،max-width، max-height و min-height می‌تونیم کمترین و بیشترین عرض و طول مورد نظر رو مشخص کنیم. به مثال های زیر و توضیحشون توجه کنین:

@media only screen (max-width: 1000px)

کد فوق، می‌گه: “تغییرات در صفحه وب سایت، زمانی انجام بشه که عرض ما کمتر از ۱۰۰۰ پیکسل هست.”

@media not print (min-width:200px) and (max-width:500px)

و این کد می‌گه: “تغییرات در صفحه وب سایت پرینت شده، در تمامی زمان ها به جز زمانی که بین عرض های ۲۰۰ و ۵۰۰ پیکسل هستیم، انجام بگیره.”

@media only speech (max-height: 1000px)

این کد بیان می‌کنه: “تا زمانی که طول صفحه کمتر از ۱۰۰۰ پیکسل هست، تغییرات برای دستگاه های screen reader انجام بگیره.”

۳ شکل دیگه شرط های مدیا کوئری به فرم زیر تعریف می‌شن:

• orientation: دو مقدار portrait و landscape رو قبول می‌کنه. حالت portrait زمانی به کار می‌ره که عرض صفحه از طول کمتر و یا مساوی اون هست. حالت landscape برای زمانی به کار می‌ره که صفحه طول کمتری نسبت به عرض داره.

• aspect-ratio و device-aspect-ratio: این دو طبق نسبت width به height و نسبت device-width به device-height عمل می‌کنن.

• device-height و device-width: این دو خاصیت، دقیقا مثل width و height عمل می‌کنن، با این تفاوت که شرط در مورد عرض و طول تمام صفحه نمایش (بدون اسکرول بار) سنجیده می‌شه.

مثال ها

تو دو مثال زیر، از نوع مدیای screen استفاده کردیم که توسط اون، می‌تونیم تغییرات رو روی صفحه وب سایتمون به صورت مستقیم اعمال کنیم.

دایره های چشمک زن

تو این مثال، ما تعدادی دایره ی ساده می‌بینیم که با تغییر عرض صفحه، رنگ پیش زمینه اون ها تغییر می‌کنه:

dark

چیدمان صفحه

تو این یکی مثال، می‌بینیم که چیدمان محتوا تو صفحه وب سایت ما، تحت هیچ شرایطی بهم نمی‌خوره و به شکل مناسبی تغییر می‌کنه:

dark

استفاده از developer tools برای تشخیص نقاط شکست

ممکنه برامون سوال پیش بیاد که چطور می‌تونیم نقاط شکست صفحمون رو پیدا کنیم.

ساده ترین روش انجام این کار، اینه که صفحه مرورگر رو کوچیک و بزرگ کنیم!

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

روش اصولی انجام این کار، استفاده از developer tools در مرورگر هست. developer tools به توسعه دهنده های وب کمک می‌کنه که راحت تر کارشون رو انجام بدن.

اینجا، نحوه استفاده از developer tools در مرورگر فایرفاکس رو بررسی می‌کنیم.

برای استفاده از developer tools، پیج مورد نظرتون رو باز کنین و دکمه F12 رو بزنین. تا دم و دستگاه زیر براتون باز شه:

اگه F12 کار نکرد، می‌تونین روی صفحه کلیک راست کنین و گزینه inspect element رو انتخاب کنین.

حالا رو آیکون مشخص شده کلیک کنین تا به تب نقاط شکست برین:

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

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

نکته: استفاده از developer tools در مرورگر های مختلف، با هم تفاوت های کوچیکی داره. اما روال کار کاملا شبیه به مطالبیه که گفته شد. برای مثال در مرورگر chrome، آیکون تب نقاط شکست، در سمت چپ صفحه واقع شده که خودتون می‌تونین به سادگی پیداش کنین.

پایان ترم

سوال:

مدیا کوئری زیر به چه معنی‌ایه؟

@media screen and (min-width:1000px) and (max-width:1200px){
   /*  CSS codes */
}

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

در این مقاله آموزش جامع CSS ، سه بحث زیر رو با هم بررسی کردیم.

• مفهوم نقاط شکست
• مفهوم و نحوه استفاده از مدیا کوئری در CSS
• نحوه پیدا کردن نقاط شکست

خب باید بهتون تبریک بگم، چرا که مبانی پایه ای واکنش گرایی رو تو این مقاله و مقاله قبل یاد گرفتین 🙂

اما هنوز برای یادگیری طراحی واکنش گرا راه بلندی در پیش داریم، پس به هیچ عنوان دست از تمرین و مطالعه منابع بیشتر برندارید.

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

مدیر محتوا: علی اسماعیلی