جستجوگرهای ویژگی در CSS

سی اس اس می تواند کدهایی را در صورتی که مرورگرها از آنها پشتیبانی کنند، اعمال کند.به این کدها جستجوگرهای ویژگی(feature queries) گفته می شود. این جستجوگرها بسیار شبیه به مدیا کوئری ها هستند.مثلاً ما می خواهیم اگر ویژگی color توسط مرورگر پشتیبانی شود، چند خط کد را به سند اعمال کنیم:

@supports (color: black) {
 body {color: black;}
 h1 {color: purple;}
 h2 {color: navy;}
}

 در قطعه کد بالا به مرورگر می گوییم: اگر تشخیص می دهی و می توانی توسط ویژگی-مقدار color:black کاری را انجام دهی، پس استایل های زیر را به سند اعمال کن. در غیر این صورت این استایل ها را نادیده بگیر.

در مرورگرهایی که دستور @supports را متوجه نمی شوند، تمام این کدها نادیده گرفته می شوند. جستجوگرهای ویژگی، راهی مناسب برای بهبود بخشیدن به استایل ها به حساب می آیند. بعنوان مثال فرض کنید که از قبل برای ویژگی display، مقدار inline-block را تعریف کرده باشیم.  و اکنون می خواهیم مقدار grid را برای این ویژگی تنظیم کنیم؛ ما می توانیم کدهای قدیمی را حفظ کنیم و سپس در داخل یک برگه ی استایل، کد زیر را اضافه کنیم:

@supports (display: grid ) {
  section#main {display: grid;}

  /* بقیه استایل های گرید اینجا قرار می گیرند */
}

 کدهای بالا در مرورگرهایی اعمال می شوند که مقدار grid را برای ویژگی display درک می کنند؛ و بر روی استایل های قدیمی که چینش صفحه را کنترل می کنند، رونویسی می شوند. مرورگرهای بسیار قدیمی به احتمال زیاد، دستور @support را درک نمی کنند. بنابراین تمام این کدها را نادیده می گیرند. 

جستجوگرهای ویژگی، می توانند تودرتو باشند و همچنین می توانند در داخل مدیا کوئری ها نیز اضافه شوند و برعکس. بعنوان مثال می توانیم برای استایل های screen و print از مدیا کوئری ها ویژگی و مقدار display:flex را در داخل یک @supports قرار دهیم:

@supports (display: flex) {
  @media screen {
    /* screen flexbox styles go here */
  }
  @media print {
    /* print flexbox styles go here */
  }
}

 به طور برعکس، ما می توانیم بلوک های @supports() را در داخل کدهای مدیا کوئری ها قرار دهیم:

@media screen and (max-width: 30em){
  @supports (display: flex) {
    /* small-screen flexbox styles go here */
  }
}
@media screen and (min-width: 30em) {
  @supports (display: flex) {
    /* large-screen flexbox styles go here */
  }
}

اینکه چگونه این قطعه کدها را مرتب سازی کنید، به شما بستگی دارد. جستجوگرهای ویژگی نیز مانند مدیا کوئری ها به ما اجازه می دهند از عملگرهای منطقی استفاده کنیم. فرض کنید می خواهیم اگر یک مرورگر از ویژگی و مقدار display:grid  و همچنین از شکل های CSS پشتیبانی می کند، استایل هایی را به صفحه اعمال کنیم. می توانیم به صورت زیر عمل کنیم:

@supports (display: grid) and (shape-outside: circle()) {
  /* grid-and-shape styles go here */
}

 کد بالا به طور کلی، معادل با کد زیر است:

@supports (display: grid) {
  @supports (shape-outside: circle()) {
    /* grid-and-shape styles go here */
  }
}

 اما ما می توانیم از بیش از یک عملگر and استفاده کنیم.  شکل های سی اس اس(CSS Shapes)، که در فصل 10 با جزئیات بیشتر توضیح داده خواهند شد، مثال خوبی هستند که بفهمیم چرا عملگر or مفید است؛ زیرا برای مدتی طولانی، WebKit تنها از شکل های سی اس اس، به وسیله ی پیشوندها پشتیبانی می کرد. بنابراین  اگر بخواهیم از این شکل ها استفاده کنیم، می توانیم از یک جستجوگر ویژگی مانند زیر استفاده کنیم:

@supports (shape-outside: circle()) or (-webkit-shape-outside: circle()) {
  /* استایل های شکل در اینجا قرار می گیرند */
}

در کدهای بالا مطمئن شده ایم که از هردو ویژگی پیشوند دار(مثل webkit) و بدون پیشوند، استفاده شده باشد. این کار به ما امکان می دهد تا هم از سازگاری عقب رو استفاده کنیم، و هم با استفاده از پیشوندها، از نسخه های WebKit پشتیبانی کنیم و هم از دیگر مرورگرهایی که از شکل ها(shapes) بدون پیشوندها استفاده می کنند پشتیبانی کنیم.

وقتی که می خواهیم از چینش grid استفاده کنیم، ممکن است بخواهیم marginها و دیگر ویژگی ها را نیز تغییر دهیم. به مثال زیر توجه کنید:

div#main {overflow: hidden;}
div.column {float: left; margin-right: 1em;}
div.column:last-child {margin-right: 0;}
@supports (display: grid) {
div#main {display: grid; grid-gap: 1em 0; overflow: visible;}
div#main div.column {margin: 0;}
}

 این امکان  وجود دارد که از علامت نفی،یعنی علامت not،  نیز استفاده کنیم. بعنوان مثال ما می توانیم از استایل های زیر در موقعیت هایی که از چینش grid پشتیبانی نمی شود، استفاده کنیم:

@supports not (display: grid) {
 /* اگر از گرید استفاده نشود این استایل ها اجرا می شوند */
}

 ما می توانیم در یک کوئری، عملگرهای منطقی خود را با یکدیگر ترکیب کنیم اما برای اینکه بتوانیم از منطق به راحتی استفاده کنیم، به پرانتزها نیاز داریم. فرض کنید که می خواهیم یک مجموعه از استایل ها را وقتی که از color پشتیبانی می شود، و وقتی که یکی از چینش های grid یا flex پشتیبانی می شوند، اعمال کنیم. این کدها به صورت زیر خواهد بود:

@supports (color: black) and ((display: flex) or (display: grid)) {
  /* styles go here */
}

توجه کنید که در کدهای بالا به دور بخش or از منطق، یک جفت پرانتز قرار دارد. یعنی این که  ویژگی-مقدارهای grid و flex را محصور کرده است. این پرانتزهای اضافی ضروری هستند. بدون آنها عبارت کلی ما با شکست مواجه می شود و استایل های درون بلوک رد خواهند شد. به عبارت دیگر، نباید به صورت زیر عمل کنیم:

@supports (color: black) and (display: flex) or (display: grid) {

 در نهایت ما ممکن است تعجب کنیم که چرا در تست های جستجوگرهای ویژگی، هم به ویژگی و هم به مقدار آن نیاز داریم.  دلیلش این است که ممکن است تمام مرورگرها از تمام مقادیر آن ویژگی استفاده نکنند.بعنوان مثال  می توانیم چینش grid را نام ببریم. فرض کنید که ما بخواهیم به صورت زیر، برای grid تست انجام دهیم:

@supports (display) {
  /* استایل های گرید اینجا قرار می گیرند */
}

 حتی اینترنت اکسپلورر 4 نیز از ویژگی display پشتیبانی می کند. هر مرورگری که دستور @supports را درک کند، قطعا از  ویژگی display و بیشتر مقادیر آن نیز پشتیبانی می کند. اما ممکن است از مقدار grid پشتیبانی نکند. علت اینکه ویژگی و مقدار آن را در داخل جستجوگر ویژگی مورد تست قرار می دهیم همین است.

خلاصه ی فصل

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