[ CSS ] fliter brightness の ie11 対策

CSSのプロパティfilterは対象をボカしたりグレースケールにしたりできるため、画像を加工する必要がなくなり、非常に便利です。

今回私は、良くある形のブログで記事が一覧に表示されるページにおいて、画像をバックグラウンドにしてその上にテキストを配置することから、画像に暗くfilterをかけ読みやすいようにしました。

.box{
  background-image:url('sample.jpg');
  background-size:cover;
  background-position:center;
}
.box:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  filter: brightness(50%);
}

が、これではie11には反映されませんでした。

対策を探すべくググったところ、最初に出会ったのはライブラリCSS-Filters-Polyfillでした。しかし、「Not supported Browsers」に「IE 10+,」の文字が。

説明もありました。

Why is IE 6 - 9 supported, but not IE 10 or higher? Well, since Microsoft decided to switch sides and to now follow standards, they killed their old proprietary filters beginning with IE 10 which I rely on for emulation.
Altough they did introduce SVG filters sadly those are limited to a usage inside SVGs. They cannot be applied to HTML-elements.
Even triggering legacy mode does not help any more. So this is why we are left at the end with no hook/support at all in IE10+ :(

引用：https://github.com/Schepp/CSS-Filters-Polyfill

ということだったので、別をググり、stack overflow に辿り着いて、fliter brightness を辞めて、background hsla で対応しました。

.box:before{
  content: "";
  position: absolute; 
  display: block; 
  top: 0; right: 0; bottom: 0; left: 0;  
  background: hsla(0,0%,0%,0.4);
}

##参考URL
[CSS3][JS] CSS の Filter Effects を IE でも使用できるようにするライブラリ CSS-Filters-Polyfill ｜ memocarilog
Schepp/CSS-Filters-Polyfill: This polyfill takes the official CSS filters syntax and translates it to the different equivalent techniques that the browsers know for those effects
html - Crossbrowser brightness filter over img using css - Stack Overflow