web-dev-qa-db-ja.com

Safari専用のcss行を追加する方法

Webサイトを作成していますが、Chromeおよびその他のブラウザーでは要素が必要ですが、サファリでは必要ありません。それを修正するためにcss行を追加したいのですが、何も見つかりませんSafari 3+のみにCSSを追加する方法。

htmlcsssafaristylesheet
10
Johan

同じプロパティをChromeにも適用するため、これは不可能です。ChromeとSafariはどちらも-webkit-プレフィックスを使用します。

しかし、PHPでこれを行うことができます。

<?php
    $browser = get_browser();
    if(strtolower($browser->browser) == 'safari') {
        echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
    } 
?>

Safari.cssを独自のスタイルシートに置き換えます。 @theoriseへのクレジット

8
Abu

これはうまくいくと思います

フィドル： http://jsfiddle.net/kHFjM/1/

    var userAgent = navigator.userAgent.toLowerCase(); 
    if (userAgent .indexOf('safari')!=-1){ 
       if(userAgent .indexOf('chrome')  > -1){
         //browser is chrome
       }else if((userAgent .indexOf('opera')  > -1)||(userAgent .indexOf('opr')  > -1)){
         //browser is opera 
       }else{
        //browser is safari, add css
       }
    }

これがブラウザのバージョンを検出するためのリンクです https://stackoverflow.com/a/5918791

12
user2580076

jQuery統合ソリューション：

<script type="text/javascript">
$(function () {
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        $("body").addClass("safari");
    }
});
</script>

<style>
div {
  margin:20px;
}

.safari div {
  margin:0;
}
</style>

純粋なJS統合ソリューション：

<style>
div {
  margin:20px;
}

.safari div {
  margin:0;
}
</style>
<body>
<script type="text/javascript"> 
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        document.body.className += " safari";
    }
</script>
</body>
9
Krab

Safari 9.0（9.0以上ではない）では、この素敵なハックを使用してCSSでこれを実行できます。 JSコードは必要ありません。私はそれをしました、そしてそれは私のためにうまくいきました。このハックを使用してください：

@supports (overflow:-webkit-Marquee) and (justify-content:inherit) {

/* type your custom css code here */

}

それが機能している理由は次のとおりです。Safari9.0以降には機能検出があります。したがって、Safari専用の機能を検出することで、Safariを検出できます。 overflow：-webkit-Marqueeとjustify-content：inheritは、safari専用です。これが、この単純なCSSハックでサファリを検出できる理由です。

4
Iman Sedighi

問題を修正するためにコードを追加する代わりに、デフォルトのマージンが異なるため、変更する前に、周囲の要素のマージンとパディングをすべて0にリセットしてみてください。これで問題が解決する可能性があります。

それは完全に個人的な好みですが、私はすべてのWebページを次のように開始します。

*{
    margin:0;
    padding:0;
}

これを行っている間、マージンやパディングに関するブラウザ間の問題は一度もありませんでした。

1
user2477011

CSS-Tricks forum にこれに似た質問があります。しかし、答えは基本的には違います。サーバー側またはJavaScriptでユーザーエージェントスニッフィングを試みてから、HTMLにクラスを追加できます（HTML5 BoilerPlateの古いIEバージョンの場合など）。

お役に立てれば。

-上下の連中がそれに打ちのめされました！

0
Watters

私は上記の推奨されるソリューションのほとんどすべてを試しましたが、私のコードに次のコードが見つかるまで、何も回避できません。

@-webkit-keyframes fadein { //code here }

そして、それは仕事をして、必要なCSSを適用しました：Safari, Chrome and Opera > 12.1

これが誰かを助けることを願っています。

0
Jodyshop