chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2014/11/17

[jQuery]IE8でCSS3のbackground-size:coverを扱う

IE8の対応はまだ切り捨てるわけにはいかず、最近よく使用するCSS3のbackground-size:cover;を擬似的に扱う事が出来るjQueryプラグイン「jquery.backgroundcover」をご紹介致します。ライセンスはMITライセンスとなっております。

全画面やwidth:100%での背景画像

最近のデザインでフルスクリーンで背景画像をいっぱいまで表示するものが多い印象です。

その際、コーディングではCSS3のbackground-size:cover;をよく使われると思います。

ですが、IE8ではCSS3に対応していないので非常に困りますw

まだ日本ではIE8のシェアはそれなりにあるため、IE8を切り捨てるという選択は中々難しいです。

私が働いている会社では少なくともIE8は当分サポートです。。。なかなか実装面で厳しいものも多くなってきました;;

backgroundSize.js

以前は、「backgroundSize.js」というものを使用してIE8のカバーをしていましたが、このプラグインに脆弱性かエラー等で

DEPRECATED(非推奨)となってしまいました。また実際にIE8でリサイズ等をした時にfunctionエラーが発生し、使用するのは危険です。

「backgroundSize.js」の作者が次なるバージョン「background-size-polyfill」なるものを作成してしております。

こちらは.htcファイルを使い、background-sizeを使えるようにしているようです。

backgroundcover

htcファイルではローカルでのチェックなどが面倒なので、jQueryで動作する代わりのものを探していました。

で今回ご紹介するのが「jquery.backgroundcover」です!

IE8の場合は、imgタグで置き換えて動作します。

また、background-imageでも、自動的に読み込んでimgタグに吐き出してくれマス。

IEの条件付きコメントアウトハックなどでIE8以下などにスクリプトを掛けてよく使っています!

使用方法

jQueryの読み込み/コード

<script src="common/js/jquery-1.9.1.min.js"></script>
<script src="common/js/jquery.backgroundcover.js"></script>
$(function(){
 $('.background').backgroundcover({
 safearea: "10%,50%,10%,10%"
 });
});

HTMLはこちら

<div class="background"></div>

CSS

.background {
  width: 100%;
  height: 300px
  background: url(1100x400.png) left top no-repeat;
  background-size: cover;
}

デモ

実際に使用しているデモを作ってみました。

よかったらIE8などで試してみてください。

DEMO

ライセンス

ライセンスはMITライセンスです。

 

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加