サイト制作に関するメモ書き

HOME > JavaScript > jQuery > jQueryでのベンダープレフィックスの注意点

jQueryでのベンダープレフィックスの注意点

jQueryのバージョンが古いサイトでtransformを使おうとしたときに少し詰まったのでメモ。

うまくいかなかった場合のサンプルコード

jQueryのバージョンは1.6で、クリックするとtransformで回転させる処理を実装します。
transformの対応ブラウザはこちらから確認ください。

HTML

<div id="sample">クリックで<br>回転</div>

CSS

#sample {
	width: 100px;
	padding: 30px 0;
	text-align: center;
	background: #f00;
	cursor: pointer;
}

IE9とスマホでも対応させるため、以下のようにベンダープレフィックスを付与します。

JavaScript

$(function() {
	var rotate = 0;
	$('#sample').click(function() {
		rotate += 10;
		$(this).css({
			'-ms-transform': 'rotate(' + rotate + 'deg)',
			'-webkit-transform': 'rotate(' + rotate + 'deg)',
			transform: 'rotate(' + rotate + 'deg)'
		});
	});
});

うまくいかなかった場合のデモページ
スマホでは回転できましたが、IE9では回転ができませんでした。
 

対応後のサンプルコード

ベンダープレフィックスの指定方法を変えるとうまくいきました。

JavaScript

$(function() {
	var rotate = 0;
	$('#sample').click(function() {
		rotate += 10;
		$(this).css({
			'msTransform': 'rotate(' + rotate + 'deg)',
			'webkitTransform': 'rotate(' + rotate + 'deg)',
			transform: 'rotate(' + rotate + 'deg)'
		});
	});
});

この指定方法だとスマホ・IE9共に回転できました。
対応後のデモページ

jQuery1.8を使用した場合

jQuery1.8からはベンダープレフィックスが自動で付加されるようなので、特に指定がなくても回転しました。

JavaScript

$(function() {
	var rotate = 0;
	$('#sample').click(function() {
		rotate += 10;
		$(this).css({
			transform: 'rotate(' + rotate + 'deg)'
		});
	});
});

jQuery1.8を使用した場合のデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP