[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS

ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。

Conditional-CSS
デモ

デモ画面にIE, Fx, Op, Safariの各ブラウザでアクセスすると、それぞれ用の画像が表示されます。

条件式に利用できるものは、下記のようになっています。

• browser
  • IE – Internet Explorer
  • Gecko – Gecko based browsers (Firefox, Camino etc)
  • Webkit – Webkit based browsers (Safari, Shiira etc)
  • Opera – Opera’s browser
  • IEMac – Internet Explorer for the Mac
  • Konq – Konqueror
  • IEmob – IE mobile
  • PSP – Playstation Portable
  • NetF – Net Front
• version
• condition
  • lt – Less than
  • lte – Less than or equal to
  • eq – Equal to
  • gte – Greater than or equal to
  • gt – Greater then

Conditional-CSSのフォーマットは、PHP, C, C#の３種類から選択することができます。
以下、簡単な利用方法の説明です。

1. ページの右側「Compiler」の「1.Choose your server platform」から、フォーマットをPHP, C, C#の３種類から選択します。
2. 「2.Enter the files you wish to include」の欄には、インクルードするCSSのファイル名を記入します。
   複数のファイルをインクルードする場合は、プラスのアイコンをクリックして入力欄を増やします。後で編集することもできるので、ファイル名は空欄でも構いません。
3. 「3.Information」はオプションで、編集者とコピーライトを記入します。
4. 「Go」ボタンをクリックすると、選択したフォーマットのConditional-CSSがダウンロードできます。

PHPで利用する場合は、下記のような記述になります。

@import "c-css.php";

Post on:2008年8月12日