2010/08/14
js | CSSをスッキリ読みやすく
PCだけでも手間がかかり、スマートフォンでも見れるようにとか考えていると、ハック混ざりで使うCSSは本当に再利用しづらい。スタイルシートの可読性を上げるためにこういうのはどうでしょうか
iPhone → <body id="Body" class="Webkit iPhone"></body>
Android → <body id="Body" class="Webkit Android"></body>
IE8 → <body id="Body" class="IE IE8"></body>
IE6 → <body id="Body" class="IE ClassicIE IE6"></body>
FireFox → <body id="Body" class="Gecko"></body>
上記みたいに HTML のボディ要素に js でスタイルを追加してると css がスッキリ。
.nodeStyle {
/*IE8含むモダンブラウザ向け*/
}
.Webkit .nodeStyle {
/*スマートフォン向けに拡張、CSS3*/
}
.Android .nodeStyle {
/*Android 向けにゴニョゴニョ*/
}
.ClassicIE .nodeStyle {
/*IE5,6,7 下位調整*/
}
コピペソース
// 要 prototype.js
var browser = [];
if(Prototype.Browser.IE){
browser.push("IE");
//http://msdn.microsoft.com/ja-jp/library/cc288325(VS.85).aspx
if(document.documentMode){//IE8
if(document.documentMode<8) browser.push('ClassicIE');
browser.push('IE'+document.documentMode);
}else{
browser.push('ClassicIE');
if (document.compatMode){//IE>=6
if (document.compatMode == "CSS1Compat"){
browser.push('IE7');
}else{
browser.push('IE6');
}
}else{
browser.push('IE5');
}
}
}else if(Prototype.Browser.WebKit){
browser.push('WebKit');
if(navigator.userAgent.search(/iPhone/) != -1 ) browser.push('iPhone');
if(navigator.userAgent.search(/iPad/) != -1 ) browser.push('iPad');
if(navigator.userAgent.search(/iPod/) != -1 ) browser.push('iPod');
if(navigator.userAgent.search(/Android/) != -1 ) browser.push('Android');
}else if(Prototype.Browser.Gecko){
browser.push('Gecko');
}
if(browser.length>0) $('Body').className = browser.join(' ');