Problem displaying css filter in blogger with Internet Explorer

I have a blog blogger for several years, and I have some problems with the CSS filter.

I like your opinion on this.

  • Question No. 1 -

I use the CSS filter in the blogger template to edit the animated GIF (hue, saturation, brightness ...) at the bottom of my blog (see below).

.filter-wrapper {
  position: relative;
  z-index: 9999;
}

body#layout .filter-wrapper {
  position: relative !important;
}

body#layout #fb-root {
  position: relative !important;
}

#fb-root {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif);
  height: 100%;
  width: 100%;
  -webkit-filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);
  -moz-filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);
  -o-filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);
  -ms-filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);
  filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);
}

The CSS filter works great in all browsers like Chrome, Mozilla, Safari ... etc.

However, when using the Internet Explorer filter, which I am talking about above, it no longer works. I tried to find information about this, unfortunately, after many studies, I came to the conclusion that some of the filter functions that I use are disabled in IE.

Being fairly new to CSS and the architecture of Internet browsers, I would like to get your opinion on this.

IE, .

, ?

  • № 2 -

, , .

moz-filter: ------- > Mozilla Firefox

o-filter: ------- > , Opera

ms-filter: ------- > MS Internet Explorer?

, , , ? html.

.

+4
1

https://github.com/iamvdo/pleeease-filters, CSS- SVG

filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);

filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filtersPicture"><feGaussianBlur stdDeviation="9" /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.25" /><feFuncG type="linear" slope="0.25" /><feFuncB type="linear" slope="0.25" /></feComponentTransfer><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.46584000000000003 0.67672 0.16632 0 0 0.30712 0.7236800000000001 0.14784 0 0 0.23936000000000002 0.46992 0.23528 0 0 0 0 0 1 0" /><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="125" /><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="2.92028 -1.7446000000000002 -0.17568 0 0 -0.51972 1.7298 -0.17568 0 0 -0.51972 -1.7446000000000002 3.26432 0 0 0 0 0 1 0" /></filter></svg>');

IE11.

CSS Filters Polyfill, IE, -

, polyfill Internet Explorer 11, , . , IE 6-9, (. - ms-filter) CSS-, .

, IE 10-11 - SVG, SVG ( SVG , CSS.)

SVG .

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="filtersPicture">
            <feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.25"></feFuncR><feFuncG type="linear" slope="0.25"></feFuncG><feFuncB type="linear" slope="0.25"></feFuncB></feComponentTransfer><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.46584000000000003 0.67672 0.16632 0 0 0.30712 0.7236800000000001 0.14784 0 0 0.23936000000000002 0.46992 0.23528 0 0 0 0 0 1 0"></feColorMatrix><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="125"></feColorMatrix><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="2.92028 -1.7446000000000002 -0.17568 0 0 -0.51972 1.7298 -0.17568 0 0 -0.51972 -1.7446000000000002 3.26432 0 0 0 0 0 1 0"></feColorMatrix>
        </filter>
    </defs>
    <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="750" height="750" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif"></image>
</svg>

, Microsoft Edge Windows 10. CSS-, (. , CSS3).

, GIF CSS . . CSS-, GIF .

+1

Source: https://habr.com/ru/post/1629276/


All Articles