Fix png in IE6 with expression, one class and no single pixel gif
This is a long known problem. This problem has 1000 solutions, although they all eventually use the same, proven AlphaImageLoader. I, most likely, will not discover America, but just want to tell you about expression, which I recently use and which is enough in 99% of cases, and also explain how, why and why I wrote it.
It all started with the fact that when I came to a new job, I learned that my good old prescription of png-shek in the filter property to fix png-ki is impossible: it inflates the code, you need to get rid of it, and the most important thing is that there is confusion with the ways in CMS'ke. By that time, I was used to the fact that background-repeat and background-position could not be achieved in IE6 with a single wave of the hand, but somehow there was too much crap even with a simple fixed image (by the way, my solution to problems with these properties does not solve! ). Then I had to use the solution that others used: jquery.iFixPng + separate js, when you need to make sizingMethod = "scaled" and two classes for the elements "png" and "png-scaled". At first, I also used this method, but I was very bothered that it was nevertheless pure on JS. I began to think.
Write a solution on expression'ah not difficult. The main thing that had to be done was to pass the variable z_gif into the express - the path to a single-pixel transparent gif for fixing img-elements. But at that time I still could not explain to other layout designers why the way to the solutions is better than to JS. After some time I began to work on a project, where on one page it could be immediately somewhere around 20 png-nis. It was then that the fix on JS showed itself in all its glory, because some of the pictures were from half a page, then after the site was loaded, the user (including customers) seconds saw the unfixed pictures, and only then everything became nice and beautiful. Customers complained a lot about it, and I shrugged "I can do nothing." And then I decided to try to replace the js-fix with expression and achieved what I wanted: after downloading, the user did not see the non-fixed images, there was emptiness in their place!
')
I used this fix for a while, but I didn’t like the fact that I had to use a separate class for scaled images. I wanted to fix it and get rid of two classes (png and png-scaled) in favor of one. Thinking I noticed that, in general, scale'it is illogical pictures, in which both sides are more than 1 pixel (it is clear that 99% of cases there are 1, but 99 were fine with me), and I wrote a condition in expression that checked and accordingly changed the sizingMethod to "scale":
This solution worked for me before the case when I applied a fix to an element whose background-image was set with the! Important flag and the fix did not work! What is even more interesting, other fixes also did not work! I began to think and having tried a bunch of options: to reach the! Important flag with JS, to re-create a new element, cloning all the properties except background-image, to reach the currentStyle properties and others like them ... But in the end everything turned out to be somehow too simple: in the same stylesheet, you had to create an additional rule:
and just add an element to the png-fixed class and everything worked! :)
But this decision did not give rest. I was not satisfied with the need to pass the way to a single-pixel transparent gif to expression every time and somewhere I suspected that it was possible to get rid of it. I spit expression and this and that, simultaneously optimizing the code. For a start, I tried not to set src, but the harmful IE showed above the fixed image the icon of the unloaded image. Climbed tons of sites with all possible fixes. I tried to make the code in a separate htc-shku. And then for some reason I set the width and height of 1 pixel to the picture, and as a result, the non-fixed image became 1x1, and the fixed image was displayed normally next to it. I did not believe it and began to think further about how to remove this 1x1 and asked src = "" and it was gone. I was exulting, my joy knew no bounds, something worked out for me ... and when I began to apply fix, then ... the pictures ceased to scale. In pips, I copied forgot to enter the sizingMethod change in the code, and when I added it, the fix stopped working.
I thought it was a failure, because then I already told everyone about my beautiful fix, which required only one file, but after thinking why something worked for me, I remembered that sizingMethod had possible values ​​of not 2, but 3, there is also such a property “image”! The documentation for this value says that it pushes or compresses the boundaries of the container to fit the picture. But it was not quite so! If the element-container is less than png, then the png-scale will appear completely, but the element-container will remain within its borders, and that is what happened to me when I set the width and height = 1, and src = "".
So, here is the code for my fix:
Of course, the master is a master, and this decision saves life only in 99% of cases (and this is my 99% of cases, but everything can be quite different with you) and makes life much easier in principle, because you only need to podklyuchit file with fix and set the necessary elements of the class "g-png24", regardless img this or a div! To some of you, the solution of Vitaly Kharisov will probably seem more interesting (though in it he uses one additional element-wrapper for img), or iePngFix known to all.
It all started with the fact that when I came to a new job, I learned that my good old prescription of png-shek in the filter property to fix png-ki is impossible: it inflates the code, you need to get rid of it, and the most important thing is that there is confusion with the ways in CMS'ke. By that time, I was used to the fact that background-repeat and background-position could not be achieved in IE6 with a single wave of the hand, but somehow there was too much crap even with a simple fixed image (by the way, my solution to problems with these properties does not solve! ). Then I had to use the solution that others used: jquery.iFixPng + separate js, when you need to make sizingMethod = "scaled" and two classes for the elements "png" and "png-scaled". At first, I also used this method, but I was very bothered that it was nevertheless pure on JS. I began to think.
Write a solution on expression'ah not difficult. The main thing that had to be done was to pass the variable z_gif into the express - the path to a single-pixel transparent gif for fixing img-elements. But at that time I still could not explain to other layout designers why the way to the solutions is better than to JS. After some time I began to work on a project, where on one page it could be immediately somewhere around 20 png-nis. It was then that the fix on JS showed itself in all its glory, because some of the pictures were from half a page, then after the site was loaded, the user (including customers) seconds saw the unfixed pictures, and only then everything became nice and beautiful. Customers complained a lot about it, and I shrugged "I can do nothing." And then I decided to try to replace the js-fix with expression and achieved what I wanted: after downloading, the user did not see the non-fixed images, there was emptiness in their place!
')
Universal class
I used this fix for a while, but I didn’t like the fact that I had to use a separate class for scaled images. I wanted to fix it and get rid of two classes (png and png-scaled) in favor of one. Thinking I noticed that, in general, scale'it is illogical pictures, in which both sides are more than 1 pixel (it is clear that 99% of cases there are 1, but 99 were fine with me), and I wrote a condition in expression that checked and accordingly changed the sizingMethod to "scale":
* html .g-png24 {
behaviour:expression(
!this.fixedPNG?
(function(el){
if (el.tagName.toLowerCase() == "img") {
el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + el.src + ")";
el.style.backgroundImage = "none";
el.src = z_gif; // z_gif html', - : <script>var z_gif = {{path-to-z-gif}}</script>
}
else {
var sizingMethod = "crop";
var tmpImg = new Image();
tmpImg.src = el.currentStyle.backgroundImage.split('\"')[1];
if (parseInt(tmpImg.width) == 1 || parseInt(tmpImg.height) == 1 || el.className.indexOf('g-png-24__scaled') > -1) {
sizingMethod = "scale";
}
el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + el.currentStyle.backgroundImage.split('\"')[1] + ", sizingMethod='"+sizingMethod+"')";
el.style.backgroundImage = "none";
el.src = z_gif;
}
el.fixedPNG = true;
})(this):''
);
}
Harmful! Important
This solution worked for me before the case when I applied a fix to an element whose background-image was set with the! Important flag and the fix did not work! What is even more interesting, other fixes also did not work! I began to think and having tried a bunch of options: to reach the! Important flag with JS, to re-create a new element, cloning all the properties except background-image, to reach the currentStyle properties and others like them ... But in the end everything turned out to be somehow too simple: in the same stylesheet, you had to create an additional rule:
* html .png-fixed {
background-image: none !important;
}
and just add an element to the png-fixed class and everything worked! :)
Make a mistake?
But this decision did not give rest. I was not satisfied with the need to pass the way to a single-pixel transparent gif to expression every time and somewhere I suspected that it was possible to get rid of it. I spit expression and this and that, simultaneously optimizing the code. For a start, I tried not to set src, but the harmful IE showed above the fixed image the icon of the unloaded image. Climbed tons of sites with all possible fixes. I tried to make the code in a separate htc-shku. And then for some reason I set the width and height of 1 pixel to the picture, and as a result, the non-fixed image became 1x1, and the fixed image was displayed normally next to it. I did not believe it and began to think further about how to remove this 1x1 and asked src = "" and it was gone. I was exulting, my joy knew no bounds, something worked out for me ... and when I began to apply fix, then ... the pictures ceased to scale. In pips, I copied forgot to enter the sizingMethod change in the code, and when I added it, the fix stopped working.
I thought it was a failure, because then I already told everyone about my beautiful fix, which required only one file, but after thinking why something worked for me, I remembered that sizingMethod had possible values ​​of not 2, but 3, there is also such a property “image”! The documentation for this value says that it pushes or compresses the boundaries of the container to fit the picture. But it was not quite so! If the element-container is less than png, then the png-scale will appear completely, but the element-container will remain within its borders, and that is what happened to me when I set the width and height = 1, and src = "".
So, here is the code for my fix:
* html .g-png24 {
behaviour:expression(
(!this.fixedPNG?
(function(el){
var fixSrc = "", sizingMethod = "crop";
if (el.tagName.toLowerCase() == "img") {
fixSrc = el.src;
sizingMethod = "image";
el.style.width = 1;
el.style.height = 1;
el.src = "";
}
else {
var tmpImg = new Image();
tmpImg.src = el.currentStyle.backgroundImage.split('\"')[1];
if (parseInt(tmpImg.width) == 1 || parseInt(tmpImg.height) == 1 || el.className.indexOf('g-png-24__scaled') > -1) {
sizingMethod = "scale";
}
fixSrc = el.currentStyle.backgroundImage.split('\"')[1];
el.className += " g-png-fixed";
}
el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + fixSrc + ", sizingMethod='" + sizingMethod + "')";
el.fixedPNG = true;
})(this):'')
);
}
* html .g-png-fixed {
background-image: none !important;
}
Of course, the master is a master, and this decision saves life only in 99% of cases (and this is my 99% of cases, but everything can be quite different with you) and makes life much easier in principle, because you only need to podklyuchit file with fix and set the necessary elements of the class "g-png24", regardless img this or a div! To some of you, the solution of Vitaly Kharisov will probably seem more interesting (though in it he uses one additional element-wrapper for img), or iePngFix known to all.
Source: https://habr.com/ru/post/74105/
All Articles