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

در آغاز

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

Media Querie ها

Media query ها که به برنامه نویس اجازه می دهد برای هر سایز قوانین خاصی (منظور از قوانین style می باشد) را اعمال کند. یکی از رایج ترین استفاده از Media query ها عدم نمایش یک محدوده در سایز مورد نظر شما می باشد. در مثال زیر ستون سمت چپ زمانی که سایز صفحه نمایش حداکثر 720px بود نمایش داده نمی شود.

.sidebar-left {
    display: flex;
    flex: 1 1 320px;
}
@media ( max-width: 720px ) {
    .sidebar-left {
        display: none;
    }
}

Media query ها ویژگی های جدیدی از جمله orientation و resolution اضافه شد. در مثال زیر به شما نشان می دهیم چگونه در صفحه نمایش های با وضوح بالا (high-resolution) عکس های با کیفیت تر بارگذاری شود.

.site-logo a {
    display: inline-block;
    background: url( images/logo.png ) no-repeat;
}
@media screen and ( min-resolution: 2dppx ) {
    background: url( images/[email protected] );
}

Media query ها جزء اصلی برای طراحی سایت واکنش گرا می باشد.

Media query ها: نه چندان خوب

مثال زیر را در نظر بگیرید.

ما می خواهیم یک UI component برای نمایش اعضای تیم و پروفایل آن ها درست کنیم. ما می خواهیم این component را در مکان های مختلف سایت با سایزهای متفاوت (عرض)  از آن استفاده کنیم. این مثال در صفحه نمایش با عرض 780px طراحی می شود.

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

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

برای مثال کدهای CSS این component به شرح زیر است:

.team-profile {
    text-align: center;
}
.team-profile .bio {
    margin-top: 20px;
    font-size: 14px;
}
@media ( min-width: 480px ) {
    .team-profile {
        text-align: left;
        display: flex;
    }
    .team-profile .avatar {
        flex: 0 0 120px;
    }
    .team-profile .bio {
        font-size: 16px;
        flex: 0 1 580x;
    }
}
 
/**
 * Profile card.
 */
.team-profile-card {
    text-align: center;
}
.team-profile-card .bio {
    margin-top: 20px;
    font-size: 14px;
}
 
/**
 * etc...
 */
.page .team-profile-card { ... }

خوب حالا بریم سراغ بحث اصلی یعنی Element query ها مشکلی که Media query ها دارن اینه که بر اساس سایز دستگاه یا همون viewport size عمل می کند مثال بالا در نظر بگیرید که در یک ظرف کوچک قرار بگیرد (container) با استفاده از Media query ها چون بر اساس سایز مرورگر کار می کند در container کوچک تر به خوبی نمایش داده نمی شود.

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

Element query ها چیست؟

Element query ها یک راه جدید برای پیاده کردن بهتر سایت های واکنش گرا یا همان سایت های responsive می باشد که به شما اجازه می دهد بر اساس عرض و ارتفاع Element ها شرایط مورد نظر خود را برای آن Element در نظر بگیرید.

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

.team-profile {
    text-align: center;
}
.team-profile .bio {
    margin-top: 20px;
    font-size: 14px;
}
@element ".team-profile" and ( min-width: 480px ) {
    .team-profile {
        display: flex;
    }
    .team-profile .avatar {
        flex: 1 1 120px;
    }
    .team-profile .bio {
        text-align: left;
        font-size: 16px;
        flex: 1 1 580x;
    }
}

در کد بالا عرض مرورگر یا همان viewport width مهم نیست.

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

در آخر

من نمی گویم از media query ها استفاده نکنید یا اینکه بد هست. media query ها شگفت انگیز هست و ما هم اکنون شاهد این هستیم که بسیاری از سایت ها از جمله سایت آذین وب   😕  که به صورت responsive طراحی می شود از media query ها استفاده می کنند(هنوز باهاش آشنا نشده بودم 😉 ).

Media query ها و Element query ها در کنار هم قدرت بیشتری به شما می دهد برای ساخت سایت های responsive

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