-ms-filter generating bugs. Be carefull

Hi, % username% .



This publication will look at the innocuous, at first glance, code that may cause confusion - a menu like dropdown will not work in IE 7-8 due to the use of a gradient background in the container.



CSS has a nice function - linear-gradient () . Thanks to it, we have the ability to create very complex gradients for use in web development. But Internet Explorer, up to version nine inclusive, does not perform this function due to the lack of its support at the browser level and, instead, has its own implementation in the form of CSS properties and special significance for it. It looks like this:

')

div { filter: progid:DXImageTransform.Microsoft.Gradient(params); -ms-filter: "progid: DXImageTransform.Microsoft.Gradient(params); } 

<sup>The -ms-filter property is a record according to the new Microsoft specification .

More information about the gradient filter for IE can be found on the htmlbook: http://htmlbook.ru/css/filter/gradient</sup>



It seems to be nothing new and amusing, is it? But, as in the overwhelming majority of crutches for IE, the correct operation of this implementation should not be expected in a hundred percent of cases.

Error description and playback

The filter for creating a gradient, like all implementations of unsupported CSS rules in old IE, is processed using JavaScript, and the extra JS promises errors.



Not to say that the bug is critical, but not from the category of far-fetched. To play, we need a classic drop-down menu implemented in pure HTML and CSS using the child element selector.



I sketched the simplest menu for an example:





Demo: http://firstvector.org/examples/ms-filter/index.html .



The main styles for the menus are described above and they are intended for all browsers from within IE. Further, inside the first conditional comment, there are styles intended for IE of the ninth and older versions, inside the second - for the seventh (in general for all versions below the seventh, but they are not of interest to us).



So, as we remember, starting from IE9, the function -ms-linear-gradient () will not work and the property will be replaced by the property -ms-filter from the file ie.css .

Chronology of events

IE9 - everything works as it should.

IE8 - see that there is no drop-down menu.

Although, if you look closely at a selected area, you will notice that the menu is displayed, though its behavior is as if one of its parents has overflow: hidden; . But we know that it does not exist and we know why this happened. We leave the following contents in the ie.css file:

 .nav { zoom:1; } 

and check - everything works, but the gradients had to be sacrificed.

We return ie.css to the original form and check the performance in IE7 - it does not work.

It is expected, because in the eighth version, it was also. But, interestingly, in order to correct the error in this version, you only need to remove the gradient displayed when you hover over the item. We give ie.css to the form:

 .nav { zoom:1; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0); } .nav > .active { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#635f5f',endColorstr='#3f3c3c',GradientType=0); } 

and check - it works again, but with the hover effect a monotonous color is used.

^{Note: to reproduce this error, there is no difference in how the property name will be written: -ms-filter or just filter , the bug will be felt in any case.}

Results

Often, layout designers have to deal with the task of making a horizontal drop-down menu with the presence of a gradient background for visible elements. Therefore, be careful when you typeset and check cross-browser compatibility. I hope that the error described in this article will direct someone in the right direction.



ps I have no doubt that, in addition to the situations described, it is possible to reproduce similar ones on the same basis, or, on the contrary, to find other methods of overcoming.



Thanks for attention.