Tutorials

CSS @media scripting Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media scripting feature in CSS is used to apply styles based on the availability of scripting support (e.g., JavaScript) in the browser.

This can be useful for providing alternative styles for scenarios where scripting is disabled or unavailable, ensuring that your site remains accessible and functional.

💡 Syntax

The syntax for the @media scripting feature is similar to other media queries. You can define different styles depending on whether scripting is enabled or disabled.

Syntax

Copied

@media (scripting: value) {
  /* CSS rules */
}

Here, value can be one of the following:

none: No scripting available (JavaScript disabled).
initial-only: JavaScript is available only during page load but unavailable afterwards.
enabled: Scripting is fully enabled.

🏠 Property Values

none: Applies styles when JavaScript is disabled or not available.
initial-only: Applies styles when JavaScript is enabled initially but disabled later on (rare scenario).
enabled: Applies styles when JavaScript is enabled in the browser.

🎛️ Default Value

There is no specific "default value" for @media scripting, as it depends on the user's browser settings and whether JavaScript is enabled or disabled.

📝 Example Usage

📜 Basic Usage

In this example, we will display a message depending on whether JavaScript is enabled or disabled in the browser.

example.scss

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @media scripting Example</title>
  <style>
    /* If JavaScript is disabled */
    @media (scripting: none) {
      .no-js-message {
        display: block;
        color: red;
        font-size: 1.2em;
      }
    }

    /* If JavaScript is enabled */
    @media (scripting: enabled) {
      .js-message {
        display: block;
        color: green;
        font-size: 1.2em;
      }
    }

    .js-message, .no-js-message {
      display: none;
    }
  </style>
</head>
<body>
  <h1>CSS @media scripting Example</h1>
  <div class="no-js-message">JavaScript is disabled or not available in your browser.</div>
  <div class="js-message">JavaScript is enabled in your browser.</div>
</body>
</html>

🖥️ Browser Compatibility

The @media scripting property is supported in modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is a good idea to test your styles across different environments to ensure they work as expected, especially when JavaScript is disabled.

🎉 Conclusion

The @media scripting property provides a way to tailor the appearance of your website based on the availability of scripting in the user's browser. This ensures that your website remains functional and user-friendly, even when JavaScript is disabled. It’s a helpful tool for enhancing accessibility and providing a consistent user experience across various scenarios.