[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr

Post on:2013年1月31日

sponsorsr

IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。

Conditionizr

Conditionizrの特徴
Conditionizrの使い方

Conditionizrの特徴

ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。

条件付きのHTMLタグ
条件付きの外部スクリプトやスタイルシートのロード
カスタマイズされたスクリプトにも対応
IE, Firefox, Chrome, Safari, Operaの主要ブラウザに対応
IEは6/7/8/9/10の各バージョンごとに分岐可
Win, Mac , Linuxの分岐可
Retinaディスプレイ用のclassや外部ファイルのロードも対応
実装はマークアップに影響無し
クロスブラウザ用のclassを用意
OS用にもclassを用意
フレキシブルなローディングシステム
Modernizr互換

スクリプトとは関係ないのですが、ページの下の方にあるスクロールバーで表示されるテキストコンテンツがかっこいいです。

白いエリア、通常は狭い状態

コンテンツにフォーカスすると、領域を広げます。

フォーカスで広い状態

Conditionizrの使い方

Conditionizrのセットアップは簡単です。

Step 1: 外部ファイル

head内に当スクリプトを外部ファイルとして記述します。

<script src="js/conditionizr.js"></script>

Step 2: 利用する条件分岐を定義

利用する条件分岐を「conditionizr()」を定義します。
各項目のscript, styles, classは、スクリプトのロード、スタイルシートのロード、classの使用で、falseや指定無しだと利用できなくなります。

	<script>
		conditionizr({
			debug      : true,
			scriptSrc  : 'js/conditionizr/',
			styleSrc   : 'css/conditionizr/',
			ieLessThan : { active: true, version: '9', scripts: true, styles: true, classes: true, customScript: 'none'},
			chrome     : { scripts: true, styles: true, classes: true, customScript: 'none' },
			safari     : { scripts: true, styles: true, classes: true, customScript: 'none' },
			opera      : { scripts: true, styles: true, classes: true, customScript: 'none' },
			firefox    : { scripts: true, styles: true, classes: true, customScript: 'none' },
			ie10       : { scripts: true, styles: true, classes: true, customScript: 'none' },
			ie9        : { scripts: true, styles: true, classes: true, customScript: 'none' },
			ie8        : { scripts: true, styles: true, classes: true, customScript: 'none' },
			ie7        : { scripts: true, styles: true, classes: true, customScript: 'none' },
			ie6        : { scripts: true, styles: true, classes: true, customScript: 'none' },
			retina     : { scripts: true, styles: true, classes: true, customScript: 'none' },
			mac    : true,
			win    : true,
			x11    : true,
			linux  : true
		});
	</script>

Step 3: 実際に使ってみる

HTMLにclassで利用する際は、下記のように簡単に利用できます。
例えば、IE7とChrome用だと、こんな感じに。

<!-- for IE7 -->
<html class="ie ie7">

<!-- for Chrome -->
<html class="chrome">

Chromeだけスタイルシートファイルをロードさせる時は、下記のように利用します。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>for Chrome</title>
	<script src="js/conditionizr.js"></script>
	<script>
conditionizr({
	styleSrc   : 'css/conditionizr/',
	chrome     : { scripts: true, styles: true, classes: true, customScript: 'none' }
});
</script>
	<link href="style.css" rel="stylesheet"> // 全ブラウザでロード
	<link href="chrome.css" rel="stylesheet"> // Chromeのみロード
</head>

「chrome.css」は「styleSrc」で指定した場所に格納します。
css/conditionizr/chrome.cssに、./chrome.cssではありません。