Cross-browser CSS3 properties set

Good afternoon, allies!

As a coder, I have to deal with various CSS3 properties every day, which, whether I like or not, I have to use them so that they are displayed correctly in all modern and non-modern browsers. Of course, I have gathered a certain library, which I use in the layout of various projects. I collected my collection, from various resources and forums, on the limitless expanses of the Internet, so it is not surprising if someone has already come across something individually.

Perhaps the experienced representatives of our profession will not be interested in this post, but it may be useful for younger and inexperienced people. From my senior comrades, in turn, I would like to receive comments on the shortcomings that may be present here, and important points, which, on the contrary, may be missing here.
')


For CSS3 to work correctly in all browsers, you have to use some external libraries.

1. Progressive Internet Explorer or PIE - helps IE 6+ versions become smarter and recognize CSS3 properties. In any case, its decorative part. You can download it here . From this library, we need the PIE.htc file, which needs to be put in one directory with the style file, from which we will connect it later.
There are also disadvantages, this library is heavily loaded with old browsers, so it is worth it to use it as a last resort and it is better to give the user a simplified version of the web page.

2. jQuery.textshadow. - teaches all the same IE below version 9 to use the text-shadow property. To work correctly, you must use Modernizr and jQuery itself. It is also worth noting that this library as well as PIE heavily loads the old browser, and it is better to use it in extreme cases. Shadow can try to make pseudo-elements.

3. Selectivizr - js library, which will teach IE 6-8 pseudo-classes, pseudo-elements and selectors of CSS 2.1 and CSS standards 3. By the way, for its work you also need to use Modernizr, or another library. Read more here .

Actually, after all the preparations, you can go directly to the properties of CSS3, over which we will scoff.

Rounded edges or border-radius

.border-radius { border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); } 

Property

 background-clip: padding-box; 

eliminates the possibility that the background image will climb onto our rounded areas.

Line

 behavior: url(PIE.htc); 

connects our PIE file to support this IE property.

Block shadow or box-shadow

 .box-shadow{ box-shadow: 3px 3px 4px #444; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444'); behavior: url(PIE.htc); } 

Properties

  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444'); 

used for IE.

Background gradient or background: linear-gradient ()

 .gradient{ background-color: #444444; background: -webkit-linear-gradient(top, #444444, #999999); background: linear-gradient(to bottom, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); -pie-background: linear-gradient(to bottom, #444444, #999999); behavior: url(PIE.htc); } 

Double background or background: url (), url ();

 .multiple-background{ background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; -pie-background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; behavior: url(PIE.htc); } 

Modern browsers, like, understand everything, and again use PIE for IE.

Picture instead of a stroke or border-image: url ();

 .border-image{ -webkit-border-image: url('image.png') 30 round round; border-image: url('image.png') 30 round round; behavior: url(PIE.htc); } 

Here the behavior property will not work in IE10.

Shadow text or text-shadow

This is the end of PIE. To use text shadow in IE, you need to use the jQuery.textshadow library mentioned above.

To use, it is necessary, for a start, to specify our shadow in styles, for regular browsers.

 .text-shadow{ text-shadow: 1px 1px 3px #000; } 

and then, using the library, we ask unusual browsers IE to understand us

 <script type="text/javascript"> $(function(){ $(".text-shadow").textShadow(); }) </script> 

pre, not forgetting, to connect this library and all that is necessary for its work.

Algorithm for calculating the width and height of the element (yes, just such a translation) or box-sizing

 .box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 

Unfortunately, this property will not work in IE7 and lower browsers. At the moment I have not found a correct solution to this issue, but this does not mean that it does not exist.

Put the blocks in a line or display: inline-block

Excellent modern property that allows you to put the blocks in one row, without using the properties of float and so on. To my regret, in practice, faced with the fact that many use it clean. That is so

 .inline-block{ display: inline-block; } 

The code in this version is supported only by the latest modern browsers. For full support, you need to add a few lines to it. The full code is:

 .inline-block{ min-height: 250px; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 250px; } 

Here

  display: -moz-inline-stack; 

used to understand the inline-block of the old Mozilla.
Property

  vertical-align: top; 

aligns all blocks vertically on top. Depending on the task and at the bottom.
Finally, the properties

  zoom: 1; *display: inline; _height: 250px; 

used for IE. Note that in this case, _height: 250 used because IE does not know the min-height properties.

Transparency or opacity

 .opacity{ opacity: 0.5; filter: alpha(opacity=50); } 

Please note that in the filters used for IE, the transparency value is specified in the range from 0 to 100, not from 0 to 1 as usual.

Animation or transition

 .transition { -webkit-transition: all 1s ease; transition: all 1s ease; } 

Transform objects or transform

 .transform{ -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } 

The transition and transform properties are not supported by IE browsers below version 9, and transition is only from version 10. I haven't found any solutions for old IE either.

Background size or background-size

 .background-size{ background: url("back.jpg") no-repeat top center; -webkit-background-size: cover; background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='back.jpg', sizingMethod='scale'); } 

CSS3 selectors

We are talking about such selectors as

 ul li:fist-child{} ul li:last-child{} ul li:nth-child(3){} input[attr='']{} a:hover{} 

And other useful selectors that have been added to CSS3. In order to provide quality support for such selectors, we use the aforementioned library Selectivizr. To make it work, you just need to connect it in front of our CSS file.
A complete list of selectors with which Selectivizr works can be found on the official page , in the section “How does it work?”.

Finally, I would like to note that I did not consider all the properties on cross-browser compatibility, but only those that are most often used in everyday practice. I hope this post may be you, at least something useful!

UPDATE

Updated border-raduius and opacity properties. Thank you pepelsbey for the strict comment!

UPDATE

Updated most properties in accordance with the recommendations. Thank you very much to Aingis for your great help!