supports@

با استفاده از دستور supports@ می توان پشتیبانی مرورگر را در مورد یک ویژگی بررسی کرد. یعنی آن ویژگی در مرورگر منظور کار می کند یا نه.

معمولا این کار توسط کتابخانه های جاوااسکریپت نظیر Modernizr انجام می شود اما این دستور این امکان را می دهد تا بتوان این آزمایش را در فایل CSS بدون نوشتن کد جاوااسکریپت انجام داد.

به عنوان مثال فرض کنید می خواهید از ماژول فلکس باکس استفاده کنید اما در عین حال می خواهید مراقب مرورگرهایی که این ماژول را پشتیبانی نمی کنند نیز باشید و برای آنها استایل مجزا بنویسید و راه حل دیگری برای آنها داشته باشید:

 

@supports (display: flex) {
  .element {
      display: flex;
      justify-content: space-around;
      /* ... */
  }
}

 

در اینجا اگر مرورگر ویژگی display را با مقدار flex پشتیبانی کند کد داخل بلاک را اعمال می کند و الا کل بلاک کد را نادیده می گیرد.

همینطور می توانید چک کنید که اگر ویژگی پشتیبانی نمی شود استایل خاصی بنویسید. در مثال زیر اگر ویژگی mix-blend-mode با مقدار overlay در مرورگری پشتیبانی نشود از یک opacity ساده برای عنصر استفاده می شود:

 

@supports (mix-blend-mode: overlay) {

  .example {
    mix-blend-mode: overlay;
  }

}

@supports not(mix-blend-mode: overlay) {

  .example {
    opacity: .5;
  }

}

 

کلمه کلیدی not در کد بالا نقش کلیدی دارد.

همچنین می توانید چند ویژگی را بطور همزمان چک کنید و بین نتیجه آنها رابطه منطقی نیز برقرار کنید. این رابطه می تواند با استفاده از کلمات کلیدی and و or بوجود بیاید.

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

 

@supports (transform: rotate3d(1, 1, 0, 40deg)) and (transition: transform 200ms) {
  /* استایل مورد نظر اینجا قرار می گیرد. */
}

 

در این مثال پشتیبانی دو ویژگی و مقدار آنها مورد بررسی قرار می گیرد و استایل داخل بلاک زمانی اعمال می شود که هر دوی این دستورات در مرورگر مورد نظر پشتیبانی شوند. چون از کلمه کلیدی and استفاده شده است یعنی به مرورگر می گوییم اگر transition و transform را با مقادیر مورد نظر پشتیبانی می کنی استایل زیر را اعمال کن.

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

 

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
  .element {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
  }
}

 

همینطور امکان ترکیب کلمات کلیدی or و and نیز وجود دارد اما باید مثل زبان های برنامه نویسی دیگر شروط به درستی در پرانتز قرار بگیرند به عنوان نمونه کد زیر صحیح نیست:

 

@supports (transform: rotate3d(1, 1, 0, 30deg) and (transition: transform 2s) or (animation: my-3d-animation 2s alternate forwards) {
    /* ... */
}

 

اما اگر بصورت زیر نوشته شود صحیح می باشد:

 

@supports (transform: rotate3d(1, 1, 0, 30deg) and 
          ( (transition: transform 2s) or (animation: my-3d-animation 2s alternate forwards) ) {
            /* ... */
}

 

توجه داشته باشید که یک فضای خالی بعد از کلمه کلیدی not و همینطور دو طرف and و or اجباری می باشد.

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

دموی زیر را بررسی کنید:
 

See the Pen @supports by Mojtaba Seyedi (@seyedi) on CodePen.

 

اگر دنبال پلیفیلی در مورد این دستور می باشید می توانید به این آدرس مراجعه کنید.

در جاوااسکریپت نیز می توانید بصورت زیر پشتیبانی یک ویژگی را بررسی کنید:

 

CSS.supports('(mix-blend-mode: overlay)')

 

البته استفاده از این تابع در جاواسکریپت دو سینتکس متفاوت دارد. سینتکس بالا نسخه جدیدتر است و پشتیبانی کمتری در مرورگرها دارد و مورد پایین سینتکس قدیمی تر این تابع می باشد:

 

CSS.supports('mix-blend-mode', 'overlay')

 

همین الان کد بالا را در کنسول مرورگرتان اجرا کنید اگر مقدار ture برگردانده شد یعنی مرورگر شما این ویژگی و مقدار مربوط به آن را پشتیبانی می کند در غیر این صورت اگر با مقدار false مواجه شدید یعنی امکان استفاده از این ویژگی در مرورگر شما وجود ندارد.
 

پشتیبانی مرورگر ها