فراتر از media query ها... وقت آن رسیده کهelemental شویم

همه با مفهوم media query ها آشنا هستیم. نحوه عملکرد آن ها بدین شکل است که برای تعیین چیدمان صفحه، ابتدا media type را با user agent ( رشته ای که هر مرورگر بری معرفی خود به وب سرور ها ارسال می کند ) مقایسه می کند. در صورت تطابق، ویژگی های فیزیکی device مورد نظر را مانند طول، عرض و جهت را بررسی می کند. این روشی ساده و موثر در تعیین نحوه نمایش وب سایت در device ها و رزولوشن های مختلف است.

تطبیق یک المان با container آن و نه viewport:

فرض کنید می خواهیم تعدادی محصول را با تصویر و توضیحات آنها در صفحه اصلی وب سایت در دو ردیف چهار ستونی نمایش دهیم اما در صفحه دیگری در سایدبار به صورت یک ردیف تک ستونی. Media query ها این امکان را به ما نمی دهند. چرا که بر اساس viewport و اندازه browser window کار می کنند.

EQCSS یا همان element query ها روش نوینی برای طراحی ساختارهای واکنش گرا هستند که وضعیت های مختلف واکنش گرایی را به خود element اعمال می کنند. بر خلاف @media، در @element می توان به ازای وضعیت های مختلف، شرایط واکنش گرایی دلخواهی نوشت. دیگر ویژگی ای که EQCSS فراهم می آورد، امکان scoping و اختصاص یک استایل به المان های مورد نظر است.

چگونه از EQCSS استفاده کنیم:

EQCSS یک پلاگین جاواسکریپت است که به ما این امکان را می دهد تا element query ها را درون css بنویسیم. با توجه به آنکه این پلاگین تنها با جاواسکریپت نوشته شده، برای استفاده از آن نیاز به افزودن هیچ کتابخانه ای مانند jQuery نیست. کافی است فایل EQCSS.js را در فایل html خود اضافه کنیم.

برای استفاده از element query ها فایل های با اسکتنشن .css و .eqcss معتبر می باشند.

به طور عادی و پیش فرض این پلاگین یک بار با load شدن صفحه فراخوانی می شود و البته هر زمان که browser window تغییر اندازه بدهد (مانند media query ها). element query ها از فرمت زیر تبعیت می کنند:

@element {selector} and {condition} [ and {condition} ]* { {css} }

Condition های element query:

1. Min-width بر حسب پیکسل و درصد
2. Max-width بر حسب پیکسل و درصد
3. Min-height بر حسب پیکسل و درصد
4. Max-height بر حسب پیکسل و درصد
5. Min-characters برای block element ها و فرم ها
6. max-characters برای block element ها و فرم ها
7. min-children
8. max-children
9. min-lines
10. max-lines
11. min-scroll-x برحسب پیکسل و درصد
12. max-scroll-x برحسب پیکسل و درصد
13. min-scroll-y برحسب پیکسل و درصد
14. max-scroll-y برحسب پیکسل و درصد

یک مثال:

@element ".max-scroll-x" and (max-scroll-x: 50%) {
  .max-scroll-x {
   		 background: gold;
 	 }
}

البته این condition ها لزوما مورد استفاده قرار نمی گیرند مانند نمونه زیر:

@element  “input[type=checkbox]:checked” {
 	 body {
   		 background: red;
 		 }
}

Snippet بالا در حالی که checkbox تیک بخورد، پس زمینه صفحه را قرمز می کند. یا:

@element "#sidebar:empty" {
  	#sidebar {
    		display: none;
 	 }
}

در snippet بالا در صورتیکه ساید بار خالی باشد، آن را نمایش نمی دهد.

همان طور که اشاره شد، EQCSS دارای ویژگی scoping نیز هست که به کمک آن می توان به یک element مورد نظر استایل داد. نحوه بکار بردن آن به شکل زیر است (با استفاده از $this):

@element ".scoped" and (min-width: 300px) and (max-width: 450px) {
  	$this {
    	background: gold;
  	}
}

کاری که snippet نوشته شده در بالا انجام می دهد، آن است که به تمام element های دارای کلاس scoped زمانی که انداره آن بین 300px و 450px باشد، پس زمینه طلایی می دهد.

Meta-selector ها:

$this: selectorهایی را در صفحه انتخاب می کند که شرایط element query را دارا باشند.
$parent: تگ پدر selector هایی را در صفحه انتخاب می کند که شرایط element query را دارا باشند.
$prev: تگ قبلی selector هایی را در صفحه انتخاب می کند که شرایط element query را دارا باشند.
$next: تگ بعدی selector هایی را در صفحه انتخاب می کند که شرایط element query را دارا باشند.
$root: اشاره به html document دارد.

مباحث بسیاری در خصوص استفاده از element query ها در کنار media query ها، منتهی وابسته به کامپونت و نه viewport، مطرح شده اما هنوز در فازهایی ابتدایی خود قرار دارد. نکته قابل توجه آن است که این دو یکدیگر را تکمیل می کنند و در مقابل هم قرار نمی گیرند. هر یک بخشی از ضروریات را پاسخ می گویند.

EQCSS در Github