How to Inspect and Debug CSS scripting Media Queries in Safari Web Inspector

Modern web applications frequently rely on JavaScript to render interactive components, fetch dynamic data, and manage navigation flows. However, resilient web design demands progressive enhancement—ensuring that web pages remain legible, accessible, and functional even when JavaScript is disabled, fails to execute due to strict content security policies (CSP), or stalls under hostile cellular connections. Historically, developers relied on manual <noscript> tags or class-switching scripts (such as no-js class toggles). The modern CSS Media Queries Level 5 specification formalises this paradigm through the scripting media feature. WebKit in Safari provides full support for evaluating scripting states and debugging fallback rules directly inside Safari Web Inspector.

Understanding the CSS scripting Media Feature

The scripting media query evaluates whether scripting languages (primarily JavaScript) are supported and currently active in the rendering document. It supports three distinct values:

• none: Scripting is completely unavailable or disabled in the browser session. Elements relying on client-side JavaScript execution will not function.
• initial-only: Scripting is enabled only during the initial document load, but no ongoing scripts or event handlers execute afterwards (common in printed documents or static prerendered snapshots).
• enabled: Scripting is supported, enabled, and active throughout the document lifecycle, allowing dynamic DOM manipulation and event processing.

Writing Progressive Enhancement CSS with scripting Queries

By declaring styles within @media (scripting: none) and @media (scripting: enabled) blocks, stylesheets can conditionally adjust layouts, interactive widgets, and fallback content purely in CSS without executing a single line of bootstrapping script.

/* Base container styling */
.dynamic-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

/* Fallback behaviour when JavaScript is disabled or unavailable */
@media (scripting: none) {
    /* Reveal standard HTML anchor navigation instead of interactive JS controls */
    .js-carousel-buttons {
        display: none !important;
    }

    .no-js-warning {
        display: block;
        padding: 1rem;
        background-color: #fef3c7;
        color: #92400e;
        border: 1px solid #f59e0b;
        margin-bottom: 1rem;
    }

    /* Stack items vertically for native scrolling */
    .dynamic-carousel {
        flex-direction: column;
        overflow-x: visible;
    }
}

/* Enhanced behaviour when JavaScript is active */
@media (scripting: enabled) {
    .no-js-warning {
        display: none;
    }

    .js-carousel-buttons {
        display: flex;
        gap: 0.5rem;
    }
}

Enabling Safari Web Inspector and Developer Menus

To inspect and audit scripting media queries in Safari, ensure developer capabilities are enabled on macOS:

• Launch Safari on macOS.
• Navigate to Safari > Settings > Advanced.
• Select the checkbox labelled Show features for web developers.
• The Develop menu will now appear in the macOS menu bar.

Disabling JavaScript in Safari to Trigger scripting: none

To test how Safari natively resolves the (scripting: none) media condition, disable JavaScript execution using the Develop menu:

• In Safari, click Develop in the top menu bar.
• Click Disable JavaScript.
• Reload the target webpage (Command + R).

With JavaScript disabled, WebKit recalculates style rules immediately, triggering any blocks defined inside @media (scripting: none) and hiding components styled for @media (scripting: enabled).

Auditing Computed CSS Rules in Web Inspector

With JavaScript toggled off, inspect the CSS cascade to confirm fallback application:

• Right-click the component under test and choose Inspect Element to open Web Inspector.
• Navigate to the Elements tab and select the target node.
• In the Styles panel on the right sidebar, observe the active CSS rules.
• The inspector highlights rules wrapped inside @media (scripting: none) as active, while rules under @media (scripting: enabled) appear greyed out or struck through.
• Inspect the Computed panel to verify that critical properties—such as display: none on interactive buttons—match expectations.

Evaluating Scripting Media State via JavaScript Console

When JavaScript is re-enabled, verify how the DOM evaluates media query matches using the Web Inspector Console:

// Test active scripting media feature evaluation
const isScriptingEnabled = window.matchMedia('(scripting: enabled)').matches;
const isScriptingNone = window.matchMedia('(scripting: none)').matches;

console.log('Scripting Enabled:', isScriptingEnabled); // Outputs true
console.log('Scripting None:', isScriptingNone);       // Outputs false

To verify responsive style recalculations, listen to the MediaQueryList event listener:

const scriptWatcher = window.matchMedia('(scripting: enabled)');
scriptWatcher.addEventListener('change', (e) => {
    console.log('Scripting availability changed. Enabled state:', e.matches);
});

Best Practices for Scripting Fallbacks

When architecting progressive web applications for WebKit and Safari:

• Avoid JavaScript-Dependent Layouts: Ensure essential text, forms, and navigation anchors render legibly without client-side script hydration.
• Combine with Form Actions: Pair JavaScript-driven AJAX form submission buttons with standard HTML <form action="..." method="POST"> attributes so submissions succeed under (scripting: none).
• Validate Print Views: Safari frequently evaluates initial-only during print rendering passes; ensure print styles gracefully accommodate non-interactive states.

Mastering the CSS scripting media query in Safari Web Inspector ensures web applications remain robust, accessible, and elegant regardless of client execution constraints.