Coming soon: CSS Feature Queries (CSS Feature query), featurequeries

Coming soon: CSS Feature Queries (CSS Feature query), featurequeries

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)

What are the features of CSS?

CSS is short for Cascading style Sheet. It is actually a set of styles. You may be unfamiliar with the term CSS, whether you use Internet Explorer or
Netscape Navigator surf the Internet and almost always deals with CSS. It may be hard to find webpages without CSS on the Internet. No matter what job you use
Software-based Web pages are intentionally or unintentionally used with CSS. Making good use of CSS can make your web pages more concise. Why do some people develop websites with the same content?
Dozens of KB, and the experts made only a dozen KB, the role of CSS in it is self-evident. I wrote some of my little experiences in using CSS and some netizens
Ask questions for your reference.
1. CSS is generally used in three ways in the production of web pages. Which method should I use?
When multiple webpages require CSS files to be connected, the code of the webpage is greatly reduced and the modification is very convenient.
The CSS used in adopts the Document Header mode. CSS is used only in one or two places on a webpage and is inserted in rows.

2. Do I need to mix the three methods of CSS in one webpage?
These three methods can be used in combination without confusion. This is why it is called a "stacked style sheet". This is where the browser displays the webpage.
Rational: First, check whether there is any inline CSS plug-in. If there is any, execute it. If there is any other CSS plug-in for this sentence, ignore it. Secondly, check the CSS in the header mode and execute it.
When neither of the preceding methods is available, check the CSS format of the external file. Therefore, we can see that the execution priority of the three types of CSS is: Intra-row plug-in, header side
Format.

3. How to make external file CSS in Dreamweaver3?
In Dreamweaver3, there are no special requirements for using CSS with an external connection file. Similarly, you can use NotePad to create a *. css file.
</Head> adds the following code: <link rel = "stylesheet" href = "fill in your CSS file address (relative path + file)
Name) "type =" text/css ">.

4. How can I use Dreamweaver3 to quickly create CSS external files?
It is quite difficult for a web designer who is new to CSS to create an external CSS file with a notebook editor. Because
Dreamweaver3 supports CSS very well. It is much easier to use it to help. You can perform the following operations:
1) First, write the names of cells that may be used in the website's webpage on the paper, and then bring up the CSS panel one by one in the Dreamweaver3 editing window.
And write a bit of relevant content on a blank page, define and try the content while trying it out. If the effect is not satisfactory, modify it immediately;
2) After all the settings are defined, use NotePad to create an empty CSS external link file and copy the defined CSS file between Go to the CSS file. The whole process is just a mouse. Is it convenient?

5. Do I need to manually write code when using in-line plug-in CSS in Dreamweaver3?
No! First define the CSS to be used in the CSS panel, and then insert the: style = "" In the CSS Tag to insert, and then extract the CSS you just defined from the Drag it to the double quotation mark (double quotation mark) and delete the part other than the curly braces.

6. There are "<! -- "And" --> "seem useless. Can't you?
The role of this pair is not to cause errors in earlier versions of browsers. If a browser executing this page does not support CSS, it will ignore the rest of the content...>

Css for beginners, url ("/images/feature_rightgif") repeat scroll center top

Repeat is a full screen tile that will fill your webpage.
Scroll is the default value, and the background image will scroll with the object content.
Taking adding a background image to a div as an example, the center top is based on the left vertex of the div, your background image is placed in the middle of the horizontal div and perpendicular to the top of the div. If you change to left top, the left vertex of the image will overlap with the left vertex of the div.
You can perform a small experiment on your own and try a combination of different directions (left, right, top, bottom, center,). You will find the secrets in the experiment intuitively.