そんな中、このブログはHTML5で書いてます。
と、言っても少しずつ勉強したものをこのブログに反映させているだけなので、いろいろとチグハグなところがたくさんあるのですが。
改編していく中で、これは重要だなと思うところを今日はまとめて書いていきたいと思います。
Chrome Frame でレンダリングさせる
このブログは、私個人で好きに書いているのでInternet Explorerそれぞれのバージョンに的確に対応とか全然考えてなく、むしろあまり考えて。。。 いやいや、頑張って作ったのだからきちんと思いが伝わるようなモノにしないといけないなと思っています。
ということで、表題のChrome Frame でレンダリングさせるです。
|
|
<IfModule mod_setenvif.c> <IfModule mod_headers.c> BrowserMatch chromeframe gcf Header append X-UA-Compatible "chrome=1" env=gcf </IfModule> </IfModule> |
下記の内容を、head内に記述します。
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> |
これで、もし Chrome Frame がインストールされていれば、そのページは Chrome Frame でレンダリングされます。
Chrome Frame がインストールされていない場合は、ページが正常に見れなくなってしまったりしますので、Chrome Frame をインストールしてもらうよう促します。それが、下記の記述になります。
|
|
<!--[if lt IE 8 ]> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> <script type="text/javascript">window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'});});</script> <![endif]--> |
これを＜body＞直下に記述します。
IE8 未満であれば、Chrome Frame がインストールされているかどうかを判別し、もしされていなければインストールを促すダイアログを表示します。
CSSハックを使わない
以下の記載をすることにより、特定のIEに対するCSSの修正に、ハックを使う必要がなくなります。
|
|
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="ja"> <![endif]--> <!--[if IE 7]> <html class="no-js ie7 oldie" lang="ja"> <![endif]--> <!--[if IE 8]> <html class="no-js ie8 oldie" lang="ja"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]--> |
これを書く事によりどうなるかと言うと、IE6のときは、＜html class="ie6"＞
IE7のときは、＜html class="ie7"＞
が有効になります。
たとえば、今まで次のようなスターハックでCSSを修正していたところを
|
|
.hoge { margin-top: 10px; *margin-top: 5px; } |
次のように指定することができます。
|
|
.hoge {margin-top: 10px; } .ie6 .hoge { margin-top: 5px; } |
※ class="no-js oldie"のclassは、プログレッシブエンハンスメントを実現する modernizr.js と連動して動作します。
プログレッシブエンハンスメント とは 「どのユーザーにも同じように情報コンテンツを提供しますが、環境が整っているユーザー（モダンブラウザ利用者）には、よりリッチな見せ方でコンテンツを提供しましょう」という考え方です。
レスポンシブなデザインにする
このブログをレスポンシブにしてみました。 （※ モバイルには対応させておりません。）
作成の際には、一応いろいろなブラウザで確認したりするのですが、FireFoxとChromeでの表示に少し違いがあるのに気がついたのですが というのもこれまで小数点を使うということをしてこなかったのですが、今回レスポンシブという事で、いろいろな箇所にに小数点を使ってみたのです。
どうしてだろうと思っていろいろと調べてみたら、各ブラウザの小数点以下のピクセル値の扱いが違うということが分かりましたので、その際参考にさせていただいたサイトをご紹介したいと思います。
Rriver
いやはや、出だしだけでもこれだけの事があるんですね。おそるべし【HTML5】
まだまだ、sectionやaside、articleなどなどのことなどもあるのですけどね。。 またつづきはWEBで。。
