One Of the biggest events in the CSS world in recent years has been the annual State Of CSS, the current State Of CSS survey, which was released at the end Of last year with State Of CSS 2021. The chapter on features provides an overview of some of the newer CSS features in use that year:

Each graph represents a feature. The graph above is divided by the number of uses, with the outer circle indicating that people have heard of it and the inner circle indicating that they have used it. The last few lines basically mean that few people have heard of it and even fewer have used it.

Here are a few cool new features about color.

Color gamut color gamut

The Color-Gamut is the coolest feature of 2021. What is it?

Color-gamut literally means gamut. It belongs to one of the media queries and has three values:

color-gamut: srgb;
color-gamut: p3;
color-gamut: rec2020;
Copy the code

The usage is as follows:

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

If the media query is matched, the result is as follows:

OK, so what is the use of this media query? What is a gamut?

What is the gamut?

The gamut describes a range of colors within the spectrum (visible chromatography) that the human eye can recognize. Modern product color reproduction techniques vary from device to device. Digital cameras, scanners, monitors, printers, tablets, projectors, and others can reproduce different ranges of colors. To standardize this chromatic aberration, various methods of measuring color ranges have been used to create communicative color ranges in order to understand the function of each device.

To understand the gamut of color, we need to understand the color standard. After searching many literatures, we found that this thing is too complicated and difficult to understand. Here is a brief explanation.

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

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

The three values of color-gamut SRGB, P3 and REC2020 can be understood as three different color gamut.

  • srgbSRGB is the most standard gamut used in digital products, Windows environments and displays. The advantage of this 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: DCI-P3 Color space is an RGB color space introduced by SMPTE (Society of Motion Picture and Television Engineers). Color space has a gamut 26% wider than sRGB and is commonly used for digital movies. All digital movie projectors are fully capable of displaying DCI-P3 color space. Combining DCI-P3 with 4K displays provides media professionals with extreme color precision and accuracy.The P3 gamut is greater than and contains the SRGB gamut.
  • rec2020: a much newer and larger gamut,Rec2020 gamut is greater than and contains P3 gamut.

There are more different gamut in the image below, which gives you a rough idea of what a gamut is:

Why do you need so many gamut and what’s different about them?

Each color standard was created to meet a specific need 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 hand, the public can enjoy first-rate quality color and visual entertainment.

Simply put, the gamut of standard monitors is good for everyday applications, but not enough to reproduce professional-quality images.

A higher gamut means more realistic color rendering and more subtle gradients. This results in a more striking and realistic reproduction of tones and smoother grayscale levels.

Color-gamut practical scenarios?

Well, that’s probably why it’s so unpopular, but it’s actually compatible:

In addition to the color requirements abnormal to the extreme scene, this media query function is really a chicken ribs, in the domestic environment I feel there is no application of soil. You can understand.

Color contrast() Select the color contrast

Color-contrast () is a very useful color function, though it’s third from the bottom, and it’s out of favor because it’s not supported by any browser yet:

Of course, we can find out in advance.

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

The syntax is strange:

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

Among them:

  • The first part<color>It can be any color value,Must value
  • The second part<color>#{2,}Is a comma-separated list of color values to compare with the first value,Must value
  • The third part[ to [<number> | AA | AA-large | AAA | AAA-large]]? ), you can specify a value later, or WCAG specification strength,An optional value
    • AA represents the value 4.5
    • AA- Large denotes the number 3
    • AAA stands for the number 7
    • AAA- Large represents the value 4.5

The actual usage is as follows:

{
    color: color-contrast(#ffcc00 vs #bbccdd.#0c0c0c.#d2691e); / / orcolor: color-contrast(#ffcc00 vs #bbccdd.#0c0c0c.#d2691e to 4.5); / / orcolor: color-contrast(#ffcc00 vs #bbccdd.#0c0c0c.#d2691e to AA);
}
Copy the code

Understanding color-contrast() based on accessibility

To understand exactly what this property does, you need some prior knowledge.

First, you need to know what color contrast is. I also mentioned this in this post – an incomplete guide to good practices on the front end

What is color contrast

Have you ever been concerned about the presentation of content and the use of appropriate colors? Can color-weak and color-blind users see the content properly? Good use of color is beneficial at all times, and not just for color-weak and color-blind users. If you use your cell phone outdoors and the sun is too bright to read, high-definition, high-contrast text that meets accessibility standards is easier to read.

What’s the difference between the two colors on the Brightness scale? When applied to our pages, most cases are the contrast difference between background-color and content color.

15 UI design Tools to help you easily do barrier-free:

Obviously, in the last example above, the text is so unclear that normal users can hardly see it.

What is the WCAG specification

Another pre-knowledge, understanding the WCAG specification.

In accessibility (also known as accessibility design, Accessbililty, A11y), there is the most authoritative Internet accessibility specification — WCAG, which formulated all aspects of Internet accessibility rules.

According to the AA level specification, all important content should have a color contrast ratio of 4.5:1 or above (3:1 or above if the font size is larger than 18) to be considered good readability.

For AAA, all important content needs to have a 7:1 or more color contrast (4.5:1 or more if the font size is larger than 18) to be readable.

This is where the above AA, AA-large, AAA, aaA-large keywords come from.

Use the color – contrast ()

With that in mind, it’s easy to understand what color-contrast() does.

Here’s an example:

{
    background-color: #fff;
    color: color-contrast(#fff vs # 000.# 666.#ddd);
}
Copy the code

Use color-contrast(# FFF vs #000, #666, # DDD) to compare # FFF with #000, #666, and # DDD. The contrast between these three colors and white is 21, 5.74 and 1.35, respectively. 21 has the highest contrast and the clearest display, so the final color is #000.

The schematic diagram is as follows:

If the to keyword is applied:

{
    background-color: #fff;
    color: color-contrast(#fff vs # 000.# 666.#ddd to 4.5);
}
Copy the code

Do not need the maximum contrast color value, just select the first value of contrast beyond 4.5, where the final color value is #666, because 5.74 is greater than 4.5.

To summarize

The emergence of color-contrast() is a good reflection of the general direction of the development of CSS. It pays more attention to user experience and barrier-free design of the Internet, which is also easily ignored by FE in China.

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

In fact, it is not only people with disabilities who need accessible design. In many cases, we also encounter accessible scenes:

Remember, accessible design is friendlier for all. Focus on accessibility and start thinking about accessibility design.

The last

This article introduces two of the most unpopular features in 2021 CSS usage. The former is hard to evaluate, but the latter will be useful in the future, even if it is not needed

Well, that’s the end of this article, I hope you found it helpful 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.