Как добавить строку css ТОЛЬКО для Safari

Я создаю веб-сайт, но элемент нуждается в запасе в Chrome и других браузерах, но не в сафари. Поэтому я хочу добавить строку css, чтобы исправить ее, но я не могу найти какой-либо метод для добавления css только для сафари 3+.

Ответ 1

Это невозможно, так как вы будете применять одно и то же свойство к 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

Ответ 2

Я считаю, что это должно работать

Fiddle: 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
       }
    }

вот ссылка для обнаружения версии браузера fooobar.com/questions/30550/...

Ответ 3

Интегрированное решение 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>

Интегрированное решение Pure 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>

Ответ 4

В Safari 9.0 (только не> 9.0) вы можете сделать это сейчас в CSS с помощью этого приятного хака. Вам не нужен код JS. Я сделал это, и это работает нормально для меня. Используйте этот хак:

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

/* type your custom css code here */

}

Причина, по которой он работает: Safari 9.0 и выше имеет функцию обнаружения функций. Таким образом, обнаружив функцию, предназначенную исключительно для Safari, вы можете обнаружить Safari. переполнение: -webkit-marquee и justify-content: наследовать исключительно для сафари. Вот почему мы можем обнаружить сафари с помощью этого простого CSS-хака.

Ответ 5

Вместо того, чтобы добавлять больше кода, чтобы исправить вашу проблему, поскольку поля по умолчанию различны, вы можете попробовать сначала сбросить все поля и прокладки окружающих элементов до 0 перед их заменой. Это может решить вашу проблему.

Это полностью личное предпочтение, но я начинаю все свои веб-страницы с помощью:

*{
    margin:0;
    padding:0;
}

У меня никогда не было проблем с перекрестным браузером относительно полей или отступов, делая это.

Ответ 6

На форуме, посвященном форуме CSS-Tricks, возникает вопрос. Но ответ в основном, нет. Вы можете попытаться обработать пользовательский агент, обнюхивающий сервер или JavaScript, а затем добавить класс в html (например, для старых версий IE в HTML5 BoilerPlate).

Надеюсь, что это поможет.

- избили его ребятами выше и ниже!

Ответ 7

Я перепробовал почти все предложенные выше решения, но ничего не получалось, пока я не увидел кусок кода в своем сообщении:

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

И он сделал свою работу и применил необходимый CSS для: Safari, Chrome and Opera > 12.1

Надеюсь, что это может кому-то помочь.