Judgment of CSS3 conditions: Rules for judging @supports conditions

Article Introduction: As we all know, different browsers (whether it is a modern browser or an old version of IE browser) on the Web page parsing is not the same, in order to make the Web page in these browsers to achieve the basic consistency of the situation, to give users a better experience, we have to write different style code for them.

CSS3 conditions, it sounds "unknown", if you are a little familiar with CSS, you will find CSS in the "@media" is one of the conditions of judgment. Yes, there are two parts in the CSS3 specification document , one of which is the "@media" rule, which is mainly used to "differentiate style sheets according to media attributes" (especially in responsive design, the role is more powerful); Supports "rules, mainly used in lieu of the previous common Modernizr Library, in the browser does not support CSS3 to implement progressive enhanced design. In other words, @supports can let us in the browser does not support the CSS3 properties of a separate style, looks very powerful, how to use it specifically? Let's learn today together simply:

@supports Origins

As we all know, different browsers (whether it is a modern browser or an old version of IE browser) on the Web page parsing is not the same, in order to make the Web page in these browsers to achieve the basic consistency of the situation, to give users a better experience, we have to write different style code for them.

Different features of the detection methods we are relying on JavaScript early to detect, and later through the third party JS Library Modernizr to complete. But is this really useful? In addition to understanding how to detect, we also need to understand more browser resolution mechanism, so for our front-end staff is "no way." Fortunately CSS3 Conditional rules Module Level 3 introduces the "@supports" conditional judgment rule, which allows us to define different styles based on the browser's support for CSS features. This is very important to us.

@supports Grammar Rules

To better use @supports, we need to start from its grammar, only know how to use, we can better to use.

@supports < conditional rule > {   

conditional rules in @supports can declare one or several declarations that are combined by different logical operators (for example, non (not), or (or), and, etc.). You can also use parentheses to determine the precedence relationship of its operations.

The simplest condition expression is a CSS declaration, a CSS property name, followed by a property value, separated by a semicolon before the property name and the property value, for example:

(Display:flex)	 

Let's look at a simple example:

@supports (Display:flex) {section   {Display:flex}   ...}	 

The above code means that if the browser supports the "Display:flex" attribute, then the "Display:flex" style is applied to the "section" element.

@supports can also be combined according to different logical operators, with different syntax rules, let's go over the syntax rules of @supports and use the details together.

Check for basic properties

As in the previous example, you can use the basic properties of CSS to check:

@supports (Display:flex) {   div {Display:flex}}}	 

This is the most basic use rule of @supports.

Not logical declaration--excluding

@supports can use the not logical declaration, which is primarily a fallback style that can be provided when new attributes are not supported. In exchange, you can also understand that if your browser does not support the @supports criteria, you can provide a fallback style for your browser by @supports, such as:

@supports not (Display:flex) {   #container Div{float:left}}	 

The above code indicates that if your browser does not support the "Display:flex" attribute, then you can use "Float:left" instead.

and logical declarations--union (with)

The "and" logical declaration can also be used in @supports conditional judgments. Used to determine whether multiple properties are supported. For example:

@supports (Column-width:20rem) and (Column-span:all) {   div {column-width:20rem}       div H2 {Column-span:all}
  div H2 + p {margin-top:0;}   ... }	 

The above code indicates that if your browser supports both "Column-width:20rem" and "column-span:all" two conditions, the browser will call the following style:

div {Column-width:20rem}     div h2 {Column-span:all} div H2 + p {margin-top:0;}	 

Conversely, if these two conditions are not supported at the same time, then the browser will not call this part of the style.

Note: multiple and side connectors do not need to use parentheses:

@supports (Display:table-cell) and (Display:list-item) and (display:run-in) {///   * style */}	 

or logical declaration--or (or)

@supports In addition to the "not" and "and" logical declarations, you can also use the "or" logical declaration. It is primarily used to determine whether a browser supports a CSS feature. That is, you can use the "or" logical declaration and declare multiple conditions, and if one of the conditions is true, the style in @supports is enabled:

@supports (display:-webkit-flex) or (display:-moz-flex) or (Display:flex) {section   {     display:-webkit-flex;
  display:-moz-flex;     Display:flex;     ..   }}            	 

The example above is one of the "or" scenarios used in @supports. Flex does not need a prefix in opera and IE10, and in other modern browsers, the browser manufacturer's prefix is required, which allows the browser to support the "flex" attribute to invoke the following style:

Section {   display:-webkit-flex;   Display:-moz-flex;   Display:flex;   ... }  	 

There are several rules on the use of @supports syntax, and there are a few things you need to pay special attention to when using these kinds of rules:

"or" and "mixed with"

When you mix "or" and "and" in @supports, you must use parentheses () to prioritize:

( Transition-property:color) or (Animation-name:foo)) and (Transform:rotate (10deg)) {(    Animation-name:foo) and (Transform:rotate (10deg))) {   //...}	 

The previous two types of precedence calculations are not the same.

Only one expression must be in parentheses ()

In @supports, if a condition determines that the expression has only one bar, then the expression must be wrapped in parentheses:

@supports (Display:flex) {   //...}	 

Browser Compatibility

By introducing the syntax of the @supports above, we all know that this property is especially convenient for some incremental styles, or for browser compatibility, but what about the compatibility of the browser itself? Let's take a look at the compatibility table provided by caniuse.com :

Although there are currently only two browser support, we should believe that this will be a trend, sooner or later other browsers will follow, and eventually be supported.

Css.supports

The @supports that supports CSS in JavaScript is "window." Css.supports ". The Css.supports specification provides two types of writing. The first method includes two parameters, one is a property and the other is a property value:

var Supportsflex = css.supports ("Display", "flex");	 

The second formulation simply provides the entire string:

var supportsflexandappearance = Css.supports ("(Display:flex) and (-webkit-appearance:caret)");	 

In the use of JavaScript supports, the most important thing is to detect his features, opera browser using a different name method:

var supportscss =!! ((window. CSS && windows. Css.supports)  window.supportscss  false);	 

use @supports to replace Modernizr library?

It is well-known that earlier use of the Modernizr Library to do some browser properties detection, so as to determine whether the browser support these features. Since the launch of @supports,Modernizr is really old? What advantages do they have?

@supports compared with Modernizr , the speed, performance and function are stronger than Modernizr . Why do you say that? Because @supports is implemented in a browser-local way, it will be faster and more efficient, and Modernizr need to rely on the JS library, and @supports avoid the introduction of JS Library, reduce the amount of HTTP requests and server traffic, and make the development simpler and faster, and @support support a variety of logical conditional style judgments, can be very good to meet a variety of requirements.

But then again, if your browser doesn't support @supports, you still need to rely on Modernizr to do some testing at this point. In fact, Paul Irish said,Modernizr is also planning to use @supports in the future to replace its own detection methods.

can you use @supports?

Regardless of the use of @supports or use of Modernizr to do some progressive enhanced processing, we can not avoid writing more than one style, so as to increase the volume of the style, but the only benefit is to reduce the file request, enhance the user's experience of the product.

So now for you to use @supports, the right thing to do is to detect the hysteresis support Css.supports () and @supports before using @supports, if it is not supported in loading Modernizr, So your page will have a good compatibility. Here's how to implement it:

if (!) ( Window.supportscss  (window. CSS && windows. css.supports)) Load_modernizr ())	 

@supports Use

In most cases, using @supports is to set an old style for backup, and then new styles written in @supports are used to support modern browsers. For example, "flex" flexible layout, to the current version of the browser does not support, but you use this property, in order to make other browsers do not layout confusion, you can write as follows:

section {   float:left;}  @supports (display:-webkit-flex) or (display:-moz-flex) or (Display:flex) {section    {   	display:flex;    	Float:none;   } }	 

Just a simple example, let's take a look at Chris Mills A case provided in theNative CSS feature detection via the @supportsrule.

This example, a spin case written earlier by Chris Mills , Mingmai is implemented using Modernizr in order to be compatible with the rotation effect of other browsers , as shown in the following case effect:

The image above is a good animation in which the browser supports 3D rotation and the card flips.

The image above is in the browser does not support 3D conversion but supports 2D conversion, greeting card with the front rotation and animation, the bottom surface is displayed.

The image above shows that when the browser does not support 3D or 2D conversions, the front of the greeting card moves to the left, showing no animation behind it.

Next, let's take a look at the implementation of the modified method using @supports.

HTML structure

 
    
  
 
   
  
    
chris mills
 
    
heavy metal web designer
  
    
available for copy writing, web design, drums, guitar and bad jokes.
 
    
please contacts m E on...
 
   
 
   
 
    
 
     
email:  cmills@opera.com
 
     
Phone: +44 123 456 7890< /li> 
     
Twitter: @chrisdavidmills 
 
    
 
   
 
  
 
 
	 

Structure is not much said, is not very complicated, the next major look at the CSS section.

CSS Code

Card Basic Style:

/* Custom body, import font * * * * @font-face {font-family: "Deutschgothicnormal";     Src:url ("Fonts/deutsch-webfont.eot"); Src:url ("Fonts/deutsch-webfont.eot? #iefix") Format ("Embedded-opentype"), url ("Fonts/deutsch-webfont.woff") format ("Woff"), url ("Fonts/deutsch-webfont.ttf") format ("TrueType"), url ("Fonts/deutsch-webfont.svg#deutschgothicnormal     ") Format (" SVG ");     Font-weight:normal;  Font-style:normal;     } @font-face {font-family: "Sfarcheryblackscregular";     Src:url ("Fonts/sf_archery_black_sc-webfont.eot"); Src:url ("Fonts/sf_archery_black_sc-webfont.eot? #iefix") Format ("Embedded-opentype"), url ("Fonts/sf_archery_black _sc-webfont.woff ") format (" Woff "), url (" Fonts/sf_archery_black_sc-webfont.ttf ") format (" TrueType "), url (" Fonts/sf_     Archery_black_sc-webfont.svg#sfarcheryblackscregular ") format (" SVG ");     Font-weight:normal;  Font-style:normal;   }/* Basic layout style * * height:800px;   font-size:62.5%; Background-color: #eee; } html,body,h1,h2,p {margin:0; padding:0;   } footer {Position:absolute; bottom:0;   } #inner-wrapper {width:85.6mm;   height:53.98mm;   margin:120px Auto;   Margin:12rem Auto;      position:relative;   -webkit-transition:1.5s all;   -moz-transition:1.5s all;   -ms-transition:1.5s all;   -o-transition:1.5s all;      Transition:1.5s all;   -webkit-transform-style:preserve-3d;   -moz-transform-style:preserve-3d;   -ms-transform-style:preserve-3d;   -o-transform-style:preserve-3d; transform-style:preserve-3d;   } #front, #back {position:absolute;   top:0;   left:0;   width:75.6mm;   height:43.98mm;   padding:5mm;   box-shadow:5px 5px 10px Rgba (0,0,0,0.7);      Background: #FF3500; Background:-webkit-linear-gradient (Top,rgba (0,0,0,0), Rgba (0,0,0,0.6)),-webkit-linear-gradient (45deg, #FF3500   37.7mm, #FF7600 37.8mm, #FF7600 59.7mm, #FF3500 59.8mm); Background:-moz-linear-gradient (Top,rgba (0,0,0,0), Rgba (0,0,0,0.6)),-moz-linear-gradient (45deg, #FF3500 37.7mm,# FF760037.8mm, #FF7600 59.7mm, #FF3500 59.8mm); Background:-ms-linear-gradient (Top,rgba (0,0,0,0), Rgba (0,0,0,0.6)),-ms-linear-gradient (45deg, #FF3500 37.7mm,#   FF7600 37.8mm, #FF7600 59.7mm, #FF3500 59.8mm); Background:-o-linear-gradient (Top,rgba (0,0,0,0), Rgba (0,0,0,0.6)),-o-linear-gradient (45deg, #FF3500 37.7mm,#   FF7600 37.8mm, #FF7600 59.7mm, #FF3500 59.8mm); Background:linear-gradient (to Bottom,rgba (0,0,0,0), Rgba (0,0,0,0.6)), Linear-gradient (45deg, #FF3500 37.7mm, #FF7600 37.8mm, #FF7600 59.7mm, #FF3500 59.8mm);  } #front {z-index:2;  }/* Text typesetting style * * H1, H2 {font-family:deutschgothicnormal, Sans-serif;}   h1 {position:relative;   font-size:30px;   Font-size:3rem; Z-index:3;   } h2 {position:relative;   top:2mm;   font-size:15px;   Font-size:1.5rem; text-shadow:0 0 4px White, 0-5px 4px #FFFF33, 2px-10px 6px #FFDD33, -2px-15px 11px #FF8800, 2px-25px 18px #FF2200;   P, Li {font-family:sfarcheryblackscregular;   font-size:11px;   Font-size:1.1rem; Margin-top:5px; Margin-top:0.5rem;   Li {position:relative;   top:8mm;	  }

It's just some basic style, so here's a look at the key parts of this example:

/* Does not support transform 2D or transform 3D browser execution */#wrapper: hover #inner-wrapper #front,  #wrapper: Focus #inner-wrapper # Front {   margin-left: -350px;}	 

First, a style is defined in browsers that do not support transform 2D or transform 3D, so that the card is moved to the left to show the card at the bottom.

/* Supports transform 2D browsing execution  /@supports (-webkit-transform:rotate ( -30deg)) or (-moz-transform:rotate ( -30deg)) or (- Ms-transform:rotate ( -30DEG)) or (-o-transform:rotate ( -30deg)) or (Transform:rotate ( -30deg)) {        #inner-wrapper # Front {     -webkit-transition:0.8s all ease-in;     -moz-transition:0.8s all ease-in;     -ms-transition:0.8s all ease-in;     -o-transition:0.8s all ease-in;     Transition:0.8s all ease-in;    }    #wrapper: hover #inner-wrapper #front,    #wrapper: Focus #inner-wrapper #front {      margin-left:0;          -webkit-transform:rotate ( -30deg) translate ( -50%,-100%);      -moz-transform:rotate ( -30deg) translate ( -50%,-100%);      -ms-transform:rotate ( -30deg) translate ( -50%,-100%);      -o-transform:rotate ( -30deg) translate ( -50%,-100%);      Transform:rotate ( -30deg) translate ( -50%,-100%);    }	 

The effect of rotation and displacement is achieved through @supports in browsers that support transform 2D properties.

/* Implement/@supports (-webkit-transform:rotatex (0deg)) or (-moz-transform:rotatex (0deg)) or (-ms-tra in browsers that support 3D transforms) Nsform:rotatex (0DEG)) or (-o-transform:rotatex (0deg)) or (Transform:rotatex (0deg)) {#front, #back {-webkit-b     Ackface-visibility:hidden;     -moz-backface-visibility:hidden;     -ms-backface-visibility:hidden;     -o-backface-visibility:hidden;   Backface-visibility:hidden;     } #front {-webkit-transform:rotatex (0deg);     -moz-transform:rotatex (0DEG);     -ms-transform:rotatex (0DEG);     -o-transform:rotatex (0DEG);    Transform:rotatex (0DEG);     } #back {-webkit-transform:rotatex (180deg);     -moz-transform:rotatex (180DEG);     -ms-transform:rotatex (180DEG);     -o-transform:rotatex (180DEG);   Transform:rotatex (180DEG);     #wrapper: Hover #inner-wrapper, #wrapper: Focus #inner-wrapper {-webkit-transform:rotatex (180deg);     -moz-transform:rotatex (180DEG);     -ms-transform:rotatex (180DEG); -o-transform: Rotatex (180DEG);   Transform:rotatex (180DEG);      #wrapper: hover #inner-wrapper #front, #wrapper: Focus #inner-wrapper #front {-webkit-transform:none;      -moz-transform:none;      -ms-transform:none;      -o-transform:none;   Transform:none;	  } }

Finally, the @supports property is used to implement the rotation function in browsers that support the transform 3D properties.

@supports Effect Modernizr Effect

Special statement: The above code comes from Chris Mills A case provided byNative CSS feature detection via the @supportsrule .

Note: Please use the browser that supports @supports to view the above case.

Extended reading:

2. native CSS feature via The @supports rule
3. @supports
4. native CSS Features detection @supports rule arrives in Firefox Nightly
5. an EARLY look at CSS3 CONDITIONAL RULES
6. css @supports
7. CSS3 @ Supports rule. Native Modernizr?
8. supporting and detecting @supports
9. why use @supports instead of Modernizr?
10. CSS3 Conditional introduction
11. random talk about @supports and CSS3 conditional rules
12. native CSS Feature detection with @supports
13. firefox supports @ Supports, gets my support

About the CSS3 of @supports on this, I hope this article is helpful to you, have the fruit you have a better understanding hope to share with us.