CSS color-adjust Property
CSS color-adjust property is used to adjust the element's appearance on the output device. By default, the browser is allowed for making any adjustments to the appearance of the element it identifies to be necessary as well as prudent if the type and capabilities of the output device are given.
Syntax for color-adjust Property
Following is the syntax for the color-adjust property.
color-adjust: economy | exact
Example: CSS color-adjust Property
Here in the example below, we are using the color-adjust property with different border colors, border styles, and their different values, which generates a contrast. In this case, we have given the color-adjust of the object as the exact value of this property. See the example below.
<!DOCTYPE html>
<html>
<head>
<title>The color-adjust proeprty in CSS</title>
<style type="text/css">
.my-box {
background-color: black;
background-image: linear-gradient(rgba(1.5, 1.5, 290, 1.5), rgba(100, 250, 350, 1.5));
color: #266;
width: 15rem;
height: 6rem;
text-align: center;
font: 24px "Helvetica", sans-serif;
display: flex;
align-items: center;
justify-content: center;
color-adjust: exact;
}
</style>
</head>
<body>
<div class="my-box">
<p>Study Tonight !</p>
</div>
</body>
</html>
Output:
Example 2: CSS color-adjust Property
Here in the example below, we are using the color-adjust property with different border colors, border styles, and their different values, which generates a contrast. In this case, we have given the color-adjust of the object as the 'economy' value of this property. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>The color-adjust proeprty in CSS</title>
<style type="text/css">
.my-box {
background-color: black;
background-image: linear-gradient(pink, rgba(100, 250, 350, 1.5));
color: #266;
width: 15rem;
height: 6rem;
text-align: center;
font: 24px "Helvetica", sans-serif;
display: flex;
align-items: center;
justify-content: center;
color-adjust: economy;
}
</style>
</head>
<body>
<div class="my-box">
<p>Study Tonight !</p>
</div>
</body>
</html>
Output:
Live example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
49 |
49 |
| Edge |
79 |
79 |
| Firefox |
48 |
48 |
| Internet Explorer |
no |
no |
| Opera |
15 |
15 |
| Safari |
6 |
6 |
| Webview Android |
49 |
49 |
| Chrome Android |
49 |
49 |
| Firefox Android |
48 |
48 |
| Opera Android |
36 |
36 |
| IOS Safari |
6 |
6 |
| Samsung Internet |
5.0 |
5.0 |
Conclusion
The initial value for the color-adjust property in CSS is economy. This property is applicable to all elements. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
