آموزش CSS پیشرفته : اصول media query ها
مدیا کوئری CSS به شما این امکان را میدهد که CSS را فقط زمانی اعمال کنید که محیط مرورگر و دستگاه با قانونی که شما مشخص میکنید مطابقت داشته باشد، برای مثال "نمای دید از ۴۸۰ پیکسل عریضتر است". مدیا کوئری بخش کلیدی طراحی وب واکنشگرا هستند، زیرا به شما امکان میدهند بسته به اندازه نمای دید، طرحبندیهای مختلفی ایجاد کنید، اما میتوانند برای تشخیص موارد دیگر در مورد محیطی که سایت شما در آن اجرا میشود نیز استفاده شوند، برای مثال اینکه آیا کاربر از صفحه لمسی به جای ماوس استفاده میکند یا خیر.
در این درس، ابتدا با سینتکس مورد استفاده در مدیا کوئری آشنا میشوید و سپس به استفاده از آنها در مثالهایی که نشان میدهد چگونه یک طراحی اولیه میتواند واکنشگرا شود، خواهید پرداخت.
سادهترین سینتکس مدیا کوئری به این شکل است:
این شامل موارد زیر است:
- نوع رسانه، که به مرورگر میگوید این کد برای چه نوع رسانهای است (چاپ یا صفحه نمایش).
- عبارت رسانه، که یک قانون یا تست است که باید برای اعمال CSS موجود، پاس شود.
- مجموعهای از قوانین CSS که در صورت پاس شدن تست و صحیح بودن نوع رسانه، اعمال خواهند شد.
انواع رسانههایی که میتوانید مشخص کنید عبارتند از:
همه all
چاپ print
صفحه screen
مدیا کوئری زیر فقط در صورت چاپ صفحه، اندازه بدنه را روی ۱۲pt تنظیم میکند. این مقدار هنگام بارگذاری صفحه در مرورگر اعمال نمیشود.
نوع رسانه در اینجا با نوع به اصطلاح MIME متفاوت است. تعدادی نوع رسانه دیگر در مشخصات Media Queries سطح 3 تعریف شده بودند؛ این موارد منسوخ شدهاند و باید از آنها اجتناب شود. انواع رسانه اختیاری هستند؛ اگر نوع رسانهای را در Media Query خود مشخص نکنید، Media Query به طور پیشفرض برای همه انواع رسانه خواهد بود.
قوانین مربوط به ویژگیهای رسانهای
پس از مشخص کردن نوع، میتوانید یک ویژگی رسانهای را با یک قانون هدف قرار دهید. مثالهای زیر نحوه استفاده از پرسوجوهای رسانهای مختلف را نشان میدهند. برای تغییر عرض صفحه نمایش، اندازه مرورگر خود را تغییر دهید یا دستگاه دستی خود را بچرخانید.
از طرف دیگر، میتوانید از ویژگیهای اندازهبندی واکنشگرای ابزارهای توسعهدهنده مرورگر (مانند حالت طراحی واکنشگرای فایرفاکس) برای شبیهسازی عرضهای مختلف دستگاه استفاده کنید.
ویژگیای که ما اغلب برای ایجاد طرحهای واکنشگرا (و پشتیبانی گسترده مرورگرها) به آن توجه میکنیم، عرض نمای دید است و میتوانیم اگر نمای دید بالاتر یا پایینتر از یک عرض خاص - یا یک عرض دقیق - باشد، با استفاده از ویژگی مدیا، CSS را اعمال کنیم و در صورت نیاز، آن را با یا پیشوند دهیم.
این ویژگیها برای ایجاد طرحبندیهایی که به اندازههای مختلف صفحه نمایش پاسخ میدهند، استفاده میشوند. به عنوان مثال، برای تنظیم رنگ متن بدنه به قرمز در صورتی که نمای دید دقیقاً ۶۰۰ پیکسل باشد، از کوئری media زیر استفاده میکنید.
سعی کنید عرض پنجره مرورگر را تنظیم کنید تا ببینید آیا میتوانید نقطه مطلوبی را پیدا کنید که در نسخه نمایشی بالا دقیقاً ۶۰۰ پیکسل عرض داشته باشد تا متن قرمز شود.
ویژگیهای رسانهای عرض (و ارتفاع) میتوانند به عنوان محدوده استفاده شوند و بنابراین با یا پیشوند شوند تا نشان دهند که مقدار داده شده حداقل یا حداکثر است. به عنوان مثال، برای آبی کردن رنگ اگر نمای دید ۶۰۰ پیکسل یا باریکتر باشد، از max-width استفاده کنید:
سعی کنید پنجره را باریکتر کنید تا متن بالا آبی شود.
در عمل، استفاده از مقادیر حداقل یا حداکثر برای طراحی واکنشگرا بسیار مفیدتر است، بنابراین به ندرت میبینید که عرض یا ارتفاع به تنهایی استفاده شوند.
ویژگیهای رسانهای بسیار دیگری نیز وجود دارد که میتوانید آنها را آزمایش کنید، اگرچه برخی از ویژگیهای جدیدتر معرفی شده در سطوح ۴ و ۵ مشخصات پرسوجوهای رسانهای، پشتیبانی مرورگر محدودی دارند.
یکی از ویژگیهای رسانهای که به خوبی پشتیبانی میشود، جهتیابی است که به ما امکان میدهد جهتگیری عمودی یا افقی را آزمایش کنیم. برای تغییر رنگ متن بدنه در صورتی که دستگاه در جهت افقی باشد، از کوئری رسانهای زیر استفاده کنید.
آزمایش مثال بالا در صفحه اصلی بسیار دشوار است؛ برای مشاهده آن در عمل، توصیه میشود کد بالا را در یک فایل HTML محلی کپی کرده و آن را در تب مخصوص به خود باز کنید.
نمای استاندارد دسکتاپ دارای جهت افقی است و طرحی که در این جهت به خوبی کار میکند، ممکن است هنگام مشاهده در تلفن یا تبلت در حالت عمودی به خوبی کار نکند. آزمایش جهتگیری میتواند به شما کمک کند تا طرحی ایجاد کنید که برای دستگاهها در حالت عمودی بهینه شده باشد.
استفاده از دستگاههای اشارهگر
به عنوان بخشی از مشخصات سطح ۴، ویژگی رسانه شناور (hover) معرفی شد. این ویژگی به این معنی است که میتوانید آزمایش کنید که آیا کاربر توانایی شناور ماندن روی یک عنصر را دارد یا خیر، که اساساً به این معنی است که آنها از نوعی دستگاه اشارهگر استفاده میکنند؛ پیمایش صفحه لمسی و صفحه کلید شناور نیست.
مثال بالا وقتی ماوس روی آن قرار میگیرد، به متن سفید روی زمینه مشکی تغییر میکند، اما فقط در دستگاههایی که امکان ماوس روی آن وجود دارد. اگر بدانیم که کاربر نمیتواند ماوس را روی آن قرار دهد، میتوانیم برخی از ویژگیهای تعاملی را به طور پیشفرض نمایش دهیم. برای کاربرانی که میتوانند ماوس را روی آن قرار دهند، میتوانیم انتخاب کنیم که وقتی ماوس روی یک لینک قرار میگیرد، آنها در دسترس باشند.
همچنین در سطح ۴، ویژگی رسانه اشارهگر وجود دارد. این ویژگی سه مقدار ممکن را میگیرد، هیچ، ریز و درشت. اشارهگر ریز چیزی شبیه به ماوس یا ترکپد است. این به کاربر امکان میدهد تا دقیقاً یک ناحیه کوچک را هدف قرار دهد. اشارهگر درشت، انگشت شما روی صفحه لمسی است. مقدار هیچ به این معنی است که کاربر هیچ وسیله اشارهگری ندارد. شاید آنها فقط با صفحه کلید یا با دستورات صوتی پیمایش میکنند.
استفاده از اشارهگر میتواند به شما در طراحی رابطهای کاربری بهتری که به نوع تعاملی که کاربر با صفحه نمایش دارد پاسخ میدهند، کمک کند. به عنوان مثال، اگر میدانید که کاربر با دستگاه به عنوان یک صفحه لمسی تعامل دارد، میتوانید نواحی ضربه بزرگتری ایجاد کنید.
استفاده از سینتکس محدودهای
یک مورد رایج این است که بررسی کنیم آیا عرض viewport بین دو مقدار است یا خیر:
اگر میخواهید خوانایی این کد را بهبود ببخشید، میتوانید از سینتکس "range" استفاده کنید:
بنابراین در این حالت، استایلها زمانی اعمال میشوند که عرض viewport بین 30em و 50em باشد.
با وجود همه مدیا کوئری های مختلف ممکن، ممکن است بخواهید آنها را ترکیب کنید یا فهرستهایی از کوئری ایجاد کنید - که هر یک از آنها میتوانند با دیگری مطابقت داشته باشند.
مانند قبل، با تنظیم عرض مرورگر خود، مثالهای این بخش را امتحان کنید.
منطق "and" در کوئریهای رسانهای
برای ترکیب ویژگیهای رسانهای میتوانید از and تقریباً به همان روشی که ما برای ترکیب یک نوع رسانه و ویژگی در بالا استفاده کردیم، استفاده کنید. به عنوان مثال، ممکن است بخواهیم عرض و جهتگیری را آزمایش کنیم. متن بدنه فقط در صورتی آبی خواهد بود که عرض صفحه نمایش حداقل ۶۰۰ پیکسل باشد و دستگاه در حالت افقی باشد.
منطق "or" در کوئریهای رسانهای
اگر مجموعهای از queryها دارید که هر یک از آنها میتواند با هم مطابقت داشته باشد، میتوانید این queryها را با کاما از هم جدا کنید. در مثال زیر، اگر عرض صفحه نمایش حداقل ۶۰۰ پیکسل باشد یا دستگاه در جهت افقی باشد، متن آبی خواهد بود. اگر هر یک از این موارد درست باشد، جستجو مطابقت دارد.
منطق "not" در کوئریهای مدیا
شما میتوانید با استفاده از عملگر not کل یک کوئری مدیا را منفی کنید. این کار معنی کل کوئری مدیا را معکوس میکند. بنابراین در مثال بعدی، متن فقط در صورتی آبی خواهد بود که عرض صفحه نمایش حداقل ۶۰۰ پیکسل نباشد.
همچنین میتوانید از not برای منفی کردن عبارات خاص استفاده کنید.
بلوک دوم، استایلها را در صورتی اعمال میکند که عرض نمایشگر بین ۶۰۰ تا ۱۰۰۰ پیکسل باشد. این معادل است.
در روزهای اولیه طراحی واکنشگرا، بسیاری از طراحان تلاش میکردند تا اندازههای بسیار خاصی از صفحه نمایش را هدف قرار دهند. فهرستهایی از اندازههای صفحه نمایش تلفنها و تبلتهای محبوب منتشر شد تا طرحهایی ایجاد شود که به طور دقیق با آن نماها مطابقت داشته باشند.
اکنون دستگاههای بسیار زیادی با اندازههای بسیار متنوع وجود دارد که این امر را امکانپذیر نمیکند. این بدان معناست که به جای هدف قرار دادن اندازههای خاص برای همه طرحها، رویکرد بهتر این است که طرح را در اندازهای تغییر دهید که محتوا به نوعی شروع به شکستن میکند. شاید طول خطوط خیلی طولانی شود، یا یک نوار کناری فشرده و خواندن آن دشوار شود. این نقطهای است که شما میخواهید از یک کوئری رسانهای برای تغییر طرح به طرحی بهتر برای فضای موجود خود استفاده کنید. این رویکرد به این معنی است که مهم نیست ابعاد دقیق دستگاه مورد استفاده چیست؛ هر محدودهای در نظر گرفته شده است. نقاطی که یک کوئری رسانهای در آنها معرفی میشود، به عنوان نقاط شکست شناخته میشوند.
حالت طراحی واکنشگرا در ابزارهای توسعه فایرفاکس برای تعیین محل قرارگیری این نقاط شکست بسیار مفید است. شما میتوانید به راحتی با اضافه کردن یک کوئری رسانهای و تغییر طراحی، اندازهی نمایشگر را کوچک و بزرگ کنید تا ببینید محتوا در کجا بهبود مییابد.
طراحی واکنشگرا متناسب با موبایل (mobile-first)
به طور کلی، میتوانید دو رویکرد برای طراحی واکنشگرا (ریسپانسیو) در پیش بگیرید. میتوانید با دسکتاپ یا عریضترین نمای خود شروع کنید و سپس با کوچکتر شدن نمای دید، نقاط توقف (breakpoints) را برای جابجایی موارد اضافه کنید، یا میتوانید با کوچکترین نمای دید شروع کنید و با بزرگتر شدن نمای دید، طرحبندی (layout) را اضافه کنید. این رویکرد دوم به عنوان طراحی واکنشگرای اولویت موبایل توصیف میشود و اغلب بهترین رویکرد برای دنبال کردن است.
نمای (view) برای دستگاههای بسیار کوچک، اغلب یک ستون ساده از محتوا است، همانطور که در جریان عادی ظاهر میشود. این بدان معناست که احتمالاً نیازی به انجام طرحبندی زیاد برای دستگاههای کوچک ندارید - منبع خود را به خوبی مرتب کنید و به طور پیشفرض یک طرحبندی خوانا خواهید داشت.
طراحی موبایل-محور خودتان را بسازید
حالا نوبت شماست؛ در این بخش آموزشی، شما طراحی واکنشگرای اولیهی مخصوص موبایل خودتان را خواهید ساخت. در یک سایت تولیدی، احتمالاً موارد بیشتری برای تنظیم در کوئریهای رسانهای خود خواهید داشت، با این حال، رویکرد دقیقاً یکسان خواهد بود.
نقطه شروع ما یک سند HTML است که مقداری CSS برای اضافه کردن رنگهای پسزمینه به قسمتهای مختلف طرحبندی روی آن اعمال شده است.
اول از همه، کد HTML را از بلوک زیر در یک ویرایشگر متن کپی کنید، آن را به عنوان یک فایل HTML در رایانه خود ذخیره کنید و آن را در مرورگر خود باز کنید:
منبع سند به گونهای مرتب شده است که محتوا را قابل خواندن میکند. این یک گام اولیه مهم است و گامی است که تضمین میکند اگر محتوا توسط یک صفحهخوان خوانده شود، قابل فهم باشد.
سبکهای اولیه برای مثال ما به شرح زیر است؛ این سبکها را در فایل HTML خود در داخل تگهای کپی کنید و جایگزین کنید.
اگر طرحبندی را در حالت طراحی واکنشگرا در DevTools مشاهده کنید، یا عرض پنجره مرورگر خود را به اندازه عرض موبایل کوچک کنید، خواهید دید که به عنوان یک نمای ساده موبایل از سایت، به خوبی کار میکند.
ایجاد طرح دو ستونه برای عرضهای متوسط
پنجره را تا جایی که میتوانید ببینید طول خطوط کاملاً طولانی میشوند، بازتر کنید؛ در این مرحله، فضایی برای نمایش ناوبری در یک خط افقی خواهید داشت. اینجا جایی است که اولین کوئری رسانهای خود را اضافه خواهیم کرد. ما از واحدهای em استفاده خواهیم کرد، زیرا این بدان معناست که اگر کاربر اندازه متن خود را افزایش داده باشد، نقطه توقف در طول خط مشابه اما در نمای عریضتری نسبت به کسی که اندازه متن کمتری دارد، اتفاق میافتد.
موارد زیر را به انتهای CSS خود اضافه کنید:
این CSS یک طرحبندی دو ستونی درون از محتوای مقاله و اطلاعات مرتبط در عنصر به ما میدهد. ما همچنین از flexbox برای قرار دادن ناوبری در یک ردیف استفاده کردهایم.
اضافه کردن ستون سوم برای صفحات نمایش عریضتر
بیایید به افزایش عرض ادامه دهیم تا زمانی که احساس کنیم فضای کافی برای نوار کناری وجود دارد تا یک ستون جدید نیز تشکیل دهد. در داخل یک پرس و جوی رسانهای، عنصر را به یک شبکه دو ستونی تبدیل میکنیم. سپس باید margin-bottom را در مقاله حذف کنیم تا دو نوار کناری با یکدیگر تراز شوند و یک حاشیه به بالای پاورقی اضافه کنیم. معمولاً این تغییرات کوچک، کارهایی هستند که شما برای زیبا جلوه دادن طراحی در هر نقطه شکست انجام خواهید داد.
موارد زیر را به انتهای CSS خود اضافه کنید:
این مثال تمام شد. اگر به نتیجه در عرضهای مختلف نگاه کنید، میتوانید ببینید که طرح چگونه پاسخ میدهد و بسته به عرض موجود، به صورت یک ستونه، دو ستونه یا سه ستونه کار میکند. این یک مثال اولیه از یک طراحی واکنشگرا برای موبایل است.
اگر به منبع HTML در مثال بالا نگاه کنید، عنصر زیر را که در بخش head سند قرار دارد، خواهید دید:
این متا تگ viewport است - این متا تگ به عنوان راهی برای کنترل نحوه رندر محتوا توسط مرورگرهای موبایل وجود دارد، و اطمینان حاصل میکند که آنها به کوئریهای رسانهای شما احترام میگذارند. مورد بالا به مرورگرهای موبایل میگوید "محتوا را با یک viewport 980 پیکسلی رندر نکنید - در عوض آن را با استفاده از عرض واقعی دستگاه رندر کنید و یک سطح مقیاس اولیه پیشفرض برای سازگاری بهتر تنظیم کنید." کوئریهای رسانهای سپس طبق انتظار اجرا میشوند.
برای اطلاعات بیشتر در مورد دلیل نیاز به این، به بخش متا تگ viewport در مقاله قبلی مراجعه کنید.
آیا واقعاً به یک media query نیاز دارید؟
Flexbox و CSS Grid به شما روشهایی برای ایجاد اجزای انعطافپذیر و حتی واکنشگرا بدون نیاز به کوئری مدیا ارائه میدهند: همیشه ارزش دارد که در نظر بگیرید که آیا واقعاً به آن نیاز دارید یا خیر. به عنوان مثال، ممکن است مجموعهای از کارتها با عرض حداقل ۲۰۰ پیکسل بخواهید و تا حد امکان این ۲۰۰ پیکسل را در ستون محتوای اصلی، صرف نظر از عرض آن، جای دهید.
این کار را میتوان با CSS Grid و بدون استفاده از هیچ کوئری مدیایی انجام داد:
سعی کنید پنجره مرورگر خود را پهنتر و باریکتر کنید تا تغییر تعداد مسیرهای ستون را ببینید.
نکته خوب در مورد این روش این است که شبکه به عرض نمایشگر نگاه نمیکند، بلکه به عرضی که برای این کامپوننت در دسترس است نگاه میکند. ممکن است عجیب به نظر برسد که بخشی در مورد پرسوجوهای رسانهای را با این پیشنهاد که ممکن است اصلاً به آن نیاز نداشته باشید، جمعبندی کنیم! با این حال، در عمل متوجه خواهید شد که استفاده خوب از روشهای مدرن طرحبندی، که با پرسوجوهای رسانهای بهبود یافتهاند، بهترین نتایج را به همراه خواهد داشت.
