Coming soon: CSS Feature Queries (CSS feature query)_html/css_WEB-ITnose

Feature Queries is part of the CSS3 Conditional Rules specification. It supports "@supports" rules. "@supports" rules can be used to test whether the browser supports CSS properties and value pair. CSS itself has a downgrade mechanism, such as ignoring unsupported attributes or values, but it is also very serious when very important attributes are directly ignored. At this time, you can use Feature Queries to test whether all CSS rules are supported, and you can also optimize your page. . Queries already have many stable implementations in various browsers, such as Chrome, Firefox and Opera. Browser support is still being enhanced, so it's important to take a look at Feature Queries and decide whether it's appropriate for your current project.

Feature Queries in CSS

Feature Queries are somewhat similar to Media Queries. To give a simple example, you can ask the browser to run a CSS margin attribute.

@supports (margin: 0) { /*CSS to apply*/ }

If you don’t quite understand, let’s give a real-life example. If you want to use backgrund-blend-mode to color the background image, you can add it to the original gray Add a color to the picture.

Online debugging unique address: http://www.gbtags.com/gb/debug/76f8c728-796d-48c7-a82f-f8400e8ba2a0.htm

    body {    background-blend-mode: multiply;    background: linear-gradient(rgb(59, 89, 106)    , rgb(63, 154, 130))    , url(background.png);    }

Isn’t this a cool feature? However, browser support for it is still being improved. background-blend-mode can now be used in many browsers, but some still cannot display the desired effect. In order to accomplish this function in browsers that cannot display the effect, we can use a method similar to translucent color overlay.

    body {    background: #3F9A82;    background: linear-gradient(rgba(59, 89, 106, 0.8)    , rgba(63, 154, 130, 0.8))    , url(background.png);    }

In the above code, if the browser does not support semi-transparent color layers, only one background can be displayed. If we use Feature Query, we can change the background according to the situation. Feature Query here is more like Media Query. It can be used by using @supports and adding CSS declarations within brackets.

    @supports (background-blend-mode: multiply) {    body {    background-blend-mode: multiply;    background: linear-gradient(rgb(59, 89, 106)    , rgb(63, 154, 130))    , url(background.png);    }    }

Feature Queries in JavaScript

Feature Queries also supports JavaScript interface: CSS.supports. We also use the above example to illustrate. If the browser supports background-blend-mode: multiply, we can add blend-mode in the body tag.

Online debugging unique address: http://www.gbtags.com/gb/debug/beef5e87-2159-45e9-872a-c85b51046e29.htm

    window.onload = function() {    if (CSS.supports('(background-blend-mode: multiply)'))    document.body.classList.add('blend-mode');    }

    body.blend-mode {    background-blend-mode: multiply;    background: linear-gradient(rgb(59, 89, 106)    , rgb(63, 154, 130))    , url(background.png);    }

Like the above demonstration, you can use logical operators (and, or and not) to combine tests . For example, if you want the browser to support both background-blend-mode and background attribute values, you can edit the following content:

    @supports (background-blend-mode: multiply)    and (background: linear-gradient(...), url(...))

or write:

    CSS.supports('(background-blend-mode: multiply) \    and (background: linear-gradient(...), url(...))');

I believe that Feature Queries will soon become widely popular among developers. What you need to consider is when to use it, and when testing, you need to make sure that they can be used at the same time. Available in one browser. Although Feature Query won't improve performance much, they can make your code more controllable. Why not give these new features a try and let us know what you think.

Geek tag - professional and accurate sharing, follow the geeks you are interested in, the community provides excellent quality tutorials, interactive teaching

To learn about front-end technology, please visit Geek Interactive Courses Library and code recording

Read the original text: Coming soon: CSS Feature Queries