HTML5での新要素がブラウザで認識されなかったからリセットCSSに記述を追加した

2011年1発目の記事ですね。遅ればせながらあけましておめでとうございます。
にしても、2010年って本当に365日あったんでしょうか。きっと誰か数え間違えt…(ry

さて、2011年の自分的ノルマとして、以下のようなことをを掲げておりまして。

「HTML5ですらすらマークアップ」

まずは自分用とか自社用のサイトから徐々にHTML5のマークアップに切り替えていこうかなと思っております。
html5.js使えばIEでもそれなりにいけるみたいですし。

ところが、簡単にマークアップしてブラウザチェックした時に、

「あれ?IE以外も新要素認識してないじゃんsad

HTML5の新要素が、WebKit以外のブラウザで認識されてない!

とりあえずFirefoxの3.6.13でチェックしたら、あてたはずのスタイルがなーんも効いていませんでした。

スタイルが効いてない!

スタイルが効いてない!

<header>、<nav>、<section>って感じでマークアップして、それぞれにとりあえず背景をつけてみたのだけど、ぜーんぜん何の変化もなし。

あれー、FxもOperaももうHTML5実装してるはずなんだけどなーおかしいなー。。。。

って、少し悩んで、はたと気づきました。

リセット用のCSSに、新要素のデフォルトスタイルをあててやる

ハイ。今までの自分用デフォルトCSSをそのまんま使っていたため、CSSでHTML5の新要素をどう扱うかという指定がなされていませんでした。

そこで、いつも使っているdefault.cssに以下の指定を追記しました。

[css]
article, aside, canvas, details, figcaption, figure, header,
footer, hgroup, menu, nav, section, summary {
display: block;
}
[/css]

スタイルがあたりました

これで、ちゃんと新要素にスタイルが適用されました。
上記のHTML5新要素を、ブロック要素として扱えるようにしてやるのです。
かんたんですねーwink

ちなみに、html5.jsの力を借りて、InternetExplorer6,7,8でも同様の結果が得られました。
IEの条件分岐コメントタグを使って、IEのバージョンが9未満の時にhtml5.jsを読み込むようにしてやるだけです。

手軽にサクッとやりたいなら、以下のコードをhead内にコピペしてGoogleCodeにホスティングされてるやつを使えばok

[html]
<!–[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
[/html]

これならすぐに使っていけそうな気がします。

あ、もちろんIEかつJavaScriptがOFFの環境では新要素+CSSが全く適用されませんのでご注意を。
ただ、JavaScript OFF環境の割合を考慮すると(一説には2%程度?)、そろそろ通常案件でもHTML5で書いていってもいいかもしれませんねー。

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売しました。2年経ちますのでもう賞味期限切れだとは思いますが、一応実績として...

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索