Coming soon: CSS Feature Queries (CSS Feature query)

Source: Internet
Author: User
Tags transparent color

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.