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

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

css3 attributes

در جلسه قبل مقدماتی رو در مورد دستور @supports بهتون توضیح دادیم و شما رو با اون آشنا کردیم. در این جلسه مثالهای بیشتری در مورد این دستور میزنیم و شما رو بیشتر با قابلیتهای اون آشنا میکنیم.

خب در اینجا میخوایم یک کد رو با هم بررسی کنیم. کد زیر رو در نظر بگیرید:

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

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

}

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

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

  .example {
    /* alternative styles here */
  }

}

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

  • شرایطی که شما قصد دارید اونا رو بررسی کنید، باید درون پرانتز قرار داده بشن. بعبارت دیگر نمیتونین کد @supports mix-blend-mode: overlay { ... } رو استفاده کنید و کد معتبری نیست. با این حال اگر پرانتزهای بیشتری رو قرار بدین، کد مورد نظر همچنان معتبر هست. بعبارت دیگر کد @supports ((mix-blend-mode: overlay)) { ... } معتبر است.
  • درون شرط مورد نظر باید بصورت همزمان هم ویژگی و هم مقدار مربوط به اون وجود داشته باشد. در مثالی که بالا زدیم، ویژگی mix-blend-mode به همراه مقدار overlay مورد بررسی قرار گرفت.

حالا یک مثال کوچک رو با هم بررسی میکنیم تا بهتر با این دستور آشنا بشیم. در ابتدا کدهای HTML زیر رو قرار میدیم:

<article class="artwork">
  <img src="myimg.jpg" alt="cityscape">
</article>

کدهای CSS:

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

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

}

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

  .artwork img {
    opacity: 0.5;
  }

}

با اینکار اون مرورگرهایی که این ویژگی رو پشتیبانی میکنن، mix-blend-mode و در بقیه موارد، opacity اعمال میشه. خروجی بصورت زیر خواهد بود:

بررسی چند شرط بصورت یکجا

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

@supports (property1: value1) and (property2: value2) {
  element {
    property1: value1;
    property2: value2;
  }
}

با استفاده از عملگر or تعدادی ویژگی جایگزین برای اعمال به یک المنت، استفاده کنید. این عملگر بیشتر در زمانهایی کاربرد داره که ویژگی یا مقدار مورد نظر، دارای prefix‌های خاصی باشه. کد زیر رو ببینید:

@supports (property1: value1) or (-webkit-property1: value1) {
  element {
    -webkit-property1: value1;
    property1: value1;
  }
}

میبینید که علاوه بر ویژگی، prefix شده اون رو هم بررسی کردیم و با پشتیبانی هر کدام، کدهای مورد نظر اعمال میشن. شما میتونین بصورت همزمان و ترکیبی از عملگرهای or و and نیز استفاده کنید. بصورت زیر:

@supports ((property1: value1) or (-webkit-property1: value1))
      and (property2: value2) {
  element {
    -webkit-property1: value1;
    property1: value1;
    property2: value2;
  }
}

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

از کلمه کلیدی not فقط میتونین برای یک شرط در هر بار استفاده کنید و به همین دلیل کد زیر نامعتبر هست:

@supports not (property1: value1) and (property2: value2) {
  /* styles here... */
}

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

@supports not ((property1: value1) and (property2: value2)) {
  /* styles here... */
}

نکته بعدی که باید به اون دقت داشته باشید اینه که بعد از not و قبل و بعد از or و and، از فضای خالی یا space استفاده کنید.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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