Movable Type 備忘録

 Conditional-CSS

  • Aug132008
  • Vote:
    http://bizcaz.com/archives/2008/08/13-102923.php
  • Categories: Tools
  • Tags:
  • Social Bookmark

こんにちわ^^

IE には独自仕様として、Conditional Comments( 条件付コメント )というものをサポートしてますね。コメントで囲った部分の表示を IE のバージョンによって使い分けることができるというものです。
要するに IE が正しく CSS を認識できない為、Conditional Comments を使ってブラウザを識別することで CSS を使い分けしたりします。IE ハックを使わず Conditional Comments を使う用推奨されてるようですけど。

Conditional Comments は基本的にテンプレート内で使用しますが、コリスさんとこでご紹介されてる Conditional-CSS はスタイルシート内でブラウザを識別することが可能なようです。

使い方を見ると、IE だけじゃなく、他のモダンブラウザも識別することができるようです。

以下にチョビッとサンプルを記します。

Conditional-CSS / サンプル

  1. [if IE].container {
  2.     height: 100%;
  3.     width: 100%;
  4.     text-align: center;
  5.     line-height: 2em;
  6.     
  7.     [if IE 7]background: url('ie7.png') no-repeat center center;
  8.     [if lte IE 6]background: url('ie.jpg') no-repeat center center;
  9. }
  10. [if Opera].container {
  11.     position: absolute;
  12.     top: 50%;
  13.     height: 60px;
  14.     width: 100%;
  15.     margin-top: -100px;
  16.     padding-top: 140px;
  17.     
  18.     background: url('opera.png') no-repeat center 10px;
  19.     background-color: #ccc;
  20. }
  21.  
  22. [if Gecko].container {
  23.     position: absolute;
  24.     top: 0;
  25.     left: 50%;
  26.     height: 100%;
  27.     width: 300px;
  28.     margin-left: -150px;
  29.     
  30.     font-size: 32px;
  31.     line-height: 2em;
  32.     
  33.     background: url('moz.png') no-repeat center center;
  34.     background-color: #ddddff;
  35. }

青字のようにクラスを丸ごと条件付きにすることも、赤字のように要素ごとに条件付きにすることもできるようです。
使える条件式は以下のページで説明されてます。

3 つのフォーマットに対応されてるようですが、スタンダードなのは PHP になるのかな。
C や C#( これよく知らない )ってのはコンパイルが必要みたい。

帰宅したら試してみます。
※これから「ホートン　ふしぎな世界のダレダーレ」観に行ってきます (つω-`｡)

  • Related Entries

 Trackback Pings(1)

from ウェブサイトの技術っておもしろいよね

Conditional-CSS - CSSでもIF文が使える！

Tracked on October 9, 2008

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード