The Trap of Web Design

第2回コーディングコンテストがあり、HTML5 についてはあんまり知らないままだから、仕事の合間に訓練がてらやってみることにしました。

CSS3 についてはすでに結構使っちゃってるものもありますが、普段は互換考えてほとんど使わないでいるものも、せっかくなので（IE 互換処理は考えなくても良いらしい）ひっぱりだして使ってみてます。

---

ですが、CSS3 のせっかくだからと使おうと思った先行実装モノ、情報としては対応しているとか書いているのが見つかるのに、思うように反映してくれません。仕様書に書いてある意味は理解してるつもりなんですが、その取り方が間違ってるのか、対応してるという情報が間違いなのか、なにしろ実装してるサイトが無く、記述が間違ってるのかどうなのか、分からんのです。

Multi Column なんですが、カラム自体はできるんですが、-webkit-column-break-inside とか -webkit-column-break-after とかが効きません。ありとあらゆる状況、HTML 側を変更するとか、設定を変えるとか、なんか、コレだけで数日間やってたんですがダメですな。

で、ソレが効かないとなると、Multi Column ではない別のスタイル指定を使うか、あるいは、HTML 側を変えなくちゃなりません。だいたい、コレが使えるってことで、ソースがとても単純になってますから、文書の構造的にはあっていても、そのカラム生成のために要素の追加が必要になるんで、とても残念な思いをします。

CSS3 の先行実装に関しては、例えば、box-shadow や background-image の複数利用、はたまたグラデーション処理なんかは面白いですな。適切な記述をすれば、効果反映はせずとも、IE 互換、後方互換は保てるので、サイトによっては、今後バンバン使います。そういう、遅れてる（某）ブラウザで対応していなくても、進んでるブラウザの新しい機能を使うことを Progressive Enhancement というらしいですな。

html5 については、新しいブロックレベル要素をうまく使うと、div がまた減る事になりますが、いろいろやってみてる現状況で、こうゆうのがあるなら、こんなのがあってもいいのにな、まだ足りないぞ、と思う箇所がありました。section や aside 、article なんかには原則として、その最初の要素は見出しでなくちゃならんみたいですが、一般的な見た目レイアウト処理を考えたら、見出しナシのブロックでこれらと同一レベルのブロックがないと、バランスがとれなくなる状況が多く、そうなると、div をいれるか、CSS 側で必要な箇所のみ、上位レベルとそのブロックとの関係の時のみの指定をいれなくちゃならなかったりして、ちょいとメンテナンスがしずらくなります。（文章でうまく書けないんですが）

さて、そんなこんなで、対応状況やナンヤカヤで、HTML5 や CSS3 の周辺、そろそろ動きだしてるみたいなんで、今後はそういった話が増えそうです。

第2回コーディングコンテストの締め切りまではまだ時間があるんで、普段はどうでも良いぞ、というトコまで精査して仕上げようとと思います。