ハシウェブ

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からダウンロードします。

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

  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制作も効率化することができます。

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