Hatena::Groupweb

vantguarde

 | 

8.26

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

| 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

*1:継承した背景色が白に近い場合の話ですが、かなり頻発するかなと。

*2:元発言の文脈は違いますが。参考: http://togetter.com/li/178609

 | 
Contact: @vant / lepetitcroissant@gmail.com.