Coming soon: CSS Feature Queries (CSS feature query)

Feature Queries is part of CSS3 Conditional rules specification, which supports the "@supports" rule, and the @supports rule can be used to test whether the browser supports CSS properties and value pairs. The CSS itself has a demotion mechanism, such as ignoring unsupported attributes or values, but it is also very serious when important attributes are ignored, and you can use feature Queries to test whether all CSS rules are supported and to optimize your page. Queries has a lot of stable implementations in various browsers, such as Chrome,firefox and Opera. Support for browsers is still strengthening, you need to know about Featue Queries and decide whether to fit it in your current project.

Feature Queries in CSS

Feature queries and media queries are a bit like, for a simple example, you can ask the browser to run a CSS margin property.

/* CSS to apply */ }

If you don't quite understand, let's give a real-world example, if you want to use Backgrund-blend-mode to color the background image, you can add a colour to the original grayscale image.

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 (n, a, 106),    rgb (N, 154,))    , url (background.png);    } 

This is a cool feature, isn't it? However, the browser support is still perfect, Background-blend-mode is now available in many browsers, but still some can not show the desired effect. In order to do this in a browser that does not display the effect, we can do this in a way that is like a translucent color overlay.

    Body {    background: #3F9A82;    Background:linear-gradient (RGBA, 106, 0.8)    , Rgba (+, 154,, 0.8)    , url ( background.png);    }

In the above code, if the browser does not support the semi-transparent color layer, then only one background can be displayed. If we use feature Query, we can change the background according to the situation. Feature query is more like media query here, use @supports and add a CSS declaration inside the parentheses.

    @supports (background-blend-mode:multiply) {    body {    background-blend-mode:multiply;    Background:linear-gradient (RGB (n, a, 106),    rgb (N, 154,))    , url (background.png);    }    }

Feature Queries in JavaScript

Feature queries also supports JavaScript interfaces: Css.supports. We also use the above example to illustrate. If the browser supports background-blend-mode:multiply, we can add blend-mode to the body tag.

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

    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 (, 154, 106),    RGB(+/-),    URL ( background.png);    }

As shown above, you can combine tests with logical operators (and, or, and not). For example, if you want the browser to support both the Background-blend-mode and background property values, you can edit the following:

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

or write:

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

Believe that feature queries will soon be popular among developers, you need to consider when to use it, when testing to determine that they can be used in the same browser. Although Feature query does not improve performance much, they can make your code more manageable. Try these new features first, and then tell us about your feelings.

Geek Label-professional and accurate sharing, focus on the geek you're interested in, community offers great boutique tutorials, interactive lectures

To learn about front-end technology, visit the Geek Interactive Course Library and code recording

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

Coming soon: CSS Feature Queries (CSS feature query)