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

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

სინტაქსი

@supports პირობა {
	
}

მაგალითი

მოდით, დავადგინოთ პირობა, რომ თუ თქვენი ბრაუზერი უჭერს მხარს თვისებას display მნიშვნელობით flex, მაშინ გამოჩნდება მხოლოდ აბზაცი შესაბამისი ტექსტით, ამ შემთხვევაში მისი ტექსტის ფერი იქნება ცისფერი:

<p class="yes">თქვენი ბრაუზერი უჭერს მხარს display: flex.</p>
<p class="no">თქვენი ბრაუზერი არ უჭერს მხარს display: flex.</p>

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

ასევე იხილეთ

კონსტრუქცია @import,
რომელიც იმპორტირებს CSS-ფაილს
კონსტრუქცია @media,
რომელიც ადგენს სტილს მედია ტიპისთვის
კონსტრუქცია !important,
რომელიც ადგენს სტილის პრიორიტეტს