CSS @media color Property

Posted in CSS Tutorial

Updated on Sep 14, 2024

By Mari Selvan

👁️ 5 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The @media color property in CSS is used within a media query to target devices based on their ability to display color. It allows you to apply different styles depending on whether the device supports color, grayscale, or monochrome displays. This is particularly useful when designing for a wide variety of devices, from high-definition screens to e-readers.

💡 Syntax

The @media color property is used within a media query to detect if the device is capable of displaying colors. Here’s the basic syntax:

Syntax

Copied

@media (color) {
  /* Styles for color-capable devices */
}

@media not (color) {
  /* Styles for devices without color support */
}

🏠 Property Values

(color): Applies styles to devices that can display color.
not (color): Applies styles to devices that cannot display color, such as monochrome or grayscale displays.

🎛️ Default Value

There is no default value for the @media color property. It is a media feature used to query device capabilities, and by default, styles apply without media queries unless specified.

📝 Example Usage

📜 Basic Usage

This example will apply a different background color based on whether the device supports color or not.

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 color Example</title>
  <style>
    @media (color) {
      body {
        background-color: lightblue;
      }
    }
    
    @media not (color) {
      body {
        background-color: lightgray;
      }
    }
  </style>
</head>
<body>
  <h1>CSS @media color Example</h1>
  <p>The background changes based on the device's color capability.</p>
</body>
</html>

🖥️ Browser Compatibility

The @media color property is widely supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. As with any media query, it is always a good idea to test the behavior across different devices and browsers to ensure that the styles are applied as expected.

🎉 Conclusion

The @media color property is a great tool when creating responsive designs that need to account for devices with different display capabilities. By using this media feature, you can fine-tune your CSS to optimize the experience on both color and monochrome devices. Incorporating @media color into your designs ensures greater accessibility and flexibility across a wide range of devices.