CSS Browser SelectorというjQueryプラグインでクロスブラウザの問題に対応

相も変わらずcssは

cssはブラウザによって挙動が変わるので非常に難しいですね。

今回、問い合わせはこちらというような矢印を、cssで真ん中に配置しつつアニメーションさせてみたのですが、例のごとくブラウザごとに多種多様な挙動に！

みんなちがって、みんないい・・・

なんて思えないっす！なんて協調性のない子たちなんでしょう!

と嘆いていたところ、素晴らしきjQuery プラグインがあったのですね。

その名も、CSS Browser Selector というらしいです。

CSS Browser Selectorをダウンロード

早速、CSS Browser Selectorを入手しましょう。

rafaelp/css_browser_selector · GitHubでダウンロードできます。

（※Search · CSS Browser Selector · GitHubで他の人が様々なBrowser Selectorを紹介してます。）

『Download Zip』ボタンを選択クリックします。

f:id:ts0818:20160123181821j:plain

ダウンロードされたフォルダの中で『css_browser_selector.js』というファイルを使います。

C:¥Users¥ユーザー名¥Desktop¥css_browser_selector-master¥css_browser_selector-master

f:id:ts0818:20160123182152j:plain

今回の自分の作業したフォルダ構成

f:id:ts0818:20160124014718p:plain

CSS Browser Selectorを読み込む

<script src="js/css_browser_selector.js" type="text/javascript"></script>

index.html全体

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>cssのpositionとanimation</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/css_browser_selector.js" type="text/javascript"></script>
</head>
<body>
<div id="main_bottom">
<p id="info">総合体育館の情報は下記サイトで確認できます。</p>
<p id="arrow_kuro"><img src="image/arrow_kuro.png" alt="矢印"></p>
<p id="nerima"><a class="button official" href="" target="_blank">総合体育館：公式ホームページ</a></p>
</div><!--#main_bottom-->
</body>
</html>

style.css

/** ここに記述はしてませんが、リセットcssは下記を使ってます  **/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
#main_bottom {
  position: relative;
  max-width: 960px;
}
/* animationプロパティに複数プロパティの値を指定 */
/* animation-name = arrow_kuro           */
/* animation-duration = 1s               */
/* animation-timing-function = ease      */
/* animation-delay = -1s                 */
/* animation-iteration-count = infinite  */
/* animation-direction = alternate       */
#arrow_kuro {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 30px;
  left: 0px;
  -webkit-animation: arrow_kuro 1s ease -1s infinite alternate;
  animation: arrow_kuro 1s ease -1s infinite alternate;
}
/*Chromeに対する処理*/
.webkit #arrow_kuro {
  margin: auto auto;
}
/*IEに対する処理*/
.ie #arrow_kuro {
  margin: 30px auto;
}
/* cssハックの場合 */
/* IE10（CSS Browser Selectorの.ieでも対応できました）に対する処理 */
/* IE11（Microsoft Edgeにも適応されます）に対する処理 */
@media all and (-ms-high-contrast:none){
  #arrow_kuro { margin: 30px auto } /* IE10 */
  *::-ms-backdrop, #arrow_kuro { margin: 30px auto } /* IE11 */
}
/* jQuery（CSS Browser Selector）の場合 */
/* Firefox、Microsoft Edgeに対する処理 */
.gecko #arrow_kuro {
  margin: 30px auto;
}
/* #arrow_kuroに指定したanimationプロパティと関係 */
/* @keyframes animation-nameの形 */
@keyframes arrow_kuro {
0% {top:30px;}
100% {top:60px;}
}
@-webkit-keyframes arrow_kuro {
0% {top:30px;}
100% {top:60px;}
}
@-moz-keyframes arrow_kuro {
0% {top:-10px;}
100% {top:20px;}
}
@-o-keyframes arrow_kuro {
0% {top:-10px;}
100% {top:20px;}
}
@-ms-keyframes arrow_kuro {
0% {top:-10px;}
100% {top:20px;}
}

⇩ positionで真ん中に寄せる方法は下記サイトへ

・【CSS】サイズが可変の要素をposition:absoluteで中央配置する方法 « 株式会社プロネット

CSS Browser Selectorで指定できること

CSS Browser Selectorは、ブラウザごと以外でもcssを変えることができるようです。

ちなみに、Microsoft Edgeは、Mozilla用のレンダリングエンジンGeckoを意味する『.gecko』をセレクタにすることで対処できるようです。

マイクロソフトでは、コンシューマ向けの一般的なWebサイトのブラウジングにはMicrosoft Edgeを、IEとの後方互換性が必要な業務WebシステムではIEを利用いただくことをご提案しています。

Windows 10 に搭載される 2 つの Webブラウザ、Microsoft EdgeとInternet Explorer 11 | Windows Blog for Japan

使い方は、idやclassの前にセレクタを足せばOKです。OS + ブラウザのようにセレクタを同時に複数指定することも可能です。

区別
種類	セレクタ
OS
Windows	.win
Mac	.mac
Linux	.linux
ブラウザ
IE	.ie（IE11以外のIEに対応）
IE6	.ie6
IE7	.ie7
IE8	.ie8
IE9	.ie9
Chrome	.chrome
Firefox	.firefox
Opera	.opera
Safari	.safari
Iron	.iron
レンダリングエンジン
Webkit	.webkit
Mozilla	.gecko（Microsoft Edgeに対応）
デバイス
Android	.android
iPhone	.iphone
iPad	.ipad
iPod	. ipod