اون زمانی که ما کلید, پریز, دکمه و لباس و کیف و قاب با شبه عناصر after, before می ساختیم یک عده انسان باهوش در فکر این بودند که این شبه عناصر چه کاربردهایی در ساخت صفحات وب می توانند داشته باشند. در این مطلب به یکی از این کاربردها اشاره می کنیم.
پیشنیازها
صورت مسئله
یکی از راه هایی که می توانیم مدیا کوئری ها را در جاوااسکریپت تشخیص دهیم استفاده از متد matchMedia است که می توان بصورت زیر از آن استفاده کرد:
if (window.matchMedia("(min-width: 400px)").matches) {
/* حداقل عرض 400 پیسکل می باشد */
} else {
/* عرض صفحه کمتر از 400 پیکسل است */
}
آیا این تنها راه تشخیص عرض مدیا کوئری در جاوااسکریپت است, یا راه حل دیگر (شاید بهتر)ی نیز وجود دارد؟
راه حل
در این روش کافی است یک شبه عنصر را به عنصری مثل body اضافه کنیم. و از ویژگی content آن کمال سو استفاده را داشته باشیم :)
body:after {
content: "bp-small";
display: none;
}
@media only screen and (min-width: 35em) {
body:after {
content: "bp-medium";
}
}
@media only screen and (min-width: 65em) {
body:after {
content: "bp-large";
}
}
سپس کافی است با استفاده از متد Window.getComputedStyle محتوای داخل شبه عنصر after را بصورت زیر در جاوااسکریپت داشته باشیم:
var afterContent = window.getComputedStyle(document.body, ':after').content;
بررسی کد جاوااسکریپت این ترفند خارج از حوصله این مطلب است اما می توانید کد را در دموی زیر بررسی کنید:
See the Pen Detecting media queries with Javascript by Mojtaba Seyedi (@seyedi) on CodePen.
چرا این روش؟
اگر از این روش استفاده کنیم دیگر نیازی نیست که مدیا کوئری منظور را در جاوااسکریپت نیز تعیین کنیم یا به عنوان یک متغیر جدا داشته باشیم.
همینطور هر زمان که تصمیم به تغییر مدیا کوئری در طرح بگیریم فقط نیاز است که CSS را ویرایش کنیم و نیاز نیست نگران تغییر فایل های جاوااسکریپت پروژه باشیم.
برای اینکه مطمئن باشید که می توانید به این روش اعتماد کنید باید گفت که سایت های بزرگی نظیر روزنامه گاردین در حال حاضر (اردیبهشت 95) از این روش بهره می برند.
اگر بدنبال روش دیگری برای بررسی هستید می توانید از کتابخانه Modernizr نیز استفاده کنید:
استفاده از این کتابخانه برای موضوع مورد بررسی ما بسیار راحت است. فقط کافی است بصورت زیر عمل کنیم:
if (Modernizr.mq('(min-width: 900px)')) {
// صفحه مرورگر از 900 پیکسل بزرگتر است
}
اما همانطور که مشاهده می کنید مجبور هستید که نقطه شکست را در جاوااسکریپت نیز بنویسید :(
حرف آخر
در بسیاری از مواقع در کار ما بهترین راه حل مطلق وجود ندارد بلکه مناسب ترین راه حل را باید پیدا کرد. که مناسب ترین راه حل بر اساس پروژه مورد نظر و مخاطبان آن مطرح می شود.
خدا قوت واقعا خوب بود. سپاس فراوان…
به نظرم این مقاله یک نگاه حرفه ای رو به تکنولوژی های مورد نظر داره.
یه نگاه بسیار حرفه ای و استادانه.
مرسی.
خوب بود ممنون
سلام. بسیار خوب و عالی بود. من از کتابخانه ای به نام alloy استفاده کردم برای ریسپانسیو. روی پلتفرم لایفری بسیار عالی عمل میکنه. نحوه کارشم اینه که تو هر ویو پورتی که باشی کلاسای مختص به اون ویو پورت رو به تگ اچ تی ام ال اضافه میکنه و به این صورت فقط با سی اس اس و بدون مدیا کوئری همه مسائل ریسپانسیو رو میشه حل کرد. حتی به تگ اچ تی ام ال کلاسی با اسم و نسخه مرورگر نیز اضافه میکنه که میتونیم با استفاده از اون به راحتی بدون سی اس اس حک یا کامنت های شرطی کراسینگ رو انجام بدیم.
این مطلب هم خیلی عالیی بود ممنون.
سلام. ممنون که معرفی کردین این کتابخونه رو.
اینم آدرسش اگر کسی کنجکاو بود: alloyui.com
سلام استاد عزیز.
من بعنوان شخصی که هفت هشت ساله وب کار میکنم، این پست رو متوجه نمیشم. ممنون میشم کمی واضحتر بیان کنید.
مثلا چرا باید مدیاکوئری رو با جاوااسکریپت تشخیص بدیم و دلیل این کار چیه؟
یک مقدار این پست برای من سنگین بود، ممنون میشم پست هاتون شفاف تر باشه.
سلام دوست عزیز.
یه زمانی هست می خواید یک اسکریپتی توی یک عرض خاص یا فقط برای یک رنج خاصی از دستگاها اجرا بشه پس نیاز دارید که توی جاوااسکریپت اطلاعاتی در مورد دستگاه داشته باشید.
قبلا از window.innerwidth استفاده می کردیم ولی اون فقط عرض رو میده اما وقتی از مدیا کوئری استفاده می کنیم فقط بحث عرض نیست بلکه هر نوع کوئری که بخوایم می تونیم بنویسیم. مثلا بحث چرخش دستگاه بحث رزولوشن دستگاه و غیره.
نکته دیگه اینکه متد استفاده مدیا کوئری ها از نظر performance خیلی بهتر از چک کردن عرض صفحه عمل می کنه.
حالا چرا این روش رو استفاده کنیم؟ دلیلشو توی پست گفتم.
این سناریو و موضوع برای پروژه های بزرگ که باید خوب نوشته بشن تا راحت نگهداری بشن کاربردیه. برای پروژه های کوچیک نیازی به این کارا نیست. هرچند که باز هم راه حل بهتری هستش.
راستی ممنون که در مورد شفافیت نظرتون رو گفتین. به امید خدا از این به بعد سعی می کنم شفاف تر بنویسم.
من فکر کردم مطلب رو کامل گرفتم، و در آخر گفتم: “من اگه جای مدیر گاردین بودم، میگفتم: بهتره کاربرا یادبگیرن بروزرشون رو آپدیت کنن” ولی با این توضیحات شما، که من متوجه نشدم! بنظر میاد قضیه فراتر از این حرف هاست. لطفا پست های بیشتری در این خصوص بگذارید.
عنوان این پست برای من گنگ بود.
شاید اگه عنوان این پست “اجرای دستورات مدیاکوئری با جاوا اسکریپت” بود واضحتر میشد.
پست خوبی بود ممنون.
ممنون از شما.
سلام خسته نباشید
می خواستم کد منوی چسبان شما رو اگه امکان داره داشته باشم تو نت چند نمونه دیدم ولی دوستشون نداشتم اگه طراحی همچین منوی چسبانی که وقتی بالا می ری نشون داده بهشه رو اموزش بدید که میشه نور علی نور
من تازه با سایت شما آشنا شدم و خیلی مطالب مفیدی دیدم امیدوارم باقدرت ادامه بدید
دوست عزیز هر چند سوال شما ربطی به این قسمت نداره اما با اجازه ی آقا مجتبی چون میدونم سر ایشون شلوغه بنده جوابتون رو میدم . برای ساختن این نوع منوها فقط کافیه وضعیت فعلی اسکرول شدن صفحه رو با وضعیت قبلی توسط java script یا jquery مقایسه کنید. بدین ترتیب :
https://jsfiddle.net/c7hs0deq/3/
سلام
من تازه به شروع برنامه نویسی وب کردم
و از مطالب html و css شما خیلی استفاده کردم
ولی اگه امکان داره یا جایی تو سایت شما هست که زبان js به طور کامل مثل css آموزش میده معرفی کنین ممنون میشم
من منتظر پاسختون هستم