supports විධානය

@supports විධානය අංග සඳහා ශෛලිය නියම කරන්නේ බ්‍රවුසරය විසින් සහාය දක්වන හැකියාවන් සැලකිල්ලට ගනිමිනි. මෙම විධානය තුළ, not, and, or යන තාර්කික ක්‍රියාකරුවන් භාවිතයෙන් කොන්දේසි නිර්මාණය කළ හැකිය.

වාක්‍ය රීතිය

css@supports condition {
  
}

උදාහරණය

ඔබේ බ්‍රවුසරය display ගුණාංගය flex අගය සමඟ සහාය දක්වන්නේ නම්, එම කොන්දේසිය සපුරාලන පාඨය සහිත ඡේදය පමණක් පෙන්වනු ඇති අතර, එහි අකුරු වර්ණය නිල් පැහැති වනු ඇතැයි කොන්දේසියක් නිර්මාණය කරමු:

html<p class="yes">ඔබේ බ්‍රවුසරය display: flex සහාය දක්වයි.</p>
<p class="no">ඔබේ බ්‍රවුසරය display: flex සහාය නොදක්වයි.</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

මෙයද බලන්න