2020.12.05

【CSS】filterの使い方 + polyfillを使ってもIE11では使えない

この記事は、最初の投稿から3年以上が経過しています。

最終更新から1447日が経過しています。

【CSS】filterの使い方 + polyfillを使ってもIE11では使えない

「CSSだけで画像のグラフィック効果を使いたい」

「IE11には対応させられるの？」

こんな悩みにお答えします｡

CSSのfilterのpolyfillを検証しましたが､IE11では使えませんでした｡
(IE6～9には対応できました)

なので､CSSのfilterは､IEサポートを打ち切ることを決めたWebサイトでしか使うことができないといえます｡

filterのデモ

この記事では､以下のことがわかります｡

filterの使い方
IE対応(polyfill)の検証

私は､2015年からWeb制作の仕事をはじめて､160件ほどのWebサイトを制作してきました｡
その間､いろいろな失敗を繰り返し､クライアントからのフィードバックや本などで勉強することにより､多くのノウハウを得ることができました｡

記事を読み終えると､IEサポートを打ち切ることを決めたWebサイトでCSSを使うことができます｡

目次

filterの使い方
1. 基本的な使い方
2. IE対応(polyfill)の検証
まとめ

filterの使い方

基本的な使い方

以下のように､filterにそれぞれの効果､その値を設定していきます｡

// グレースケール
filter: grayscale(1);

// セピア
filter: sepia(1);

// ぼかし
filter: blur(3px);

// 階調の反転
filter: invert(1);

// 明度
filter: brightness(60%);

// コントラスト
filter: contrast(200%);

// ドロップシャドウ
filter: drop-shadow(16px 16px 20px blue);

// 色相環
filter: hue-rotate(90deg);

// 不透明度
filter: opacity(25%);

// 彩度
filter: saturate(30%);

これで画像にフラフィック効果を使うことができます｡

filterのデモ

また､以下のように設定すると複数の効果を適用することができます｡

// 複数設定 (コントラストと明度)
filter: contrast(175%) brightness(103%);

IE対応(polyfill)の検証

filterのpolyfillには､「CSS-Filters-Polyfill」がありましたが､CDNにはないようなので､GitHubからダウンロードします｡

GitHub - 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

This polyfill takes the official CSS filters syntax and translates it to the different equivalent techniques that the browsers know for those effects - Schepp/CSS-Filters-Polyfill

jsをhead内に設置します｡

  <script>
    var polyfilter_scriptpath = "(ディレクトリ)/filter/lib/";
  </script>
  <script src="(ディレクトリ)/filter/lib/contentloaded.js"></script>
  <script src="(ディレクトリ)/filter/lib/cssParser.js"></script>
  <script src="(ディレクトリ)/filter/lib/css-filters-polyfill.js"></script>

あとは､CSSでの指定が適用できます｡

ただし､これが適用できるのはIE6～9だけでした｡
検証しなくてもGitHubの説明にしっかり「Not supported Browsers IE 10+」IE10以上サポート外と書いてありました｡

IEの旧バージョンを使っている人はあまりいないと思いますので､IE11を使って以下の方法で確認してみてください｡