Day 106: the scripting media feature

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

The scripting media feature is an excellent addition to CSS for those who believe in progressive enhancement: It enables you to detect whether scripting languages, such as JavaScript, are supported.

If you disable Javascript in Firefox 117+, Chrome 120+, or Safari 17+ on this page, the disclosure widget below hides the button and displays the content instead.

Detailed content goes here…

CSS

@media (scripting: enabled) {
  .disclosure-content {
    display: none;
  }
}

@media (scripting: none) {
  button[aria-expanded] {
    display: none;
  }
}

HTML

<div class="disclosure">
  <button aria-expanded="false">
    Show details
  </button> 

  <div class="disclosure-content" id="content">
    <p>Detailed content goes here…</p>
  </div>
</div>

JS

const button = document.querySelector('button');

button.addEventListener('click', e => {
  button.setAttribute('aria-expanded', button.getAttribute('aria-expanded') === "false")
})

PS: Yes, I know, it's better not to ship the button in the first place instead of hiding it.

See on CodePen

Overview: 100 Days Of More Or Less Modern CSS