スキップしてメイン コンテンツに移動

IE8でCSS3の「background-size: cover;」対策

【About】

CSS3で採用された「background-size」ですが、「cover」は画像の縦横比を維持したまま、背景領域を完全に覆うよう背景画像を配置(大概は縦か横が切り取られる)してくれるとても素晴らしいスタイルです。
ところが残念なことにIE8では対応していません。
しかしこんな便利なスタイルをたかがIE8のためにゆずるわけには行きません。
デキる子にはベストエフォートを、デキない子には苦労をしてがんばってもらう。(ポリフィルというやつ)
その方法を以下に提案します。


【方針】

モダンブラウザでは当然CSS3の「ackground-size:cover;」を指定。
IE8では、JavaScriptで幅に応じたそれぞれの背景画像を動的に変更する。
(IE8用に複数の背景画像を用意する必要があります。)


【HTML】

<!--ヘッダーあたりで-->

<script src="/path/to/jRespond.js"></script>・・・※

・・・

<div id="myArea"></div>・・・ここに背景画像を表示

・・・


※ jRespond.js(IE8用に設置)
ブレイクポイントを指定して、ブレイクポイント毎の動作を指定できるすぐれもの
https://github.com/ten1seven/jRespond


【CSS】(モダンブラウザはこれで表示)

#myArea {

    background: url(/path/to/image/back.jpg) no-repeat center top;

    background-size: cover;

    ・・・

}

・・・



@media (min-width: 1200px) {

  #myArea {

      height:500px;

  }

}

@media (min-width: 992px) and (max-width: 1199px) {

  #myArea {

      height:400px;

  }

}

・・・



【JavaScript】(IE8はこれで対応)

$(document).ready(function () {



  //jRespond settings

  var jRes = jRespond([

  {

    ・・・

  }, {

    label: 'sm-device',

    enter: 768,

    exit: 991

  }, {

    label: 'md-device',

    enter: 992,

    exit: 1199

  }, {

    label: 'lg-device',

    enter: 1200,

    exit: 10000

  }]);



  jRes.addFunc([

  {

    breakpoint: 'lg-device',

    enter: function () {

      if (navigator.userAgent.match(/msie [8.]/i)) {

        $('#myArea').css('background-image', 'url(/path/to/image/backLg.jpg)');

      }

    },

    exit: function () {

    }



  }, {

    breakpoint: 'md-device',

    enter: function () {

      if (navigator.userAgent.match(/msie [8.]/i)) {

        $('#myArea').css('background-image', 'url(/path/to/image/backMd.jpg)');

      }

    },

    exit: function () {

    }



  },{

    ・・・

    }



  }]);

  ・・・

});



【補足】 

IE6,IE7,IE8でもCSS3のbackground-sizeプロパティをCSSハックできる
「jquery.backgroundSize.js」
http://louisremi.github.io/jquery.backgroundSize.js/demo/
というものがありますが、どうやらIE8等の場合、背景画像ではなく、imgタグに返還して表示しているようなので、試したところ表示が崩れてしまいました。
上記JSで問題なく表示できればそれの方が簡単で良いと思います。

以上

コメント

このブログの人気の投稿

iframeに異なるドメイン(クロスドメイン)のコンテンツを読み込んで高さを自動調節する方法

趣旨 iframe(親)に異なるドメインのページ(子)を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する


方法 普通にやると、
「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com".  Protocols, domains, and ports must match. 」
などと怒られてしまいますのでこちらを参考に
http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside

http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8Bjavascript


コード hoge.com(親)
<html> <head>     <title>親</title>     <script src="js/jquery.js"></script>     <script>         window.addEventListener('message', function(e) {         var iframe = $("#fugapage");         var eventName = e.data[0];         var data = e.data[1];         switch(eventName) {             case '…

WordPressのwp_get_archivesで月別リストを生成する際に<li>をカスタムする方法

【About】 WordPressの wp_get_archives('type=monthly') で月別のリスト<li>を生成する際に、特定の年月のアーカイブページを表示した際に<li>に特定のクラス(class="active"など)を設定する方法を記載します。
また、おまけとして、functions.phpによらず、テンプレートで<li>をカスタマイズする方法も記載します。

【通常の書き方】 <WordPress>ーテンプレート
<p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul>
とすると

<HTML><p>月別アーカイブ</p> <ul>     <li><a href="http://hoge.com/2013/12/">2013年12月</a></li>     <li><a href="http://hoge.com/2013/11/">2013年11月</a></li> </ul>
などと生成されます。

これを、ある月を表示しているときに、該当のリスト<li>に class="active" を追加したいとします。

【カスタマイズ方法】 <WordPress>ーテンプレート
<p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> (変更なし)

ーfunctions.php
functions.phpに以下を追加
<?php ・・・ function my_archives_link($link_html){   $my_month = '/' . get_query_var('year') . &#…

PhotoSwipeでテキストリンクから特定の画像のPhotoSwipeギャラリーを起動する方法

【PhotoSwipeとは】 スマホサイトで写真ギャラリーを設置したいときに使えるライブラリ
スワイプで画像がめくれて便利!
レスポンシブサイトの画像ギャラリーにオススメ。
(optionに、imageScaleMethod: "fitNoUpscale" とすれば画像が最大100%で表示されるのでPCサイトでも使えます。)
https://github.com/codecomputerlove/PhotoSwipe


【実現したいこと】 通常は画像サムネイルのクリック(or タップ)でPhotoswipeギャラリーを起動します。
それとは別に、新着情報などのテキストリンクから特定の画像のPhotoSwipeギャラリーを起動したい。


【方針】var instance = $("#Gallery a").photoSwipe(options); instance.show(0); で、最初のPhotoSwipeギャラリーを起動できることから、テキストリンクに任意の要素(data-swipeとする)と、クラス(.swipe-targetとする)を設置し、.swipe-targetの上から順番にdata-swipeに番号を振ってゆき、.swipe-targetがクリックされたら、data-swipeから番号xを取得し、instance.show(x)で目的のPhotoSwipeギャラリーを起動する。


【HTML】 ヘッダー(もしくはフッター)部分(jQueryバージョンを使用)<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.8.2.min.js"><\/script>')</script> <script src="/js/vendor/klass.min.js"></script> <scri…