CSS scripting Media Feature

What You’ll Learn

The scripting media feature detects whether JavaScript (or other client-side scripting) is available. Style no-JS fallbacks and enhanced states with @media (scripting) queries.

Introduction

Many websites depend on JavaScript for navigation toggles, form validation, and interactive widgets. But some users disable scripting, and some environments block it entirely. Your site should still be usable.

The CSS scripting media feature lets you apply different styles depending on whether scripting is enabled or unavailable — without writing any JavaScript yourself.

Definition and Usage

Write @media (scripting: none) for no-JavaScript fallbacks and @media (scripting: enabled) for enhanced styling when scripting works. A third value, initial-only, matches rare cases where scripting runs only during the initial page load.

📝 Syntax

Use (scripting: value) inside @media:

/* Scripting disabled or unavailable */
@media (scripting: none) {
  /* No-JS fallback styles */
}

/* Scripting fully enabled */
@media (scripting: enabled) {
  /* Enhanced JS-available styles */
}

/* Scripting only during initial page load (rare) */
@media (scripting: initial-only) {
  /* Initial-load-only styles */
}

Accepted Values

scripting vs noscript

scripting vs .no-js class

Basic Example

.status {
  display: none;
}

@media (scripting: none) {
  .status--none {
    display: block;
    color: #991b1b;
  }
}

@media (scripting: enabled) {
  .status--enabled {
    display: block;
    color: #166534;
  }
}

Default Value

There is no CSS default. The matched value depends on the user’s browser and whether scripting is enabled. Most visitors match scripting: enabled.

Syntax Rules

• Use parentheses and a colon: (scripting: none) — not @media scripting alone.
• Do not call scripting a CSS property — it is a media feature.
• Hide both messages by default, then show the matching one per query.
• Pair with <noscript> for HTML content fallbacks.
• Never hide critical content with scripting: enabled alone.

Related Topics

• screen — on-screen display media type
• pointer — input precision detection
• display-mode — PWA display context

When to Use scripting

Reach for scripting when JavaScript availability affects how content should appear:

• No-JS warnings — Show a friendly message when scripting is disabled.
• Navigation fallbacks — Reveal all menu links when JS toggle buttons cannot run.
• Form hints — Display static instructions when client-side validation is unavailable.
• Progressive enhancement — Style the enhanced state differently from the baseline.
• Accessibility — Ensure content remains visible and usable without scripting.

Examples Gallery

Practice scripting with enabled messages, no-JS warnings, navigation fallbacks, and dual-state status displays.

.status {
  display: none;
}

@media (scripting: enabled) {
  .status--enabled {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
  }
}

.status {
  display: none;
}

@media (scripting: none) {
  .status--none {
    display: inline-block;
    background: #fee2e2;
    color: #991b1b;
  }
}

.nav-links {
  display: none;
}

@media (scripting: none) {
  .nav-toggle {
    display: none;
  }

  .nav-links {
    display: block;
  }
}

.msg {
  display: none;
}

@media (scripting: none) {
  .msg--none { display: inline-block; }
}

@media (scripting: enabled) {
  .msg--enabled { display: inline-block; }
}

🛠 Usage Tips

• HTML first — Build pages that work without JavaScript; add scripting queries for polish.
• Use noscript — Pair CSS with <noscript> for universal no-JS messaging.
• Hide by default — Set display: none on status elements, reveal per query.
• Test with JS off — Disable JavaScript in browser dev tools to verify fallbacks.
• Nav fallbacks — Always expose links when hamburger menus cannot function.

⚠️ Common Pitfalls

• Calling it a property — scripting is a media feature, not a CSS property.
• Only CSS detection — Not all browsers support scripting queries; use noscript too.
• Hiding essential content — Never require scripting: enabled to see critical information.
• Assuming JS = enabled — Some privacy tools block scripts after page load (initial-only).
• Replacing progressive enhancement — Scripting queries complement good HTML; they don’t replace it.

♿ Accessibility

• Works without JS — Core content and navigation must be accessible with scripting off.
• Clear no-JS messages — Tell users when features need JavaScript, don’t silently fail.
• Keyboard navigation — Expose all links in the DOM when scripting is unavailable.
• Do not trap users — Hidden nav menus without fallbacks block users who disable JS.
• Screen reader support — Use semantic HTML; CSS scripting queries only adjust presentation.

💡 Best Practices

Related Topics