კონსტრუქცია supports

კონსტრუქცია @supports ადგენს სტილს ელემენტებისთვის ბრაუზერის მიერ მხარდაჭერილი ფუნქციონალის გათვალისწინებით. ამ კონსტრუქციაში შესაძლებელია პირობების შექმნა ლოგიკური ოპერატორების not, and, or გამოყენებით.

სინტაქსი

css@supports პირობა {
  
}

მაგალითი

მოდით, დავადგინოთ პირობა, რომ თუ თქვენი ბრაუზერი უჭერს მხარს თვისებას 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;
  }
}

Результат:

ასევე იხილეთ