Tutorials

CSS @media light-level Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media light-level property in CSS is a media feature that allows developers to apply styles based on the ambient light level in the user's environment.

This can be useful when designing interfaces that adapt to different lighting conditions, ensuring the website remains legible and comfortable to use whether the user is in a bright, dim, or normal lighting environment.

💡 Syntax

The @media light-level property is used within a media query and accepts three possible values: normal, dim, and washed. This helps tailor the design based on the surrounding light level.

Syntax

Copied

@media (light-level: normal) {
  /* Styles for normal lighting */
}

@media (light-level: dim) {
  /* Styles for dim lighting */
}

@media (light-level: washed) {
  /* Styles for very bright lighting */
}

🏠 Property Values

normal: The default lighting condition, where there is neither too much nor too little light. This is the typical state for most users.
dim: A dimly lit environment, where the ambient light is low. You might want to increase the contrast of elements to improve readability.
washed: A very bright environment, such as direct sunlight, where the contrast may need to be reduced to prevent the design from becoming too harsh.

🎛️ Default Value

The default value of the light-level property is dependent on the environment and device capabilities. If the device does not support ambient light sensing, the query will fall back to the default or normal state.

📝 Example Usage

📜 Basic Usage

Here is an example where different background colors are applied based on the light level in the user's environment.

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 light-level Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    @media (light-level: normal) {
      body {
        background-color: white;
        color: black;
      }
    }

    @media (light-level: dim) {
      body {
        background-color: #333;
        color: white;
      }
    }

    @media (light-level: washed) {
      body {
        background-color: lightgray;
        color: black;
      }
    }
  </style>
</head>
<body>
  <h1>CSS @media light-level Example</h1>
  <p>The background color changes based on the light level in the environment.</p>
</body>
</html>

🖥️ Browser Compatibility

The @media light-level property is not widely supported across all browsers as of now. It's mostly experimental, so it's important to check the compatibility for your target audience and provide fallback designs for environments where this feature is not supported.

🎉 Conclusion

The @media light-level property is a powerful tool for creating responsive designs that adapt to different lighting environments. Though currently experimental, it opens up opportunities to improve accessibility and usability for users in varying ambient light conditions. Keep an eye on browser support as this feature evolves, and be sure to implement fallback styles for users on unsupported devices.