اون زمانی که ما کلید, پریز, دکمه و همچنین لباس و همچنین کیف و همچنین قاب با شبه عناصر after, before می ساختیم یک عده انسان باهوش در فکر کردن و اندیشیدن کردن و اندیشیدن آن بودند که آن شبه عناصر چه کاربردهایی در ساخت صفحات وب می توانند داشته باشند. در آن مطلب به یکی از آن کاربردها اشاره می کنیم.

پیشنیاز ها

قبل از هرچیز بایستی و حتما شبه عناصر after: و همچنین before: را بشناسید.

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

صورت پیشامد جدید

یکی از راه هایی که می توانیم مدیا کوئری ها را در جاوااسکریپت تشخیص دهیم بهره بری و استفاده از متد matchMedia می باشد که می قدرت بصورت زیر از آن هم بهره بری و استفاده کرد:

if (window.matchMedia("(min-width: 400px)").matches) 
/* حداقل عرض ۴۰۰ پیسکل می باشد */
else 
/* عرض صفحه کمتر از ۴۰۰ پیکسل می باشد */

آیا آن تنها راه تشخیص عرض مدیا کوئری در جاوااسکریپت می باشد, یا راه حل دیگر (شاید بهتر)ی نیز وجود دارد؟

راه حل

در آن روش کافی می باشد یک شبه عنصر را به عنصری مثل 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 را ویرایش کنیم و همچنین مستلزم و نیاز نیست نگران تغییر فایل های جاوااسکریپت پروژه باشیم.

جهت آنکه مطمئن باشید که می توانید به آن روش اعتماد کنید بایستی و حتما گفت که وبسایت و مرکز خبرهای جدید های بزرگی نظیر روزنامه گاردین در حال حاضر (اردیبهشت ۹۵) از آن روش بهره می برند.

در صورتی که بدنبال روش غیره ای جهت بررسی کردن هستید می توانید از کتابخانه Modernizr نیز بهره بری و استفاده کنید:

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

if (Modernizr.mq('(min-width: 900px)')) 
// صفحه نرم افزار مرورگر اینترنتی از ۹۰۰ پیکسل بزرگتر می باشد

ولی باید توجه داشت همانطور که دیدن می کنید مجبور هستید که نقطه شکست را در جاوااسکریپت نیز بنویسید

حرف آخر

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

اکثرا و بیشتر بخوانید