CSSでIE向けに設定したグラデーションの設定をリセットする

CSS3

最近コーディングしててちょっと躓いたのでメモ。

見出し要素なんかにCSSのグラデーションを使いたい場合、ちょっとズルしてFireworksのCSS3パネルを使ってみると、

h2 {
	background-image:-moz-linear-gradient(rgb(240,235,225) 0%,rgb(255,255,255) 99%); 
	background-image:-webkit-gradient(linear,color-stop(0, rgb(240,235,225)),color-stop(0.99, rgb(255,255,255)));
	background-image:-webkit-linear-gradient(rgb(240,235,225) 0%,rgb(255,255,255) 99%);
	background-image:-ms-linear-gradient(rgb(240,235,225) 0%,rgb(255,255,255) 99%);
	background-image:linear-gradient(rgb(240,235,225) 0%,rgb(255,255,255) 99%);
	border-color:rgb(233,231,222);
	border-width:1px;
	border-style:solid;
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff0ebe1,endColorstr=#ffffffff)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff0ebe1,endColorstr=#ffffffff);
	color: #222;
	font-size: 18px;
	margin: 0 0 20px 0;
}

こんなコードが生成されます。

このうち、-ms-filter:とfilter:の2つのfilterプロ派ディはIE用に書き出されているのですが、後からやっぱりこの設定を変えたい場合、たとえば「.titleクラスを付けたらグラデーションはつけたくない」とかそういう場合、

h3.title {
	background-image: none;
	background-color: transparent;
	border: none;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

background-imageとbackground-colorにはnoneとかtransparentを値として入れるとリセットされるのですが、filterの内容も上書きしたい場合、

h3.title {
	background-image: none;
	background-color: transparent;
	-ms-filter: none;
	filter: none;
	margin: 0;
	padding: 0;
}

と、指定すると内容がリセットされるみたいです。

この方法を調べている時、Stack Overflowの記事を見つけて、そこには”filter: ;”と空の値を指定すると回答してる人もいたんだけど、さすがに空はどうかと思うので、noneと入れておくことにしました。

また、ゆめいろデザインさんの記事に、詳しい仕組みが書いてありました。

Internet Explorer 9ではSVGとfilterプロパティ、両方に対応していることははじめに記載しました。そのため、グラデーションはfilterプロパティの指定の部分の表示が残っているため、「background」でグラデーションの指定を消しても、Internet Explorer 9ではグラデーションが表示されたままと言うことになります。
参考:IE9でSVGグラデーションを使う場合の注意事項 | ゆめいろデザイン

IEに対応する場合、backgroundとfilter両方の内容があるって覚えておきます。
今はあまり使うことがないんだけど、IEだけ別の対応をしないといけないことが多いので、もうちょっと整理してまとめたいなー。

コメントを残す