Literacy post: What are the most unpopular features of CSS in 2021?

One of the major events in the CSS industry in recent years is the "State Of CSS" at the end of each year, that is, the CSS status survey. At the end of last year, "State Of CSS 2021" . The chapter on features will list some relatively new CSS features in the current year's usage overview :

Each picture represents a feature. The above picture is divided according to the number of used . The outer circle indicates that heard of , while the inner circle indicates that used . The last few lines can basically be understood as, heard of There are very few people, and even people have used it.

This article will introduce several unpopular new features about color .

color-gamut color gamut

color-gamut is the most unpopular feature in 2021. Where is it sacred?

The literal translation of color-gamut is the color gamut. It belongs to one of the media queries and has 3 values:

color-gamut: srgb;
color-gamut: p3;
color-gamut: rec2020;

It is used as follows:

@media (color-gamut: srgb) {
  p {
    background: #f4ae8a;
  }
}

If this media query is hit, the result is as follows:

OK, so what's the use of this media query? What is the color gamut?

What is the color gamut?

color gamut describes a range of colors within the color spectrum (visible spectrum) recognizable to the human eye. The techniques for reproducing color in modern products vary by device, and digital cameras, scanners, monitors, printers, tablets, projectors, etc. can all reproduce a different range of colors. To standardize this color difference, various methods of measuring color range have been used to create a communicable color range in order to understand the capabilities of each device.

To understand the color gamut, you need to understand the color standard. After searching a lot of literature, I found that this thing is too complicated and difficult to understand. It is only briefly explained here.

In 1931, the CIE (International Commission on Illumination) established a standard observer, which recommended the use of the color coordinate xyz (CIEXYZ).

These coordinates are used to form the current standard chart, which uses mathematical theory to set the range or color of human sight. This chromaticity diagram is designed so that the Y parameter is a measure of the lightness of the color, and the chromaticity of the color is identified by the x and y parameters (Yxy).

The three possible values color-gamut , p3 and rec2020 of 06216edbb3f1d9 can be understood as three different color gamuts.

• srgb : sRGB is the most standard color gamut used in digital products, Windows environments and monitors. The advantage of this color gamut is that it reduces the color difference between input and output based on a narrow range. These limitations allow for rapid reproduction of color, which is why it is used today as a standard for digital products, displays, and the Internet.
• P3 : The DCI-P3 color space is an RGB color space introduced by SMPTE (Society of Motion Picture and Television Engineers). The color space has a 26% wider color gamut than sRGB and is commonly used in digital cinema. All digital cinema projectors are fully capable of displaying the DCI-P3 color space. Combining DCI-P3 with a 4K monitor provides media professionals with the ultimate in color accuracy and accuracy. P3 gamut is larger than and includes the srgb gamut .
• rec2020 : A newer and larger color gamut, the rec2020 color gamut is larger than and includes the p3 color gamut .

There are more different color gamuts in the picture below. Using this picture, you can roughly make up what the color gamut is:

Why are so many gamuts needed and where do they differ?

Each color standard is created to meet specific needs and to advance technology to cover a wider range of colors. On the one hand, color standards allow professionals to bring their ideas to life, and on the other, the public can enjoy top-quality color and visual entertainment.

Simply put, the color gamut of a standard monitor is suitable for everyday use, but not sufficient to reproduce professional-quality images.

Higher color gamut means more realistic color rendering and subtler gradients. This results in a more striking and realistic reproduction of tones and smoother gray levels.

Practical scenarios for color-gamut?

Well, that's probably why it's so unpopular, it's actually ok:

In addition to the scenes where the color requirements are abnormal to the extreme, this media query function is really tasteless. In the domestic environment, I feel that there is no soil for application at all. Everyone can understand.

color-contrast() color contrast selection

color-contrast() is the third-to-last, but a very useful color function. The reason it is so unpopular is that it is not currently supported by any browsers:

Of course, this does not prevent us from understanding in advance.

color-contrast() is proposed in the specification CSS Color Module Level 5 .

Its syntax is rather strange:

color-contrast( <color> vs <color>#{2,} [ to [<number> | AA | AA-large | AAA | AAA-large]]? )

in:

• The first part <color> can be any color value, must be
• The second part <color>#{2,} is a comma-separated list of color values to compare with the first value, must have the value

• The third part is [ to [<number> | AA | AA-large | AAA | AAA-large]]? ) , you can specify a value later, or WCAG specification strength, optional value

  • AA means the value 4.5
  • AA-large means the value 3
  • AAA for the value 7
  • AAA-large means the value 4.5

The actual use is as follows:

{
    color: color-contrast(#ffcc00 vs #bbccdd, #0c0c0c, #d2691e);
    // 或者
    color: color-contrast(#ffcc00 vs #bbccdd, #0c0c0c, #d2691e to 4.5);
    // 或者
    color: color-contrast(#ffcc00 vs #bbccdd, #0c0c0c, #d2691e to AA);
}

Understanding color-contrast() based on accessibility

To understand the specific role of this property, some prerequisite knowledge is required.

First, you need to know what color contrast is. This is also mentioned in my article -- Incomplete Guide to Front-End Best Practices

what is color contrast

Have you ever cared about the display of page content and whether the colors used are appropriate? Can color-weak and color-blind users see the content normally? Good color use is beneficial at all times, and not just for color-weak, color-blind users. When using a mobile phone outdoors and the sunlight is strong, it is difficult to see, and high-definition, high-contrast text that meets accessibility standards is easier to read.

There is a concept here - color contrast , simply put, the description is the difference in brightness between two colors. Applied to our pages, most cases are the contrast difference between the background color (background-color) and the content color (color).

Borrow a picture -- -- 15 UI design tools to help you easily do a barrier-free Recommend :

Obviously, in the last example above, the text is already very unclear, and it is difficult for normal users to see it clearly.

What is the WCAG specification

Another prerequisite is to understand the WCAG specification.

In accessibility (also called accessibility design, Accessbility, A11y), there is the most authoritative Internet accessibility specification - WCAG , which formulates all aspects of Internet accessibility.

Among them, the AA level specification stipulates that the color contrast ratio of all important content needs to reach 4.5:1 or above (3:1 or above when the font size is larger than 18 points), in order to have good readability.

Under the AAA level standard, the color contrast ratio of all important content needs to reach 7:1 or above (4.5:1 or above when the font size is larger than 18 points), in order to have good readability.

This is also the origin of the above AA , AA-large , AAA , AAA-large keywords.

Use color-contrast()

After understanding the above prerequisite knowledge, it is easy to understand the role of color-contrast() .

for example:

{
    background-color: #fff;
    color: color-contrast(#fff vs #000, #666, #ddd);
}

Here, the background color is white #fff , and the text color needs to be set. Through color-contrast(#fff vs #000, #666, #ddd) , compare #fff with #000, #666, and #ddd in turn. The contrast between these three colors and white is 21, 5.74, 1.35, and 21 has the largest contrast. , the display is the clearest, so the final color is #000 .

The schematic diagram is as follows:

If applying the keyword on to :

{
    background-color: #fff;
    color: color-contrast(#fff vs #000, #666, #ddd to 4.5);
}

Then you don't need the maximum color value of contrast, just select the first value whose contrast exceeds 4.5. Here, the final calculated value of color is #666, because 5.74 is greater than 4.5.

in conclusion

The emergence of color-contrast() well reflects a general direction of CSS development today, paying more attention to user experience and the barrier-free design of the Internet, which is also relatively easy to ignore in domestic FE at present.

Accessibility, in our website, is a very important part, but most of the front-end (in fact, it should be design, front-end, product) students will ignore it.

In fact, it is not only the disabled who need barrier-free design. We also encounter barrier-free scenarios in many cases:

Remember, accessible design is kinder to everyone. Focus on accessibility and start thinking about accessible design.

finally

This article introduces two of the most unpopular features in the current situation of CSS usage in 2021. The former is not easy to evaluate, but the latter will still have a certain role in the future. Even if it is not used, it is not a loss to understand it~

Well, this is the end of this article, I hope this article will help you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdote 😄

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.