آموزش دستور supports@ در CSS

دستور @supports به ما امکان می دهد تا بررسی کنیم که آیا مرورگر ما از یک ویژگی یا مقدارِ CSS خاص پشتیبانی می کند یا نه. اگر از ویژگی مورد نظر پشتیبانی نشود، می توانیم استایل های پشتیبان را مورد استفاده قرار دهیم.  با استفاده از این روش، می توانیم تنها وقتی که مرورگر می تواند استایل های ما را به کار ببرد، آنها را مورد استفاده قرار دهیم. 

@supports (property: value) {
  /* باشد این کدها اعمال می شوند true اگر ارزش شرط برابر با */
}

استفاده از @supports در گرید و فلکس

ما می توانیم کدهای عادی CSS را با دستور @supports ترکیب کنیم تا بتوانیم استایل های پشتیبان را ارائه دهیم. در مثال زیر، اگر مرورگر از دستور display: flex پشتیبانی کند، کدهای CSS که در درون دستور @supports قرار دارند، اعمال می شوند. اما اگر نه، کلاس container. که در بیرون از دستور @supports قرار دارد، اعمال خواهد شد:

/* پشتیبانی نکند display: flex اگر مرورگر از دستور CSS استفاده از این کد */
.container {
  float: left;
  width: 100%;
}

/* پشتیبانی کند display: flex اگر مرورگر از دستور CSS استفاده از این کد */
@supports (display: flex) {
  .container {
    display: flex;
  }
} 

در مثال زیر، اگر مرورگر از دستور display: grid پشتیبانی کند، کدهای CSS که در درون دستور @supports قرار دارند، اعمال می شوند. اگر نه، کدهای درون کلاس container. که در بیرون از @supports قرار دارند، اعمال خواهندشد:

/* پشتیبانی نکند display: grid اگر مرورگر از دستور CSS استفاده از این کد */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}

/* پشتیبانی کند display: grid اگر مرورگر از دستور CSS استفاده از این کد */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

نفی کردن با استفاده از not

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

@supports not (display: grid) {
  .warning {
    background-color: pink;
    padding: 10px;
    border: 1px solid red;
  }
}

ترکیب کردن شرطها

اگر می خواهید از چند شرط استفاده کنید، می توانید از کلمات کلیدی and و or و not استفاده کنید:

@supports (display: grid) and (gap: 10px) {
  .container {
    display: grid;
    gap: 10px;
  }
}

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

منبع: https://www.w3schools.com/css