Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of the new features in CSS media query, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this CSS media query. Let's take a look at it.

CSS @ media specification

Prefers-reduced-motion, prefers-color-scheme, prefers-contrast, prefers-reduced-transparency, and prefers-reduced-data are all part of the CSS @ media specification, and the latest CSS @ media specification is in the fifth edition-Media Queries Level 5.

Their usage is basically the same, like this, similar to the viewport media queries we often write, taking prefers-reduced-motion as an example:

.ele {animation: aniName 5s infinite linear;} @ media (prefers-reduced-motion: reduce) {.ele {animation: none;}

So, what's the use of them?

Prefers-reduced-motion weakens animation effect

Prefers-reduced-motion rule query is used to weaken the animation effect. Apart from the default rule, there is only one syntax value prefers-reduced-motion: reduce. When this rule is enabled, it is tantamount to telling the user agent that the page he wants to see can delete or replace some types of animation that will make some visually impaired people uncomfortable.

Standard original 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 patient with visual dyskinesia. I can only translate Chinese into Google, which translates to vestibular dyskinesia. I don't feel right. Google is a disease that can cause vertigo. For example, an animation blinks many times a second will cause discomfort to the patient.

Use the method, or the above code:

.ele {animation: aniName 5s infinite linear;} @ media (prefers-reduced-motion: reduce) {.ele {animation: none;}}

If we have some animations like this:

When the user turns on prefers-reduced-motion: reduce, it should be removed. So how do I turn on this option? what MDN-prefers-reduced-motion gives is:

In GTK/Gnome, you can set the value of gtk-enable-animations to false through the configuration of GNOME Tweaks (in the General or appearance menu, depending on the version).

You can set gtk-enable-animations = false under the [Settings] module in the configuration file of GTK 3

In Windows 10: setup > easy to get > Show > Show Animation in Windows

In Windows 7: control Panel > easy access > computer easier to View > turn off unnecessary Animation

In MacOS: system preference > Auxiliary use > display > reduce Motion

On iOS: setting > General > Auxiliary > reducing exercise

On Android 9 +: setup > accessibility > remove Animation

Prefers-color-scheme adapts to light and shade theme

Prefers-color-scheme is also very 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: dark:

Night (dark) mode

The syntax is as follows: if we default to bright mode, we only need to adapt the night mode:

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

Of course, the above is only a hint of CSS code, to achieve the switch between the two sets of topics is certainly not so simple, there are many ways, this article will not repeat, readers can learn about a variety of theme switching, or light and dark switching solutions.

Prefers-contrast adjusts content color contrast

Prefers-contrast the CSS media function is used to detect whether users require web content to be rendered with higher or lower contrast. Where:

Prefers-contrast: no-preference: default value, no change

Prefers-contrast: less: want to use a lower-contrast interface

Prefers-contrast: more: want to use a more contrast interface

Take prefers-contrast: less as an example, the syntax is as follows:

Body {background: # fff; / / text and background contrast 5.74 color: # 666;} / increase contrast @ media (prefers-contrast: more) {body {background: # fff; / / text and background contrast 21 color: # 000;}}

The above is only pseudo CSS code. You may need to deal with some specific elements, or use filter: contrast () global unified processing, which is used to implement functions like this when configuration is enabled:

So why do you need to adjust the contrast of the page? The purpose of this move is to give some visually impaired users a better experience, and here we add some knowledge about contrast accessibility. This article whose content is taken from me-- an incomplete guide to the excellent practice of the front end

Accessibility-color contrast

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

What is color contrast?

Have you ever been concerned about the display of the content of the page and whether the color used is appropriate? Can color-weak and color-blind users see the content clearly? Good color use is beneficial at all times, and is not limited to weak and color-blind users. When using a mobile phone outdoors, the sun is very strong and can not be seen clearly, so it is easier to read high-definition and high-contrast text that meets the barrier-free standards.

Here is a concept-color contrast. To put it simply, the description is the difference between the two colors in Brightness. When applied to our pages, most cases are the contrast difference between the background color (background-color) and the content color (color).

The most authoritative Internet accessibility standard, the WCAG AA specification, stipulates that all important content must have a color contrast of 4.5 or more (3:1 or more when the font size is greater than 18) in order to have good readability.

A tool for checking color contrast

Chrome browsers have supported checking the color contrast of elements since a long time ago.

Prefers-reduced-transparency reduces transparent elements

Prefers-reduced-transparency the CSS media function is used to detect whether users request to reduce the transparent elements in the web page:

Prefers-contrast: no-preference: default value, no change

Prefers-contrast: reduce: you want the interface elements to have as few transparent elements as possible

Take prefers-contrast: reduce as an example, the syntax is as follows:

.ele {opacity: 0.5;} / reduce transparent element @ media (prefers-contrast: reduce) {.ele {opacity: 1;}} prefers-reduced-data reduces data transmission

For some areas where the network speed is poor, or when the traffic is very expensive, users will want to reduce the traffic requests on the page, based on which there is prefers-reduced-data.

Prefers-reduced-data the CSS media query function is used to inform the user agent that you want to reduce the traffic requests on the page.

Prefers-reduced-data: no-preference: default value, no change

Prefers-reduced-data: reduce: want interface elements to consume less Internet traffic

Take prefers-reduced-data: reduce as an example, the syntax is as follows:

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

When it is detected that the user has enabled prefers-reduced-data: reduce, we will provide images with higher compression, smaller size and less traffic consumption.

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

However, this is still in the laboratory function, there is no browser to support this media query ~?

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

This is the end of the article on "what are the new features in CSS media query?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the new features in CSS media query". If you want to learn more, you are welcome to follow the industry information channel.

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.