CSSハック・Javascriptハック | ぶぶりんのチュートリアルサイト

2014年12月10日

各ブラウザのみに有効なCSSハック

IEは通常コード、Firefoxのみ、 SafariとChromeでCSSに入力し構築した。
その詳細を下記に示します。

Firefox

#AAA, x:-moz-any-link {
      position: absolute;
      top:210px;
      left:10px;
}
        

SafariとFirefox

body:first-of-type #AAA {
      position: absolute;
      top:210px;
      left:10px;
}

SafariとChrome

@media screen and (-webkit-min-device-pixel-ratio:0){
      #AAA{
          position: absolute;
          top:210px;
          left:10px;
      }
}

Opera

html:66irst-child #AAA{
      position: absolute;
      top:210px;
      left:10px;
}

SafariとOpera

*|html[xmlns*=""] #AAA{
      position: absolute;
      top:210px;
      left:10px;
}

SafariとChromeとOperaとFirefox

body:first-of-type #AAA{
      position: absolute;
      top:210px;
      left:10px;
}

参考にさせていただいたサイト:

http://www.webcreatorbox.com/tech/css-hack-list/
http://coliss.com/articles/build-websites/operation/css/the-hacks-css-browser-targeting.html
http://www.webworkersclip.com/254/


しかし、私の構築していたものではSafariがうまく表示できなかった。
そこで、Javascriptを用いて構築する方法も用いた。
その内容は、下記に記載します。

Javascriptハック

CSS Browser SelectorというJavascriptファイルを用いて、 各プラウザに対応したハックを適応させることができます。その詳細を下記に示します。

Javascriptファイルの参照

						

WinのSafari(windowsだけなら)

.win.safari #AAA {
      position: absolute;
      top:210px;
      left:10px;
}

MacのSafari(macだけなら)

.mac.safari #AAA{
      position: absolute;
      top:210px;
      left:10px;
}

Firefox

.webkit #AAA {
      position: absolute;
      top:210px;
      left:10px;
}

Chrome

.chrome #AAA{
      position: absolute;
      top:210px;
      left:10px;
}

Opera

.opera #AAA{
      position: absolute;
      top:210px;
      left:10px;
}

IE

.ie #AAA{
      position: absolute;
      top:210px;
      left:10px;
}

参考にさせていただいたサイト:

http://html999.sitemix.jp/tips/48.html
http://atmarksharp.com/posts/css-browser-selector.html


Javascriiptファイルがあるので、ダウンロードして利用知ってください。

英語サイト:css_browser_selector解説サイト

ダウンロード先:css_browser_selector.js

© 2014-2015 ぶぶりん.