HTML5.1 新要素＜picture＞をIE11にも対応させる！！
|
Web制作のこと
前回の記事 HTML5.1 新要素＜picture＞が便利！！にてpictureタグの使い方について書きましたが、
やっぱり対応してないブラウザがあると実践的ではないなと思いまして、今回の記事ではIE11などの非対応のブラウザにもJSを噛ませて対応させる方法を書いていきたいと思います。
使用するJSを下記のURLよりダウンロードしてください。
ダウンロードしたフォルダから「picturefill.js」もしくは圧縮された「picturefill.min.js」のどちらかを自分のサイトの「js」フォルダなどに格納します。
使い方というほどでもないのですが、ダウンロードしたpicturefill.jsをヘッダ内へ記述します。
例としては下記のような記述になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/picturefill.js"></script><!-- ※ディレクトリは任意です --> </head> <body> <picture> <source media="(max-width: 480px)" srcset="https://placehold.jp/320x150.png"><!-- 画面サイズ480px以下 --> <source media="(max-width: 768px)" srcset="https://placehold.jp/480x150.png"><!-- 画面サイズ768px以下 --> <source media="(max-width: 992px)" srcset="https://placehold.jp/768x150.png"><!-- 画面サイズ992px以下 --> <source srcset="ttps://placehold.jp/992x150.png"><!-- 画面サイズ993px以上 --> <img src="https://placehold.jp/1200x150.png" alt=""><!-- ブラウザ非対応時に表示する画像 --> </picture> </body> </html> |
picturefill.jsを読み込ませるとpictureタグに対応していないIE11などのブラウザでも、ほぼ同じ動作を実現することが可能です。
とても簡単に対応させることが可能ですので、是非試してみて下さい！！
