Как применить определенные правила CSS только к Chrome?

102

Есть ли способ применить следующий CSS к определенному divтолько в Google Chrome?

position:relative;
top:-2px;
css  google-chrome  css-hack 
— user1213707
источник
1
— Якуб
1
С какой проблемой вы сталкиваетесь, что заставляет вас это делать? Ориентация на правила CSS для определенных браузеров - это не лучший дизайн, и в большинстве случаев в этом нет необходимости.
— Pekka
@Pekka, это моя проблема stackoverflow.com/questions/9311965/… , и я обнаружил, что единственное решение - добавить их, но только для Chrome, пожалуйста, помогите :(
— user1213707
Не помог ли ответ в исходном вопросе?
— Pekka
2
Лично я разрабатываю для Chrome (который имеет тенденцию копировать в Firefox) и беспокоюсь об IE в конце.
— SpaceBeers

Ответы:

196

CSS решение

с https://jeffclayton.wordpress.com/2015/08/10/1279/

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

Решение JavaScript 

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}
— Мартин Кристианссон
источник
16
Это правило будет применяться как для сафари, так и для хрома
— Миуранга
1
@AlirezaNoori, вероятно, потому что он применим как к Chrome, так и к Safari, а не только к Chrome.
— thom_nic
2
Это также работает в IE Edge, проверьте это jeffclayton.wordpress.com/2015/08/10/1279
— llamerr
1
Я использовал data-ng-classangular и добавил .chromeкласс с выражением JS. Работал как шарм. Спасибо
— Kraken
1
Я обнаружил, что помогает размещать медиа-запросы внизу.
— Brownrice
27

Как мы знаем, Chrome - это браузер Webkit , Safari - это браузер Webkit, а также Opera, поэтому очень сложно настроить таргетинг на Google Chrome с помощью медиа-запросов или CSS-хаков, но Javascript действительно более эффективен.

Вот фрагмент кода Javascript, который будет нацелен на Google Chrome 14 и новее,

  var isChrome = !!window.chrome && !!window.chrome.webstore;

а ниже - список доступных взломов браузера для Google Chrome, включая браузер, на который повлиял этот взлом.

Взлом WebKit:

.selector:not(*:root) {}
  • Google Chrome : все версии
  • Safari : все версии
  • Опера : 14 и позже
  • Android : все версии

Поддерживает взломы:

@supports (-webkit-appearance:none) {}

Google Chrome 28 и Google Chrome> 28, Opera 14 и Opera> 14

  • Google Chrome : 28 и новее
  • Опера : 14 и позже

Взломы собственности / ценности:

.selector { (;property: value;); }
.selector { [;property: value;]; }

Google Chrome 28 и Google Chrome <28, Opera 14 и Opera> 14 и Safari 7 и менее 7. - Google Chrome : 28 и более ранние версии - Safari : 7 и более ранние версии - Opera : 14 и более поздние версии

Хаки JavaScript: 1

var isChromium = !!window.chrome;
  • Google Chrome : все версии
  • Опера : 14 и позже
  • Android : 4.0.4

Хаки JavaScript: 2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;
  • Google Chrome : все версии
  • Safari : 3 и выше
  • Опера : 14 и позже

Хаки JavaScript: 3

var isChrome = !!window.chrome && !!window.chrome.webstore;
  • Google Chrome : 14 и новее

Хаки с медиа-запросами: 1

@media \\0 screen {}
  • Google Chrome : с 22 до 28
  • Safari : 7 и новее

Хаки с медиа-запросами: 2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
  • Google Chrome : 29 и новее
  • Опера : 16 и позже

Для получения дополнительной информации посетите этот веб-сайт

— Hbirjand
источник
как сказал Себастьян @supports (-webkit-appearance: none) {} влияет на Safari, проверено на версии 10
— Дмитрий Малышев
1
@supports (-webkit-appearance:none) { }теперь работает для MS Edge.
— Вадим Овчинников
@media all и (-webkit-min-device-pixel-ratio: 0) и (min-resolution: .001dpcm) {.selector {}} теперь влияет и на Firefox
— Джо Салазар,
13

Обновление для Chrome> 29 и Safari> 8:

Safari теперь @supportsтоже поддерживает эту функцию. Это означает, что эти взломы будут действительны и для Safari.

я бы порекомендовал

@ http://codepen.io/sebilasse/pen/BjMoye

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}
— себиласса
источник
4
В FireFox для меня текст тоже красный.
— Kerry7777
9

Этот селектор браузера css может вам помочь. Взглянуть.

CSS Browser Selector - это очень маленький JavaScript с одной строкой, которая расширяет возможности CSS-селекторов. Это дает вам возможность писать определенный код CSS для каждой операционной системы и каждого браузера.

— тарашиш
источник
Объявление «селектор браузера css» немного сбивает с толку простой javascript. Сам CSS не поддерживает выбор браузерами!
— Армин
Извините, но так назвал его создатель. Я только что процитировал его :(
— tarashish
Очень аляпичная фраза автора ;-)
— Армин
1
да, на самом деле не хочу добавлять целую кучу js только для этого :( но в противном случае может быть полезно.
— Джейми Хутбер
Основная проблема заключается в том, что он становится хрупкой единой точкой отказа, так как зависит от выделенного одного программиста, и что нужно будет отслеживать их изменения, чтобы быть в курсе последних событий. По сути, это сомнительный способ решения текущей проблемы, поскольку, хотя он может помочь в краткосрочной перспективе, он не решает проблему.
— Патанджали
7

http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

Применяйте определенные правила CSS к Chrome только с помощью .selector:not(*:root)своих селекторов:

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}
<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>
Развернуть фрагмент

— CodeGust
источник
2
Этот хакер у меня сработал. Решения, основанные на разрешении экрана, затронули и Firefox.
— Стив Бриз,
@stevebreese Заметил это, я подозреваю, что это только для современных браузеров.
— Шаша
3

Никогда не встречал случая, когда мне приходилось делать взлом CSS только для Chrome. Однако я обнаружил, что это перемещает контент ниже слайд-шоу, где ясно: оба; ничего не повлияло на Chrome (но отлично работало везде - даже IE!).

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome, if Chrome rule needed */
    .container {
     margin-top:100px;
    }

    /* Safari 5+ ONLY */
    ::i-block-chrome, .container {
     margin-top:0px;
    }
— Элейн
источник
1

если вы хотите, мы можем добавить класс к конкретному brwoser см. [ссылка на скрипт] [1] [1]: 

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});
.relative {
  background-color: red;
  height: 30px;
  position: relative;
  width: 30px;
}
.relative .child {
  left: 10px;
  position: absolute;
  top: 4px;
}
.oc {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 500px;
  float:left;
}
.oc1 {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 300px;
  float:left;
  margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="relative">
<span class="child">
  ○
</span>
</div>
<div class="oc">
<div class="data"> </div>
</div>
<div class="oc1" style="display: block;">
<div class="data"> </div>
</div>
Развернуть фрагмент

— Нил Упадхьяй
источник
1

Я использую миксин sass для стилей Chrome, он Chrome 29+заимствовал решение у Мартина Кристианссона, описанного выше.

@mixin chrome-styles {
  @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-resolution:.001dpcm) {
      @content;
  }
}

Используйте это так:

@include chrome-styles {
  .header { display: none; }
}
— svnm
источник
5
Firefox теперь также читает это правило, поэтому больше не годится, если вы хотите настроить таргетинг только на Chrome.
— Mahn
0

Chrome не предоставляет собственных условий для установки определений CSS только для него! В этом не должно быть необходимости, потому что Chrome интерпретирует веб-сайты, как определено в стандартах w3c.

Итак, у вас есть две важные возможности:

  1. Получить текущий браузер с помощью javascript (см. Здесь )
  2. Получите текущий браузер на php / serveride ( смотрите здесь )
— Армин
источник
2
Определенно есть причины, по которым вы хотели бы применить к Chrome, но не, например, к Safari или Firefox, например, различия в том, как браузеры отображают элементы <select>. Решение только на CSS будет намного чище, чем использование серверного или клиентского кода.
— thom_nic
1
Chrome не идеален. Как и в любом другом программном обеспечении, в нем есть ошибки, в том числе в механизме рендеринга, и некоторые из них не исправляются через несколько лет. Поэтому очень важно иметь возможность обнаруживать Chrome, чтобы противодействовать последствиям этих ошибок. bugs.chromium.org/p/chromium/issues/…
— Джо Салазар
0 
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

проверьте this.it работает для меня.

— ашан
источник
0

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

Итак, в основном во внешнем интерфейсе определите браузер, затем установите идентификатор / класс, и ваш css будет определен с использованием этих тегов имен браузера.

— Ян Беллаванс
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.