CSS scripting media feature: reveal a fallback when scripts cannot run

When to use it

A live dispatch board includes a static list of urgent cases in the HTML and adds a live filter when its script initializes. The static list remains the default. When scripting is unavailable, a short note explains that filtering is unavailable while leaving the cases readable. If the browser does not support this media feature, the default list still works. An enabled result is not proof that the filter loaded: a blocked module or runtime exception can leave scripts allowed but the feature broken. The application should reveal the filter only after initialization, not merely through this media query. Test script disabled, bundle blocked, an exception during setup, and the initial-only setting where it exists. Do not make an enabled-only CSS rule hide the static cases. The fallback text should describe an actual limitation, not tell users that their browser is obsolete. CSS can present a hint; the HTML and application own the real workflow.

.dispatch-list { display: block; }
.script-unavailable-note { display: none; }
@media (scripting: none) { .script-unavailable-note { display: block; color: #173441; background: #eef4f6; padding: .75rem; } }

Cost and verification

The query is cheap; the main cost is false confidence in what it measures. A browser extension may block a script while the media feature still reports enabled. Keep all essential data in the default markup or supply a server-rendered path, and toggle an enhanced control only after successful setup. The note can be absent in older browsers that ignore the query, so the page must remain comprehensible without it. Do not use scripting: none as a security check or authorization boundary. It is a presentation hint about the environment, not a guarantee about individual requests or application health.

Common Mistakes

• Do not equate scripting: enabled with a successful app initialization.
• Do not hide essential content behind a media feature.
• Do not use this query to decide authorization or data access.

Connected lessons

• CSS Property Decisions
• CSS media queries: change layout at a content failure point
• CSS :defined: preserve content while a custom element upgrades
• HTML noscript: keep the essential task available without enhancement
• HTML script loading: choose ordered defer or independent async work