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

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

 position:relative; top:-2px; 

11 Solutions collect form web for “Как применять определенные правила CSS только к Chrome?”

Решение 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 } 

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

Вот fragment кода Javascript, который будет нацелен на Google Chrome 14 и более поздних версий,

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

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

Media Query Hacks: 1

 @media \\0 screen {} 
  • Google Chrome : от 22 до 28
  • Safari : 7 и более поздних версий

Media Query Hacks: 2

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

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

Обновление для хром> 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; } } 

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

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

Никогда не сталкивайтесь с экземпляром, где мне приходилось делать взломанный Chrome только до сих пор. Однако я нашел это для перемещения содержимого ниже слайд-шоу, где ясно: both; ничего не изменил в 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; } 

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; } 
 
DIV1
DIV2

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

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

  1. Получить текущий браузер javascript ( смотрите здесь )
  2. Получить текущий браузер по php / serverside ( смотрите здесь )
 /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { /*your rules for chrome*/ #divid{ position:relative; top:-2px; } } 

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

если вы хотите, мы можем добавить class к конкретному 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; } 
   

Я использую 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; } } 

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

Таким образом, в основном на переднем конце, детектируйте браузер, затем установите id / class, и ваш css будет установлен с использованием этих специфичных для браузера nametags

  • Может ли Google Chrome открывать локальные ссылки?
  • Как предотвратить предупреждения JavaScript, которые срабатывают при выходе из страницы?
  • Получение списка голосов в речи Синтез Chrome (Web Speech API)
  • Google не открывается в браузерах
  • Как найти расширения Chrome, которые добавляют объявления на любую веб-страницу, которую я просматриваю?
  • Открыть адрес во внешнем приложении из браузера Chrome
  • Почему существует несколько экземпляров Chrome, хотя у меня есть только одно окно (только одна вкладка)?
  • Включить расширения Chrome для всех пользователей
  • Цвет фона не отображается в предварительном просмотре
  • Вручную добавление UserScript в Google Chrome
  • Как удалить одну или все автозаполненные текстовые записи в Chrome?
  • Interesting Posts

    Вектор векторов для создания матрицы

    Перемещение медленного каталога Windows XP

    Поддерживаемые ориентации не имеют общей ориентации с приложением, и shouldAutorotate возвращает ДА ​​’

    $ обеспечивают внешние блоки конфигурации

    Почему открытые вызовы с тремя аргументами с автообновленными файловыми дескрипторами – лучшая практика Perl?

    Если единственный браузер в Windows мертв, как подключиться к Интернету?

    Как получить доступ к базе данных pandas groupby по ключевому слову

    getlastknownlocation всегда возвращает null после того, как я переустановил файл apk через eclipse

    Какой смысл перегружать методы фабрики удобство для коллекций в Java 9

    Как сбросить драйверы видео / дисплея в Vista без перезагрузки ОС?

    Создание имени переменной с использованием значения String

    Что такое конструктор копирования в C ++?

    Как использовать WeakReference в разработке Java и Android?

    Отключите панель уведомлений

    Неправильная попытка чтения, когда данные отсутствуют

    Давайте будем гением компьютера.