これは便利！ブラウザ/レンダリングエンジンごとのCSS設定をJavaScriptで解決する「CssUserAgent」
CssUserAgentはJavaScriptを使ってブラウザ/レンダリングエンジンごとのクラス定義を生成する。
[/s2If]
CssUserAgentはJavaScript製/Web用のオープンソース・ソフトウェア。CSSは便利だが、ブラウザによって指定が異なってしまうケースに対応しようと思うと途端に煩雑になってしまう。特にここ数年のようにWebブラウザの種類が増えると大変だ。
このようなクラスが定義される
レンダリングエンジンで考えても数多く、さらにバージョンによってレンダリング結果が異なるとなると発狂しそうになってしまうほどだ。そんな苦しむWebデザイナーの方々を救うかもしれないのがCssUserAgentだ。
CssUserAgentはua-*というクラス名を自動的に定義するJavaScriptファイルだ。「ua-（ブラウザ名）」「ua-（ブラウザ名）-（メジャー番号）」「ua-（ブラウザ名）-（メジャー番号）-（マイナー番号）」「ua-（ブラウザ名）-（メジャー番号）-（マイナー番号）-（ビルド番号）」「ua-（ブラウザ名）-（メジャー番号）-（マイナー番号）-（ビルド番号）-（リビジョン）」と定義し、HTMLタグに対して追加する。
結果、このように定義できる
例えばGoogle Chrome 8.0.552.231であればua-chrome-8-0-552-231といったクラス名が最長になる。さらにレンダリングエンジンごととしてua-webkitというクラス名も利用できる。同様にモバイルか否かの判断にも利用できるJavaScriptオブジェクトも定義される（cssua.userAgent.mobileがtrueになる）。
もちろん全てのクラスを使う必要はない。だが詳細にも設定できるというのはニッチなニーズにも的確に対応できるということだ。CSSハック的な技法も使われていないのでクリーンだ。対応ブラウザはMozilla系/IE/Safari/Google Chrome/Opera/iCabと幅広く利用できる。
多数のブラウザ、レンダリングエンジンに幅広く対応する（プレミアム限定）
[/s2If] [s2If !current_user_can(access_s2member_level1)]
MOONGIFTは読者の皆さまのサポートによって運営されています。ぜひプレミアム登録お願いします！月 額500円の他、半年（3,000円）、年間パック（6,000円）もあります。！ プレミアムユーザのログインはこちらから
[/s2If]
MOONGIFTはこう見る
HTMLヘッダなどでブラウザ指定をすることが多いが、あれを繰り返すとデザインと構造テキストの分離が難しくなり、管理が煩雑になってしまう。CssUserAgentであればクラス名としてブラウザ名、レンダリングエンジン名が使えるのでデザイン側で全て制御できるようになる。
さらにJavaScript側でもcssuaオブジェクトを使って処理判定ができるのでブラウザごとの処理分けも容易になるはずだ。使いどころの多そうなライブラリだ。
[/s2If]