Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the color-adjust attribute of CSS". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "what is the color-adjust attribute of CSS" can help you solve the problem.

1. Brief description of color-adjust attributes

Color-adjust was originally a non-standard attribute, but recently added CSColorModuleLevel 4 working draft, it is a name, worth introducing.

Color-adjust The CSS property's role is expressed in one sentence: whether to allow the browser to adjust its own colors for a better reading experience.

syntax

color-adjust:economy;

color-adjust:exact;

Of which:

economy

Default value. economy economy This means that the browser (or other client) makes style adjustments to the elements, and the adjustment rules are determined by the browser itself to avoid better output. For example, when printing, the browser will choose to omit all background images and adjust the text color to ensure that contrast is optimal for reading on white paper.

At present, in 2018, modern devices other than printers, displays are very strong, it seems that there is no such "save background color","save color value" scene; but this is not the case, for example, macOS has a cool night vision mode, this is a scene that needs to increase contrast, should give the device the ability to freely adjust the style performance. There will be other devices with other reading scenarios in the future, and from a future-oriented perspective, the color-adjust attribute has its value.

exact

Exact means precise. It means telling the browser that the colors and backgrounds I set are necessary and exactly matched, and you don't want to be smart enough to help me make adjustments.

For example, for ease of reading, we will add gray stripes to the form, but if we print the page at this time, the gray background will be removed, which will affect the reading experience. In this case, we can set the gray stripes to be "accurate", so that the gray stripes can print properly.

compatibility

Screenshot below:

2018-11-27_001109.png

Chrome and Firefox both support it, Chrome requires the-webkit-private prefix. However, according to my tests, what Chrome does not support is actually the-webkit-print-color-adjust attribute, which can be regarded as the predecessor of color-adjust before it had a name.

-webkit-print-color-adjust and color-adjust properties have the same value and function.

A case of color-adjustment

You can click here hard: background color still shows contrast demo when printing

Ctrl+P or select the "Print" menu in your browser. At this point, you can see the difference:

2018-11-27_003412.png

The reason why the following table will be striped when printing preview is because the following CSS is set:

table{

-webkit-print-color-adjust:exact;

color-adjust:exact;

}

Firefox has a similar behavior:

2018-11-27_003904.png

Three, five minutes.

Finally, a brief evaluation of the color-adjust attribute.

Unrefined, non-facade related CSS. Not learning and not caring has little effect on our daily work. It is estimated that even if you work for another 10 years in the future, it will be difficult to encounter scenes that require the use of color-adjust attributes.

Just like those unpopular movies, although they have their artistic department and value, but for us, it is not a necessary thing.

Fortunately, it only took five minutes. In addition, the knowledge points themselves are useful. It is not guaranteed that you will deal with some special equipment and special scenes in the future. At this time, color-adjust is also a lifesaving attribute. Therefore, in fact, learning cost-effective is still very good, understand it on learning it.

About "CSS color-adjust property is what" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.