Coming soon: CSS Feature Queries (CSS Feature query)

Coming soon: CSS Feature Queries (CSS Feature query)

Feature Queries is part of CSS3 Conditional Rules specification. It supports the @ supports rule. The @ supports rule can be used to test whether the browser supports CSS attributes and value pairs. CSS has a degradation mechanism, such as ignoring unsupported attributes or values. However, it is very serious to ignore important attributes directly, in this case, you can use Feature Queries to test whether all CSS rules are supported and optimize your pages. Queries has many stable implementations in various browsers, such as Chrome, Firefox, and Opera. Browser support is still being enhanced. You Need To Know Featue Queries and decide whether to fit it in the current project.

Feature Queries in CSS

Feature Queries is a bit like Media Queries. For 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 it, let's take a real example. If you want to use backgrund-blend-mode to color the background image, you can add a color in the original grayscale image.

Unique address for online debugging: 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);    }

This feature is cool, isn't it? However, the browser's support for it is still being improved. Currently, background-blend-mode can be used in many browsers, but there are still some that cannot display the desired effect. To achieve this function in browsers that cannot display results, we can use a method similar to translucent color superposition.

    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 is displayed. If we use Feature Query, we can change the background as needed. Feature Query is more like Media Query. You can use @ supports and add the CSS declaration in 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: CSS. supports. We also illustrate the above examples. If the browser supports background-blend-mode: multiply, we can add blend-mode to the body label.

Unique address for online debugging: 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);    }

As demonstrated above, you can use the logical operators (and, or, or, and not) to merge and test. For example, if you want the browser to support both the 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 it:

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

I believe Feature Queries will soon become popular among developers. You need to consider when to use it. during testing, you need to make sure they can be applied in the same browser. Although Feature Query does not significantly improve the performance, it can make your code more controllable. Try these new features first, and then let us know how it feels.

Geeks tags-professional and accurate sharing, follow the geeks you are interested in, the Community provides excellent tutorials, Interactive Teaching

For more information about front-end technologies, visit the geek interactive course library and code recording.

Read the original article: Coming soon: CSS Feature Queries (CSS Feature query)