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

Post on:2013年1月31日

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

サイトのキャプチャ

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ではありません。

sponsors

top of page

©2024 coliss