Ο κανόνας 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,
που ορίζει προτεραιότητα στυλ