Ahmad Shadeed:
Today I learned about the media scripting feature. It’s about detecting JS support via a CSS media query. Soon, we won’t need the
Tweet.no-jsor.jsclasses once this is widely available. Currently supported in Chrome 120, Firefox 119, Safari 17.
@media (scripting: enabled) {
/* JavaScript is supported */
:root {
--js-supported: inline-flex;
}
}Code language: CSS (css)We used to put a class like no-js on the HTML element:
<html class="no-js">Code language: JavaScript (javascript)Then remove it or swap it out with a line of JavaScript, depending on if you needed to write styles for a situation where a user did or didn’t have JavaScript enabled.
document.documentElement.classList.remove("no-js");Code language: CSS (css)The @media query is now cleaner as it doesn’t require JavaScript, you can do it all in CSS.
