Crossbrowser CSS

Good afternoon Dear!

In this post, I want to share my personal observations and conclusions in the application of html5 & css3.

Namely, the use of such innovations as border-radius, box-shadow, opacity, linear-gradient .

For each property I will give a label from this site (do not consider it an advertisement, the support of the properties is quite clearly described). I will also describe my personal observations and to which decision they brought me. Mostly I use either PIE.htc (for IE) or layout effects using background
Let's start in order:
')

Border-radius

Here you can clearly see that the property is supported almost everywhere. It remains to solve the problem with FF 3.6 and IE7 - IE8.

• FF 3.6: in 2012, I believe that this browser can be attributed to dinosaurs, and it is not necessary to write because of it a vendor property for Mozilla. In the extreme case, I think that he can live with square corners.
• IE: this problem is easily solved with PIE.htc

Thus, the code is approximately as follows:

element{ border-radius: 10px; behavior: url("public/htc/PIE.htc"); } 

Support: IE6 ++, FF4 ++, GC1 ++, Opera10.5 +, Safari5 +

Box-shadow

Here we see the need to add the vendor property -webkit- . It remains to solve the problem with FF 3.6 and IE7 - IE4.

• Everything is the same as in the previous property, only you need to add support for the WebKit engine

Code:

 element{ box-shadow: 5px 5px 10px #000000; -webkit-box-shadow: 5px 5px 10px #000000; behavior: url("public/htc/PIE.htc"); } 

Support: IE6 ++, FF4 ++, GC1 ++, Opera10.5 +, Safari5 +

Opacity

It is supported everywhere except our favorite IE7 and IE8.

• We will solve the problem with the help of a fairly resource-intensive filter.

Code:

 element{ opacity: 0.3; filter: alpha(opacity=30); } 

Support: IE6 ++, FF3.6 ++, GC1 ++, Opera10.5 +, Safari5 +

Linear-gradient

Rare enough property, because of this, everyone tries to do without it and use the background. But once to go, then go to the end. See:

I will not describe what needs to be written for each browser, I will give the code with all the properties at once. Yes, and for IE, we reconnect PIE.htc

Code:

 element{ background-color: #F07575; background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55)); background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #BADA55); -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); } 

Support: IE6 ++, FF3.6 ++, GC1 ++, Opera10.5 +, Safari5 +

Here is a voluminous property.
In principle, this is all that I wanted to convey. But I also want to say a word about resource intensity in IE. Yes, the use of PIE and filters are quite cumbersome operations, and they should be used only in cases where there is no other way out. Personally, I use them when I know that the content will clearly stretch and change and the usual gradient background will not solve the problem, but someone tries to keep up with the times. In any case, it is your choice.
To begin with, I advise you to condition it with your manager, and to designate certain boundaries that will allow you to use this or that technique.

Thanks for attention!