transitive.info

CSS3 を使ってみる

IE8 で javascript を使って Media Queries を使う

Media Queries という CSS3 の機能を使うとブラウザのウィンドウサイズによって スタイルを変えることができる。

@media screen and (min-width: 900px) {
  ...
}

@media screen and (min-width: 600px) and (max-width: 900px) {
  ...
}

のように使う。Firefox や Chrome ならば対応しているのだが IE8 は対応していないので javascript を読み込む必要がある。 http://code.google.com/p/css3-mediaqueries-js/ からリンクをたどって css3-mediaqueries.js をダウンロードして head タグの間に

<!--[if lt IE 9]>
<script src="/file/js/css3-mediaqueries.js"></script>
<![endif]-->

を書き、javascript を読み込ませれば良い。 上の if 文は、IE 専用で他のブラウザでは無視されるようだ。

ボックスの計算の仕方を box-sizing で変える

width に padding と border を含めるかどうかを box-sizing を使うと変更することができる。 各ブラウザのプロパティを使って

#main, #sidebar, #sidebar2 {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

のように指定する。

グラデーションをつける（linear-gradient）

IE8 だと対応していないが、background プロパティに linear-gradient を指定すると グラデーションをつけられる。

#copyright {
  background: -moz-linear-gradient(290deg, #e55900, #ff9933 85%, #e55900);
  background: -webkit-linear-gradient(290deg, #e55900, #ff9933 85%, #e55900);
  background: -o-linear-gradient(290deg, #e55900, #ff9933 85%, #e55900);
  background: linear-gradient(290deg, #e55900, #ff9933 85%, #e55900);
}

display: box で 3 コラムにする

Firefox と Chrome だとそれぞれ -moz-box、-webkit-box を display に指定する ことができるのだが、Firefox の解釈が微妙で 同じ表示にならないので使用するのはやめた。

#boxes {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
}

Tags of current page

,