Conditional Selector
コンディショナルセレクタは、html.className に【jsが使えるか】【先進的なブラウザか】【メジャーなブラウザか】【どのブラウザか】【どのOSか】といった情報を設定します。
約半年前に作成したものをベースに色々と修正しました。
uu.consel.js // Conditional Selector // // <style> // div>ul { color: black } /* for Generic browser */ // html.ifwebkit div>ul { color: blue } /* for Safari, Chrome, iPhone */ // html.ifadv div>ul { color: red } /* for Safari4, Chrome2, Firefox3.5, Opera10.50 */ // html.ifnoadv div>ul { color: green } /* for IE, Opera10, Firefox3 */ // </style> // <html class="ifnojs addua addos"> // default -> ifjs ifadv ifmajor // "addua" -> ifie ifie6 ifie7 ifie8 ifie67 ifopera ifgecko ifwebkit ifiphone ifadv ifmajor // "addos" -> ifwin ifnomac ifnounix // (function(ver, html) { var cn = html.className, v, i = 0, ary = [cn.replace(/ifnojs|addua|addos/g, ""), "ifjs"], id = "adv,major", ua = ",ie,ie6,ie7,ie8,ie67,opera,gecko,webkit,iphone", os = ",win,mac,unix"; /addua/.test(cn) && (id += ua); /addos/.test(cn) && (id += os); id = id.split(","); while ( (v = id[i++]) ) { ary.push((ver[v] ? "if" : "ifno") + v); } // <html class="..."> modify /ifnojs/.test(cn) && (html.className = ary.join(" ").trim()); })(uu.ver, uu.html());
使いかた
<!doctype html><html class="ifnojs"><head><meta charset="UTF-8" /> <title></title> <script src="uupaa.js"></script> </head><body></body></html>
の、<html class="ifnojs"> の部分が <html class="ifjs ifadv ifmajor"> といったように変化します。
class="ifnojs" が設定されていなければ何もしません。
デモ
http://pigs.sourceforge.jp/blog/20100101/consel.htm
# altcss(uu.css3)を組み込んでいないため、CSSセレクタ的に IE6 だと動きません。
ブラウザの情報 や OSの情報 がほしければ
<!doctype html><html class="ifnojs addua addos"><head><meta charset="UTF-8" />
とすると、<html class="ifnojs addua addos"> を以下のように変更します。
IE6 ifjs ifnoadv ifmajor ifie ifie6 ifnoie7 ifnoie8 ifie67 ifnoopera ifnogecko ifnowebkit ifnoiphone ifwin ifnomac ifnounix IE7 ifjs ifnoadv ifmajor ifie ifnoie6 ifie7 ifnoie8 ifie67 ifnoopera ifnogecko ifnowebkit ifnoiphone ifwin ifnomac ifnounix IE8 ifjs ifnoadv ifmajor ifie ifnoie6 ifnoie7 ifie8 ifnoie67 ifnoopera ifnogecko ifnowebkit ifnoiphone ifwin ifnomac ifnounix Chrome4 ifjs ifadv ifmajor ifnoie ifnoie6 ifnoie7 ifnoie8 ifnoie67 ifnoopera ifnogecko ifwebkit ifnoiphone ifwin ifnomac ifnounix Safari3.2 ifjs ifnoadv ifmajor ifnoie ifnoie6 ifnoie7 ifnoie8 ifnoie67 ifnoopera ifnogecko ifwebkit ifnoiphone ifwin ifnomac ifnounix Safari4 ifjs ifadv ifmajor ifnoie ifnoie6 ifnoie7 ifnoie8 ifnoie67 ifnoopera ifnogecko ifwebkit ifnoiphone ifwin ifnomac ifnounix iPhone3.1.2 ifjs ifadv ifmajor ifnoie ifnoie6 ifnoie7 ifnoie8 ifnoie67 ifnoopera ifnogecko ifwebkit ifiphone ifnowin ifmac ifnounix Firefox2.0 ifjs ifnoadv ifnomajor ifnoie ifnoie6 ifnoie7 ifnoie8 ifnoie67 ifnoopera ifgecko ifnowebkit ifnoiphone ifwin ifnomac ifnounix Firefox3.5 ifjs ifadv ifmajor ifnoie ifnoie6 ifnoie7 ifnoie8 ifnoie67 ifnoopera ifgecko ifnowebkit ifnoiphone ifwin ifnomac ifnounix Opera10.10 ifjs ifnoadv ifmajor ifnoie ifnoie6 ifnoie7 ifnoie8 ifnoie67 ifopera ifnogecko ifnowebkit ifnoiphone ifwin ifnomac ifnounix Opera10.50 ifjs ifadv ifmajor ifnoie ifnoie6 ifnoie7 ifnoie8 ifnoie67 ifopera ifnogecko ifnowebkit ifnoiphone ifwin ifnomac ifnounix
addua や addos は省略可能です。
追加される class の一覧
| IDENT | SWITCH | CONDITION |
| "ifjs" | ifnojs | Enable JavaScript |
| "ifadv" | ifnojs | Advanced browsers: Firefox3.5+, Safari4+, Chrome2+, Opera10.50+ |
| "ifmajor" | ifnojs | Major/Majority browsers: IE6+, Opera9.5+, Firefox3+, Safari3.1+, Chrome |
| "ifie" | addua | IE6, IE7, IE8 |
| "ifie6" | addua | IE6 |
| "ifie7" | addua | IE7 |
| "ifie8" | addua | IE8 |
| "ifie67" | addua | IE6, IE7 |
| "ifopera" | addua | Opera9.5+ |
| "ifgecko" | addua | Firefox3+ |
| "ifwebkit" | addua | Safari3.1+, Chrome, iPhone, iPod |
| "ifiphone" | addua | iPhone, iPod |
| "ifwin" | addos | Windows OS |
| "ifmac" | addos | Mac, Mac OS X |
| "ifunix" | addos | Unix like OS, Linux, FreeBSD, SunOS |
| "ifnojs" | ifnojs | Disable JavaScript |
| "ifnoadv" | ifnojs | Classic browsers: IE, Firefox＜3.5, Safari＜4.0, Opera＜10.50 |
| "ifnomajor" | ifnojs | Minor/Minority browsers: IE＜6, Firefox＜3, Safari＜3.1, Opera＜9.5 |
| "ifnoie" | addua | !(IE6, IE7, IE8) |
| "ifnoie6" | addua | !IE6 |
| "ifnoie7" | addua | !IE7 |
| "ifnoie8" | addua | !IE8 |
| "ifnoie67" | addua | !(IE6, IE7) |
| "ifnoopera" | addua | !(Opera9.5+) |
| "ifnogecko" | addua | !(Firefox3+) |
| "ifnowebkit" | addua | !(Safari3.1+, Chrome, iPhone, iPod) |
| "ifnoiphone" | addua | !(iPhone, iPod) |
| "ifnowin" | addos | !(Windows OS) |
| "ifnomac" | addos | !(Mac, Mac OS X) |
| "ifnounix" | addos | !(Unix like OS, Linux, FreeBSD, SunOS) |
問題が無ければ次回のリリースから利用可能になります。
