カテゴリ:
CSS

IE9でborder-radiusとグラデーションを両立する

WEB開発をしていると、対応ブラウザとしてIE9をサポートしなければならないこともまだあると思う。しかし、IE9はCSSでborder-radiusをサポートしているものの、linear-gradient等はサポートしていない。このため、ボタン等で角丸とグラデーションを両立しようとすると、画像を利用するか、またはborder-radiusとIE独自のフィルタを組み合わせることが思い浮かぶ。

画像を利用すればこれを実現できそうなのは分かるが、技術系の人間だと画像ファイルを作るのは躊躇しがちだ。そこで、border-radiusとIE独自のフィルタを組み合わせる方法を考えるが、実はこの方法はグラデーションが角丸の外側にはみ出してしまって使えない。例えば、以下のようなコードだ。


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
		<meta charset="utf-8">
		<style>
			#button1 {
				border: solid 1px black;
				border-radius: 7px;
				filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#666666',EndColorStr='#cccccc',GradientType=0);
			}
		</style>
		<title>IE9でborder-radiusとグラデーションを両立</title>
	</head>
	<body>
		<h1>IE9でborder-radiusとグラデーションを両立</h1>
		<button id="button1">border-radiusとフィルタ</button>
	</body>
</html>

このことは数年前に試して知っていたのだが、最近Microsoftが解決方法を公開しているのをたまたま見つけたので再度試してみた。その方法は、端的に言うとCSSのbackground-imageでSVGを利用するというもの。「えっ、それって画像じゃねーの」と突っ込まれそうだが、SVGは画像ソフトを使わずともXMLを書くだけで良いのだ。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
		<meta charset="utf-8">
		<style>
			#button2 {
				border: solid 1px black;
				border-radius: 7px;
				background-image: url('./images/background.svg');
			}
		</style>
		<title>IE9でborder-radiusとグラデーションを両立</title>
	</head>
	<body>
		<h1>IE9でborder-radiusとグラデーションを両立</h1>
		<button id="button2">border-radiusとSVG</button>
	</body>
</html>

SVGはこんな感じになる。ほぼ、Microsoftで公開されているものと同じである。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
	<linearGradient id="vg1" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop stop-color="#666666" offset="0"/>
		<stop stop-color="#cccccc" offset="1"/>
	</linearGradient>
	<rect x="0" y="0" width="1" height="1" fill="url(#vg1)" />
</svg>

(2014/11/26)
新着情報
【オープンソースソフトウェア環境構築】Apple silicon Macで開発環境を構築
【Rust Tips】Actix webでJSONをPOSTする
【Rust Tips】コマンドライン引数を取得する
Copyright© 2004-2018 モバイル開発系(K) All rights reserved.
[Home]