آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 40) : کار با [email protected] - قسمت 3

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۳۱ اردیبهشت ۱۳۹۶

css3 attributes

در این جلسه قصد داریم مطالب مربوط به دستور @supports رو به پایان برسونیم. در ابتدا مثالهایی رو براتون میزنیم تا بهتر با عملکرد این ویژگی در واقعیت آشنا بشید.

شما میتونین مجموعه ای از استایلها، اگر مرورگر هم گرادیان و هم Blend mode رو پشتیبانی بکنه، با استفاده از کد زیر به المنت مورد نظرتون اعمال کنید. کدها بصورت زیر خواهند شد:

@supports (mix-blend-mode: overlay) and 
  (background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64))) {

  .artwork {
    background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64));
  }

  .artwork img {
    mix-blend-mode: overlay;
  }

}

همونطور که دیدید بصورت همزمان و با استفاده از عملگر منطقی and، دو شرط رو بررسی کردیم و کدهای درون بلاک تنها زمانی که هر دو شرط صدق بکنند، اعمال خواهند شد. برای خوانایی بیشتر، شرط بعد از and رو به خط بعد انتقال دادیم. به دلیل اینکه بعضی از مرورگرهای قدیمی Android برای پشتیبانی از گرادیان از -webkit- استفاده میکنند، یک شرط جدید با استفاده از عملگر or اضافه میکنیم. کدها بصورت زیر میشن:

@supports (mix-blend-mode: overlay) and 
  (
    (background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64))) or 
    (background: -webkit-linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64)))
  ) 

{

  .artwork {
    background: -webkit-linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64));
    background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64));
  }

  .artwork img {
    mix-blend-mode: overlay;
  }

}

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

@supports not (
    (mix-blend-mode: luminosity) and 
    (mix-blend-mode: saturation)
  ) 
{

  .artwork img {
    mix-blend-mode: overlay;
  }

}

میبینید که ابتدا درون پرانتز دو شرط رو قرار دادیم و قبل از کل پرانتز not رو قرار دادیم و اگر این شرایط صدق بکنه، مقدار overlay رو بجای این دو مقدار، اعمال میکنیم. دموی خروجی بصورت زیر هست:

استفاده از Javascript بهمراه دستور supports[/[email protected]] شما میتونین از این ویژگی‌ها درون Javascript هم استفاده کنید. برای اینکار از متد supports مربوط به شئ CSS استفاده میکنیم. شما میتونین از دستور CSS.supports() به دو صورت استفاده کنید و ویژگی‌های مورد نظرتون رو از لحاظ پشتیبانی شدن، بررسی کنید. روش اول که مقداری قدیمی‌تر هست و مرورگرهای بیشتری از اون پشتیبانی میکنن، بصورت زیر هست:

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

همونطور که میبینید، ویژگی و مقدار رو بصورت جداگانه قرار دادیم و اگر مرورگر از ویژگی و مقدار پشتیبانی کنه، true و در غیر این صورت false رو بر میگردونه. روش دوم که از روش اول جدیدتر هست، بصورت زیر هست:

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

همونطور که در اینجا میبینید، برخلاف روش اول، تنها از یک آرگومان استفاده کردیم. در این روش میتونین از عملگرهای and و or و not نیز استفاده کنید و چند شرط رو بصورت همزمان بررسی کنید. مثل کد زیر:

CSS.supports('not ((mix-blend-mode: overlay) and (display: grid))');

کد بالا رو اگر در آخرین نسخه Chrome امتحان کنید، مقدار False رو بر میگردونه. در اینجا یک مثال کوچک رو با هم بررسی میکنیم تا بهتر با این روش آشنا بشید. فرض کنید که بخوایم کاری کنیم که اگر مرورگر مورد نظر از مقدار luminosity پشتیبانی کرد، کلاس luminosity-blend و اگر پشتیبانی نکرد، کلاس noluminosity رو به المنت مورد نظرمون اضافه کنیم. در ابتدا کدهای CSS بصورت زیر هست:

.luminosity-blend {
  mix-blend-mode: luminosity;
}

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

کدهای Javascript هم بصورت زیر خواهند شد:

var init = function() {
  var test = CSS.supports('mix-blend-mode', 'luminosity'),
  targetElement = document.querySelector('img');

  if (test) {
    targetElement.classList.add('luminosity-blend');
  } else {
    targetElement.classList.add('noluminosity');
  }

};

window.addEventListener('DOMContentLoaded', init, false);

خروجی در مرورگر بصورت زیر هست: اگر قصد داشته باشید که در مرورگرهای دیگه هم از Supports استفاده کنید، میتونین از این Polyfill استفاده کنید. امیدوارم از این دستور خوشتون اومده باشه.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.