Topics

未だエンタープライズはIE6が残るという事実

久しぶりのポストです。
今ちょっと新サイトの制作を進めているんですが、「IE6に対応せよ」とのこと。
新規のサイトの立ち上げでまさかとは思ったんですが、対応しなきゃいけないみたいなんです。
もちろん、イントラ向けのウェブシステムとかではなくって、企業サイトです。

多くの大手企業のサイトが気が付けばIE6対応をしなくなってきています。
社内の閲覧環境がIE6なんだということなんですが、IE6はすでにサポートが終了していますし、IE6ということはWindowsXP環境ということ（ひょっとしたらWindows2000とか、NTとかかもしれない！）でしょうが、そのXPも来年の4月にはサポートが終了します。

しかし、なんでそうなっちゃったんでしょうかね？
何となくそのわけはわからないでもないですね。クライアントはだれでも知っているような大手さんです。

でIE6対応するとしてマークアップはどうするか？

で、マークアップはどうしようと思いました。
いくつか選択肢はありますね。どれも正解とも不正解とも言いにくいですし、どれが妥当かというのはちょっとデリケートな問題です。

1. HTML4.0またはXHTML1.0で記述、CSSはIE6がサポートする範囲に限定する。
2. HTML5で記述して要素はIE6（6～8）がサポートするものに限定する。
3. JSでIE6でもHTML5で追加された要素を扱えるようにする。
4. 上記に加えCSS3のプロパティも一部利用できるようにJSでカバーする。
5. 仕事自体断る。

いやあ、もう気持ち的には5番です。IE6なんて見たくもない。
ですがそうも言っていられないので、どの方法を採用するか、ちょっと考えました。というか悩みました。

当初は1で行くつもりでした。何もHTML5だけがイイモンでHTML4やXHTML1.0などがワルモンというわけではないですし、そもそもHTML5自体は現時点で正式勧告されていないので、そんなにこだわる必要はないですから。
それに何と言っても1の方法に関しては経験も多く、あらかた起きそうなバグや、ブロックの組み上げ方法なんかも、デザインを見れば、マークアップは見通せます。

頂いたデザインも非常にシンプルなもので、特にCSS3のプロパティを使用しなければならないグラデーションや角丸、ドロップシャドーなんかもないので、おそらく妥当といえば1が一番妥当かなと思いました。

結局4にする

なんですが、結局4にしました。
理由は「とはいえ、もうこの客様でもIE6は終わるだろう」というのが一つ。というか全てで、やはり、デザインがシンプルなので逆にHTML5でかなりセマンティックなマークアップができるきれいな構造だったので余計にそう思ったのかもしれないです。

スクリプトはhtml5shivとIE9.jsを使いました。

本題なんですが

で、リセットCSSどうしよう。と思いまして、YUIのreset.cssやHTML5 Doctor CSS Resetをこねくり回して、いつも自分が使っているものとマージ、上記JSとの組み合わせで、「自分的にちょっとよさげなリセットCSS」を作ってみたしだいです。

/* INITIALIZE
2013.11.10 Reset CSS including HTML5 tags (with box-sizing to border-box)
Masayuki Fukumoto (OSSI Inc.)
==================================================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video{margin:0;padding:0; border:0; font-size:100%; background:transparent; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:''; content:none;}
pre,code,kbd,samp{font-family:monospace,monospace; font-size:inherit;}
table{border-collapse:collapse; border-spacing:0;}
img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal; font-weight:normal;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal}
sup{vertical-align:text-top; font-size:75%;}
sub{vertical-align:text-bottom; font-size:75%;}
input,textarea,select{font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{outline:none;}
audio:not([controls]){display:none;}
time{display:inline;}
[hidden]{display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}