Using @supports or @media doesn’t increase the specificity or importance of a rule. Normal cascade rules apply, meaning that styles defined after an @supports or @media block will override rules within the block. Consider the following CSS:
@supports ( text-decoration: underline wavy #c09 ) {
.title {
font-style: normal;
text-decoration: underline wavy #c09;
}
}
.title {
font-style: italic;
}
All elements with a title class will be both italicized and underlined. The subsequent font-style: italic; line overrides the font-style: normal;. That’s not what we want here. Instead, we need to flip the order of our rule sets, so that font-style: normal takes precedence over font-style: italic :
.title {
font-style: italic;
}
@supports ( text-decoration: underline wavy #c09 ) {
.title {
font-style: normal;
text-decoration: underline wavy #c09;
}
}
Both @supports and @media work best when used to progressively enhance a site. Define your base styles—the styles that every one of your target browsers can handle. Then use @supports or @media to override and supplement those styles.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.