This section describes several new features of CSS media query:

  • prefers-reduced-motion
  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-transparency
  • prefers-reduced-data

Make good use of them to improve the robustness and accessibility of our website!

The development of the Internet to today, for our front end, our focus should not only be our output of the page can not be used, but also need to pay more attention to our page is not good, have taken care of more user groups?

As of December 2020, the number of Internet users in China reached 989 million (data source – the 47th Statistical Report on Internet Development in China). Not every user is using iPhone12 Pro Max, a high-end flagship, and more people may be using 100-yuan or thousandyuan phones. A PC from a decade ago. Not every user is physically or physically completely sound, there will be a variety of visual disorders, hearing disorders, movement disorders and other users.

Our pages need to be progressively enhanced, with all sorts of new, fancy features and all sorts of cool effects.

At the same time, we should also consider the user experience of some low-end models, consider the use of some disabled people, or respect the user’s personalized configuration. Based on this, the CSS specification proposes a number of useful attributes that can be adapted to a user’s personal configuration to improve the accessibility and robustness of a page.

The above mentioned five content, we introduce one by one.

CSS @ media specification

Ana-reduced-motion, ANa-color-scheme, ANa-contrast, ana-reduced-transparency, ana-reduced-data all belong to the CSS @media specification content, the latest CSS @media specification to the 5th edition – media Queries Level 5.

Their usage is generally the same, like this, as we often write about viewport media queries, using an PREFERen-motion example:

.ele {
    animation: aniName 5s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
    .ele {
        animation: none; }}Copy the code

So, what are they all for?

Ana-reduced-motion reduces the animation effect

Reduced-motion rule query is used to reduce the animation effect. In addition to the default rule, there is only one syntax for the value of the quietus-motion: Reduce, when this rule is enabled, tells the user agent that he wants the page he sees to remove or replace some types of animation that may make some people with visual motor disabilities uncomfortable.

Specification text: Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.

Vestibular motion disorders is a kind of visual movement disorder, which may cause vertigo. For example, an animation flickers several times in one second, causing discomfort.

Use the same code as above:

.ele {
    animation: aniName 5s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
    .ele {
        animation: none; }}Copy the code

If we had some animations like this:

The user should remove the ANa-reduced-motion: Reduce feature as soon as it is enabled. So how do you turn this on? The results of MDN — CANa-Motion are as follows:

  • In GTK/Gnome, gTK-enable-animations can be set to false through the Gnome Tweaks configuration (in the General or Appearance menu, depending on the version)
  • Gtk-enable-animations = false can be set under the [Settings] module in the GTK 3 configuration file
  • In Windows 10: Settings > Easy Get > Show > Show animation in Windows
  • In Windows 7: Control Panel > Easy Access >? It is easier for computers to view > turn off unnecessary animations
  • On MacOS: System Preference > Assist Use > Display > Reduce Motion
  • On iOS: Settings > General > AIDS > Reduce Motion
  • On Android 9+ : Settings > AIDS > Remove Animation

Preference-color-scheme adaptation of light and shade themes

The asp-color-scheme is fairly easy to understand and is used to match the bright or night (dark) mode set by the user through the operating system. It has two different values:

  • prefers-color-scheme: light: Bright mode
  • prefers-color-scheme: darkNight (dark) mode

The syntax is as follows. If we default to bright mode, we just need to adapt to night mode:

body {
    background: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    body {
        background: black;
        color: white; }}Copy the code

Of course, the above is just the CSS code schematic, to do two sets of theme switching is certainly not so simple, there are many methods, this article does not repeat, readers can understand the various implementation of theme switching, or is the scheme of light and shade switch.

Adjust content color contrast

The CSS media feature is designed to detect whether users want web content to be presented with higher or lower contrast. Among them:

  • prefers-contrast: no-preference: Default value, no change
  • prefers-contrast: less: Want to use a lower contrast interface
  • prefers-contrast: more: Wanted a higher contrast interface

Preference-contrast: less

body {
    background: #fff; // Text and background contrast is5.74
    color: # 666; } // Improve contrast@media (prefers-contrast: more) {
    body {
        background: #fff; // Text and background contrast is21
        color: # 000; }}Copy the code

The above is just pseudo-CSS code, which may need to be processed for specific elements, or use filter: contrast() globally, which, when configured, does something like this:

So why adjust the contrast of the page? In order to make the experience better for visually impaired users, here is some information about contrast accessibility. The content is taken from my article, an incomplete guide to Good Front-end practices

Accessibility – Color contrast

Color is also an attribute that we need to deal with every day. For most visually normal users, color sensitivity may not be that high. However, for a small number of color weak, color blind users, they will be more sensitive to the color of the website, bad design will bring great inconvenience to them to visit the website.

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.

WCAG AA, the most authoritative web accessibility specification, states that all important content needs to have a color contrast ratio of 4.5:1 or more (3:1 or more for font size 18 or larger) to be readable.

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.

Tool for checking color contrast

Chrome has long supported checking the color contrast of elements. Using the example of the page I am currently writing on, the Github Issues edit page has two buttons:

Review the elements to see the color contrast of the two buttons:

As you can see, the color contrast of the white button on a green background is not up to standard and is marked by a yellow exclamation mark.

In addition, in the Style interface of the review element color picker, change the color, can also intuitively see the current color contrast:

Preference-reduced-transparency reduces transparency

The CSS media feature is used to detect whether users want to reduce the transparency of web pages:

  • prefers-contrast: no-preference: Default value, no change
  • prefers-contrast: reduce: You want interface elements to have as few transparent elements as possible

Take PREFERn-contrast: reduce as an example. The syntax is as follows:

.ele {
    opacity: 0.5; } // Reduce the transparency element@media (prefers-contrast: reduce) {
    .ele {
        opacity: 1; }}Copy the code

However, this is still a lab feature and no browser currently supports this media query ~ 😢

Preference-reduced-data reduces data transmission

For some areas with poor Internet speeds or where traffic is expensive, users may want to reduce traffic requests on the page, which is why the user-reduced data is used.

The CSS media query function is used to tell the user agent that it wants to reduce traffic requests to the page.

  • prefers-reduced-data: no-preference: Default value, no change
  • prefers-reduced-data: reduce: Want interface elements to consume less Internet traffic

Take THE PREFERence-reduced-data: reduce as an example. The syntax is as follows:

.ele {
    background-image: url(image-1800w.jpg); } // Reduce image quality@media (prefers-reduced-data: reduce) {
    .ele {
        background-image: url(image-600w.jpg); }}Copy the code

When it is detected that users have an ASIS-reduced-data: reduce feature, we will provide images with higher compression, smaller size and less traffic consumption.

Of course, the above code is just a hint, but there is much more we can do.

However, this is still a lab feature and no browser currently supports this media query ~ 😢

Of course, starting with Chrome 85+, you can enable this feature by turning on the #enable-experimental-web-platform-features lab option!

The last

It is not easy to improve the accessibility and user experience of the website. We also need to improve our relevant knowledge and skills simultaneously while the specification continues to optimize and improve. As the user base expands there are bound to be users with all kinds of needs that are not as important now and accessibility is bound to become more important in the future.

Well, the end of this article, I hope to help you 🙂

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.