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

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

css3 attributes

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

آموزش کار با [email protected]

همونطور که میدونین هر چه که زمان میگذره، ویژگی‌های زیادی در CSS معرفی میشن و مدت زمانی طول میشکه تا مرورگرها از اون موارد پشتیبانی کنه. در این مواقع و با گذر زمان اینکه بدونیم چه ویژگی هایی در چه مرورگرهایی پشتیبانی میشن خیلی سخت هست و حتما باید از ابزاری برای حل این مشکل استفاده کنیم. یکی از معروفترین ابزارهایی که برای تشخیص پشتیبانی مرورگرها از ویژگی‌های مختلف، وجود داره، Modernizr هست. Modernizr بصورت اتوماتیک ویژگی‌های مورد نظر شما رو برای مرورگر فعلی بررسی میکنه و اگر ویژگی مورد نظر پشتیبانی بشه، true و در غیر اینصورت false رو بر می‌گردونه. با این ابزار شما میتونین فقط در جاهایی که از ویژگی مورد نظر پشتیبانی میشه، استفاده کنید و در مرورگرهایی که از این ویژگی پشتیبانی نمیشه، از چیز دیگری بعنوان جایگزین استفاده کنید تا مرورگرهای قدیمی رو نیز تحت پوشش قرار داده باشین.

همونطور که دیدید این ابزار بر پایه Javascript هست و یک تیم حرفه ای اون رو به وجود آورده و توسعه داده و بصورت رایگان و Open Source در اختیار دیگران قرار داده. در سالهای اخیر ویژگی هایی به هسته CSS و Javascript بصورت ذاتی اضافه شد که این امکان رو به برنامه نویسان میده بدون استفاده از ابزارهایی مانند Modernizr، پشتیبانی ویژگی مورد نظرشون رو بررسی کنن.

در این قسمت و قسمتهای بعدی شما رو بصورت کامل با این موضوع آشنا خواهیم کرد. از این لینک به عنوان منبع استفاده خواهیم کرد.

خاصیت @supports جزئی از قواعد شرطی CSS3 هست. @media هم درون همین قواعد شرطی CSS3 قرار میگیره. همونطور که میدونین از @media برای کارهای واکنشگرا کردن مورد استفاده قرار میگیره. با media شما میتونین شرطهای مورد نظرتون رو بزارید و این ویژگی هم همیشه به موارد مربوط به viewport از قبیل width و height دسترسی داره و هر زمان که اون شرایط برقرار بشن، کدهای مورد نظر درون اون media اجرا خواهند شد.

با استفاده از @supports هم میتونین نوع دیگری از شروط رو قرار بدین. با این خصوصیت شما میتونین ویژگی و مقادیر مورد نظرتون رو بررسی و چک کنید. کاری که این ئستور برای شما انجام میده اینه که مرورگر فعلی رو بررسی میکنه و اگر ویژگی مورد نظر در این مرورگر قابل پشتیبانی باشه، کدهای درون خودش رو اجرا میکنه و اگر پشتیبانی نشه، کدهای موجود درون اون، صرف نظر خواهند شد.

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

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

body {
  background-color: blue;
}

@supports (display: flex) {

  body {
    background-color: red;
  }

}

همونطور که دیدید در ابتدا رنگ پس زمینه رو برای body، آبی قرار دادیم و بعد از دستور Supports استفاده کردیم و درون اون ویژگی display: flex رو بررسی کردیم. هر مرورگری که flexbox رو پشتیبانی کنه، کدهای درون دستور Supports اجرا میشن و باعث میشه که رنگ پس زمینه قرمز رنگ بشه. اگر کد بالا رو درون مرورگرهای اخیر Chrome باز کنیم، پس زمینه قرمز میشه و اگر کد بالا رو درون مرورگرهای IE مثل IE9 باز کنیم، چونکه از flexbox پشتیبانی نمیکنن، رنگ پس زمینه آبی رنگ خواهد شد.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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