11
تشکر

شناسایی پشتیبانی مرورگرها در CSS3 با استفاده از supports@

CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

قبلاً در مطلبی، با عنوان ویژگی‌های جدید در مرورگر کروم، نگاهی کوتاه به ویژگی supports@ در CSS3 داشتیم. با استفاده از این قانون میتوانید بفهمید که آیا مرورگر از ویژگی مورد نظر شما در CSS پشتیبانی میکند یا خیر. با استفاده از این ویژگی دیگر نیازی به کتابخانه‌هایی مانند Modernizr نداریم.
در این مطلب این ویژگی را به صورت دقیقتری بررسی میکنیم.
در ادامه مطلب همراه ما باشید…

استفاده از supports@

برای مثال ما میخواهیم از ویژگی grid استفاده کنیم. برای استفاده از supports@ باید هم نام و هم مقدار مشخصه وارد شود. کدهای زیر که درون supports@ نوشته شده است، فقط زمانی اجرا می‌شوند که مرورگر کاربر از ویژگی display: grid پشتیبانی کند.

@supports (display: grid) {
  .selector {
    display: grid;
    grid-column: 3;
    grid-row: 1;
    grid-row-span: 2;
  }
}

عملیات منطقی

همانند قانون media، این قانون نیز از عملیات منطقی مانند and, or و not پشتیبانی میکند.

برای مثال در کد زیر ابتدا ما به صورت عادی از خاصیت border-image استفاده کردیم. اما در زیر آن، با استفاده از supports@ چک کردیم که اگر مرورگر از این خاصیت پشتیبانی نکرد، از راه دیگری برای اینکار استفاده کنیم.

.foo {
  border: 15px solid transparent;
  border-image: url(fancyborders.png) 33%;
}
@supports not (border-image: url(foo.png) 33%) {
  .foo {
    border: 3px solid rgba(0,0,0,.3);
    background: url(alternative-bg.png) #fff;
  }
}

البته اگر بخواهیم به صورت درست پشتیبانی نشدن خاصیت border-image را چک کنیم باید، پیشوندهای آن را هم چک کنیم. مانند کد زیر:

@supports not (border-image: url(foo.png) 33%)
          or (-moz-border-image: url(foo.png) 33%)
          or (-webkit-border-image: url(foo.png) 33%) { … }

supports@ در جاوا اسکریپت

اما برای تشخیص پشتیبانی مرورگرها از یک ویژگی خاص در جاوا اسکریپت باید از شی CSS و متد supports استفاده کنیم. مانند کد زیر:

if(CSS.supports('border-image', 'url(foo.png) 33%')) {
  alert('supported');
}

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

  • وحید می‌گه:

    درود

    عزیزان یه نفر به من بگه که چرا فقط در استایل خودم که به صورت اکسترنال به فایل html پیوستش کردم از کد background-image استفاده می کنم نه مرورگر کروم نشونش میده و نه فایرفاکس ؟

    کروم نسخه 33 دارم و فایرفاکس 27

    کد رو هم اینطور نوشتم
    body{
    background-image:url (“ax.png”);
    }

    • مهرشاد درزی می‌گه:

      زمانی که این کار را انجام می دهید باید آدرس دهی فایل am.png تون رو مطابق صفحتون تغییر بدین
      زمانی که تو یه فایل css هستین مبنا همون پوشه ای میشه که فایل css هست در غیر این صورت باید ادرس فولدر ها هم اضافه کنید

  • مهدی می‌گه:

    خوشم میاد مطالب جدید میزاری ادم یه چیز جدید یاد میگیره.

  • طراحی سایت می‌گه:

    ممنون. بیشتر مطلب بذارید برامون


  • نظرات این مطلب بسته است.