The experimental new CSS media feature prefers-reduced-transparency lets you detect if a user has enabled the setting on their device to minimize the amount of transparent or translucent layer effects. This feature is currently only available in Firefox. Thanks to CanadaHonk for adding this new reference page for us.
Here’s a quick look at what this feature looks like:
@media (prefers-reduced-transparency) { .translucent { opacity: 0.8; }
}
Dipika Bhattacharya updated the scripting media feature to reflect that it is now fully supported in Firefox. However, being supported in only one browser, the feature still remains pretty much experimental. You can use this media query to style your CSS based on whether scripting, such as JavaScript, is available on the current document, only during initial page load, or not available at all.
Similarly, support for another media feature, inverted-colors, has been added to Firefox; however, this one is available behind a flag (layout.css.inverted-colors.enabled). You can use the inverted-colors media query to detect if your user agent or operating system has inverted all colors.