[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";