Як застосувати конкретні правила CSS лише до Chrome?


102

Чи є спосіб застосувати наступний CSS до певного divлише в Google Chrome?

position:relative;
top:-2px;


1
З яким питанням ви стикаєтесь, що змушує вас це робити? Правила націлювання CSS на конкретні веб-переглядачі не є чудовим дизайном, і в більшості випадків це більше не потрібно.
Pekka

@Pekka, це моя проблема stackoverflow.com/questions/9311965/… , і я виявив, що єдине рішення - додати ті, але лише для хрому, будь ласка, допоможіть :(
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
Це правило застосовуватиметься як до сафарі, так і до хрому
Miuranga

1
@AlirezaNoori, ймовірно, тому, що це стосується як Chrome, так і Safari, а не лише Chrome.
thom_nic

2
Він також працює в IE Edge, перевірте цей jeffclayton.wordpress.com/2015/08/10/1279
llamerr

1
Я використовував data-ng-classдля кутових і додав .chromeклас із виразом JS. Працював як шарм. Спасибі
Кракен

1
Я виявив, що це допомогло мати медіа-запити внизу.
Браунріс

27

Як ми знаємо, Chrome - це веб-переглядач Webkit , Safari - це також веб-переглядач Webkit, а також Opera, тому націлити на Google Chrome дуже важко, використовуючи медіа-запити або хаки CSS, але Javascript справді ефективніший.

Ось фрагмент коду Javascript, який буде націлений на Google Chrome 14 і новіші версії,

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

і нижче - перелік доступних хак браузера для хрома Google, включаючи браузер під впливом цього хака

Злом WebKit:

.selector:not(*:root) {}
  • Google Chrome : Усі версії
  • Сафарі : Усі версії
  • Опера : 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 Hacks: 2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;
  • Google Chrome : Усі версії
  • Сафарі : 3 і пізніше
  • Опера : 14 і пізніше

JavaScript хакі: 3

var isChrome = !!window.chrome && !!window.chrome.webstore;
  • Google Chrome : 14 та новіших версій

Злаштування медіа-запиту: 1

@media \\0 screen {}
  • Google Chrome : від 22 до 28
  • Сафарі : 7 і пізніше

Злам запитів для медіа: 2

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

Для отримання додаткової інформації відвідайте цей веб-сайт


як сказав Себастьян @supports (-webkit-поява: жоден) {} впливає на Safari, протестований на v.10
Дмитро Малишев

1
@supports (-webkit-appearance:none) { }зараз працює для MS Edge.
Вадим Овчинников

@media all і (-webkit-min-device-pixel ratio: 0) та (min-роздільна здатність: .001dpcm) {.selector {}} тепер впливає і на Firefox
Joe Salazar

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 не підтримує браузери жодного вибору!
Армін

Вибачте, але саме так його назвав його творець. Я щойно процитував його :(
тарашиш

Дуже пишна фраза автора ;-)
Армін

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>


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 mixin для хромованих стилів, це для 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; }
}

5
Firefox тепер також читає це правило, тому вже не добре, якщо ви хочете орієнтуватися виключно на Chrome.
Ман

0

Chrome не надає жодних власних умов для встановлення визначення CSS саме для цього! Цього не повинно бути, тому що Chrome інтерпретує веб-сайти, як визначено у стандартах w3c.

Отже, у вас є дві значущі можливості:

  1. Отримати поточний браузер за допомогою JavaScript ( дивіться тут )
  2. Отримайте поточний браузер за допомогою php / serverside ( дивіться тут )

2
Однозначно є причини, чому ви хочете звернутися до Chrome, але не, наприклад, Safari або Firefox, наприклад, відмінності в тому, як браузери відображають <select> елементи. Рішення лише для CSS було б набагато більш чистим, ніж використання коду на стороні сервера або клієнта.
thom_nic

1
Chrome не ідеальний. Як і в будь-якому іншому програмному забезпеченні, у нього є помилки, в тому числі і в механізмі візуалізації, а деякі не виправляються через кілька років. Тому важливо мати можливість виявити Chrome для протидії дії цих помилок. bugs.chromium.org/p/chromium/isissue/…
Джо Салазар

0
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

перевірте цю роботу.


0

Так просто. Просто додайте до вас елемент другого класу або id під час завантаження, який визначає, який це браузер.

Отже, в основному, на першому кінці, виявіть браузер, а потім встановіть id / class, і ваш css буде визначений за допомогою цих тегів, визначених для браузера

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.