ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

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

【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を使うことができます。

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

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 - GitHub - Schepp/CSS-Filters-Polyfill: This po...

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を使って以下の方法で確認してみてください。

  1. 右クリック
  2. 要素の検査
  3. エミュレーション
  4. ドキュメントモード
  5. 数字を選択する

最後の数字がIEのバージョンで、これによりIE11を旧バージョンとして使うことができます

filterのデモ

その他のpolyfillを使えばIE11でも使える便利CSSは、こちらの記事にまとめています。

IEでも使いたい!polyfillを使えばIE11でも使える便利CSS 4選 + 1

IEでも便利なCSSを使いたいですか?この記事では、IE11に対応していないobject-fit、position:sticky;、CSS変数など、polyfillというJavaScriptを使ってIE11に対応させることができるCSSをまとめています。ぜひご覧ください。

まとめ

filterの使い方を解説しました。

  • filterを使うことで画像にグラフィック効果を使うことができる
  • polyfillを使ってもIE11対応はできない
  • IEサポートをしないWebサイトでないと実質使うことができない

filterを使うことで、画像編集ソフトを使うことなく、画像にグラフィック効果を使うことができ、より柔軟なWebサイトをつくることができます。また、Web制作も効率化することができます。

以下のサイトを参考にさせていただきました。