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

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

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#の3種類から選択することができます。
以下、簡単な利用方法の説明です。

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

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

top of page

©2017 coliss