CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ

Post on:2011年7月25日

ウェブページでよく利用されるCSSを使ったエフェクトをクロスブラウザ対応にする方法を紹介します。

サイトのキャプチャ

17 CSS/HTML Effects with Cross-Browsing Alternatives

サポートしないブラウザへの対応方法はJavaScriptを利用するなどいろいろありますが、その中の一つとして紹介します。

[ad#ad-2]

下記は各ポイントを意訳したものです。

幅の最小値・最大値 (IE included)

幅の最小値・最大値をIEでも利用できるようにします。

CSS

#content {
	width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1242? "1240px" : "auto");
	min-width: 760px;
	max-width: 1240px;
}

RGBa (IE included)

不透明度を使ったカラーをIEでも利用できるようにします。

CSS

.element {
	background-color: transparent;
	background-color: rgba(255, 255, 255,0.8);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
}

不透明度 (IE included)

不透明度をIEでも利用できるようにします。

CSS

.selector {
	ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 */
	filter: alpha(opacity=50); /* internet explorer 5~7 */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
}

画像の回転・拡大縮小 (IE included)

画像の回転・拡大縮小をIEでも利用できるようにします。

CSS

img {
	transform:
		rotate(180deg)
		scale(-1, 1);

/* for firefox, safari, chrome, etc. */
	-webkit-transform:
		rotate(180deg)
		scale(-1, 1);
	-moz-transform:
		rotate(180deg)
		scale(-1, 1);

/* for ie */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);

	/* opera */
	-o-transform:
		rotate(180deg)
		scale(-1, 1);
}

背景をブラウザいっぱいに表示 (IE included)

背景をブラウザにいっぱいに表示する方法をIEでも利用できるようにします。

HTML

<div class="content">
	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="background">
	<img class="full | portrait | landscape" src="imgURL" alt="" />
</div>

CSS

.content {
	position: relative;
	width: 760px;
	z-index: 10;
}
.background {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index:2;
}
.portrait {
	height: 100%;
}
.landscape {
	width: 100%;
}
.full {
	width: 100%;
	height: 100%;
}

画像無しのビュレット

画像を使用しないで、リストにビュレットを表示します。

CSS

ul {
	list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==);
}

テキストのシャドウ (IE included)

テキストのシャドウをIEでも利用できるようにします。

CSS

p {
	text-shadow: #000000 0 0 1px;
	zoom:1;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);

	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
}

複数のボーダー (IE included)

複数のボーダーをIEでも利用できるようにします。

CSS

div {
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7- */
}
div:before {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	border-top: 1px solid #212121; /* top border! */
	content: '';
}
div:after {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 1px;
	border-bottom: 1px solid #212121; /* bottom border! */
	content: '';
}

ボックスシャドウ (IE included)

ボックスシャドウをIEでも利用できるようにします。

CSS

.shadow {
	-moz-box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
	filter:
		progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
		progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
		progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
		progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
	box-shadow: 0 0 4px #000;
}

角丸

各ブラウザごとの角丸の記述です。

CSS

.rounded  {
	-moz-border-radius: 10px; /* gecko */
	-webkit-border-radius: 10px; /* webkit */
	border-radius: 10px; /* CSS3 standard */
	-khtml-border-radius: 10px; /* old konkeror */

	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;

	-khtml-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-khtml-border-radius-topright: 10px;
	-khtml-border-radius-topleft: 10px;

	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;

	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

スクリーンリーダー用のコンテンツ

スクリーンリーダー用にアクセシブルなコンテンツを配置する際の記述です。

CSS

.hidden  {
	position: absolute;
	top: -10000px;
	left: -10000px;
}

ネガティブ値で指定したtext-indent

コンテンツを隠す際、ネガティブ値で指定したtext-indentは使用しないでください。これはSEOにおいて多くの悪い面を持っています。下記のように、普通にaltを使った画像を使った方がより安全です。

HTML

<h1><img src="myLogo" alt="My company" /></h1>

Clearfix (IE included)

フロートでのバグを回避するclearfixの最小の記述方法です。

CSS

.clearfix {
	zoom:1;
	overflow:hidden;
}

@font-face (IE included)

@font-faceをIEでも利用できるようにします。

CSS

@font-face {
	font-family: 'MandatoryRegular';
	src: url('font/mandator-webfont.eot');
	src: url('font/mandator-webfont.eot?#iefix') format('embedded-opentype'),
	     url('font/mandator-webfont.woff') format('woff'),
	     url('font/mandator-webfont.ttf') format('truetype'),
	     url('font/mandator-webfont.svg#MandatoryRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

画像を使用しない引用符

画像を使用せずに、引用符をデザインします。

CSS

blockquote:before {
	display: block;
	float: left;
	margin: 10px 15px 0 0;
	font-size: 100px; /* let's make it a big quote! */
	content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
	color: #bababa;
	text-shadow: 0 1px 1px #909090;
}

CSS for iPhone4

高解像度のiPhone4に異なるスタイルシートを適用する方法です。

CSS

@media handheld, only screen and (max-width: 767px) {
	.logo {
		/* common low-res and low-size, of course */
		background: url(logo.jpg) no-repeat;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}
}

スマフォの縦置き・横置きに対応するスタイルシート

iPhone, Android, iPadなどの縦置き・横置きに最適なスタイルシートを適用する方法です。

CSS

/* Smartphones (portrait and landscape) ----------- */
@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		/* Styles */
	}

/* Smartphones (landscape) ----------- */
@media only screen
	and (min-width : 321px) {
		/* Styles */
	}

/* Smartphones (portrait) ----------- */
@media only screen
	and (max-width : 320px) {
		/* Styles */
	}

/* iPads (portrait and landscape) ----------- */
@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px) {
		/* Styles */
	}

/* iPads (landscape) ----------- */
@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : landscape) {
		/* Styles */
	}

/* iPads (portrait) ----------- */
@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : portrait) {
		/* Styles */
	}

/* Desktops and laptops ----------- */
@media only screen
	and (min-width : 1224px) {
		/* Styles */
	}

/* Large screens ----------- */
@media only screen
	and (min-width : 1824px) {
		/* Styles */
	}

/* iPhone 4 ----------- */
@media
	only screen and (-webkit-min-device-pixel-ratio : 1.5),
	only screen and (min-device-pixel-ratio : 1.5) {
		/* Styles */
	}

[ad#ad-2]

sponsors

top of page

©2024 coliss