This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
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.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-11-13T00:00:00+00:00) Day 106: the scripting media feature. Retrieved from https://www.scien.cx/2023/11/13/day-106-the-scripting-media-feature/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.