vantguarde

linear-gradient()とかradial-gradient()のあとにはbackground-colorも別に書いとこう

css | 01:33

Windows Phoneが発売されましたが、「スマートフォン」と一括りにされて既存のスマートフォン用サイトに飛ばされたりしたとき、問題になるものがちらほら出てくるんじゃないかと思うので、ちょっと書いておこうかなあと。

タイトルで説明できてるんで冗長ではあるんですが、まあこういうことを言いたいのです。

.nanka {
  color: white;
  background: -webkit-gradient(linear, left top, left bottom, from(darkgray), to(gray));
}

これで完結してるCSSが結構多いんですよね。-moz-とかが書かれてることもありますが、それは置いといて。

これだと、WebKit以外だとbackgroundが無視されちゃうんでWebKit以外で文字が見えなくなります。*1

で、ただ背景色を書けだと、なぜかこう書いてしまう場合もあるらしく……

.nanka {
  color: white;
  background: -webkit-gradient(linear, left top, left bottom, from(darkgray), to(gray)) gray;
}

backgroundにしちゃってるケースです。これも当然WebKit以外だと悲しいことになります。なのでbackgroundに含めないで（含めてもいいですが）、backgroundのあとにbackground-colorで指定します。

.nanka {
  color: white;
  background: -webkit-gradient(linear, left top, left bottom, from(darkgray), to(gray));
  background-color: gray;
}

背景色には、文字色とコントラストのとれるものであれば何でもいいかなと。基本的にはグラデーション内の色が楽だとは思います。

というお話でした！

あ、-moz-, -ms-, -o-も書いておけばそうしなくてもいいってわけじゃないです。ブラウザ売ってるわけじゃねぇんだから「このブラウザで見てください」はありえんよ。っていう話です。*2