CSS @media monochrome Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 9 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media rule in CSS allows developers to apply specific styles depending on the characteristics of the device displaying the content. One of the less commonly used media features is the monochrome property, which is used to target devices that can only display in monochrome (black and white) or have limited color depth. This property helps customize styles for such environments to enhance readability and usability.

💡 Syntax

The @media monochrome rule can be used to apply styles based on whether a device is capable of monochrome display. The property accepts values that determine how many bits a device uses for each pixel in the monochrome output.

Syntax

Copied

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

value: An integer value indicating how many bits per pixel are used. A value of 0 means the device is not monochrome, while any positive integer represents the number of bits used in the monochrome display.

🏠 Property Values

0: The device is not monochrome and can display full color.
positive integer (e.g., 1, 2, 3, etc.): Indicates the number of bits per pixel used by the device for monochrome display.

🎛️ Default Value

The default value is 0, which assumes the device is capable of full-color display.

📝 Example Usage

📜 Basic Usage

In this example, we apply different styles for devices that display only in monochrome. Text color is adjusted to ensure proper contrast in a black-and-white display.

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 Monochrome Example</title>
  <style>
    body {
      background-color: white;
      color: black;
    }

    /* Apply styles for monochrome displays */
    @media (monochrome) {
      body {
        background-color: black;
        color: white;
      }
    }
  </style>
</head>
<body>
  <h1>Hello, Monochrome World!</h1>
  <p>This content is styled differently for monochrome displays.</p>
</body>
</html>

In the above example, when viewed on a monochrome display, the background changes to black, and the text color changes to white for better contrast.

🖥️ Browser Compatibility

The @media monochrome property is supported by most modern browsers. While monochrome devices are rare, it's essential to test for compatibility across different environments to ensure proper rendering.

🎉 Conclusion

The @media monochrome property allows developers to target monochrome displays and optimize styles for them. While it may not be commonly used due to the prevalence of full-color displays, it is still valuable for providing an enhanced user experience on devices with limited color capabilities. Experimenting with this property ensures that your website is accessible across a wide range of devices.

xxxx