Как применить определенные правила CSS только к Chrome?
Есть ли способ применить следующий CSS для конкретного div только в гугл хром?
position:relative;
top:-2px;
14 ответов
Решение 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 действительно более эффективен.
Вот фрагмент кода 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 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 и позже
Media Query Hacks: 1
@media \\0 screen {}
- Google Chrome: с22 по 28
- Сафари:7 и позже
Media Query Hacks: 2
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
- Google Chrome:29 и позже
- Опера:16 и позже
Для получения дополнительной информации, пожалуйста, посетите этот сайт
Обновление для 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;
}
}
Этот селектор браузера CSS может помочь вам. Взглянуть.
CSS Browser Selector - это очень маленький javascript с одной строкой, который расширяет возможности CSS-селекторов. Это дает вам возможность написать определенный код CSS для каждой операционной системы и каждого браузера.
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>Принятый ответ также соответствует Firefox 80+.
Чтобы настроить таргетинг на все браузеры Webkit (Edge 79+, Chrome, Safari), найдите -webkitконкретное расширение CSS , которое не поддерживается Firefox (используйте https://caniuse.com ). Это движущаяся цель; один из браузеров Webkit может удалить его, а браузер, не относящийся к Webkit, может добавить его поддержку.
@supports(-webkit-text-security: circle) {
/* Matches Edge 79 - latest (92) */
/* Matches Chrome 4 - latest (95) */
/* Matches Safari 3.1 - latest (15/TP) */
/* Matches Opera 15 - latest (78) */
}
Если вам действительно нужен только Chrome, JS - самый надежный способ.
В
.selector:not(*:root) {}взломать в /questions/26040953/kak-primenit-opredelennyie-pravila-css-tolko-k-chrome/26040960#26040960 прежнему исключает Firefox до версии 92.
Как применить CSS только к Chrome
Вы можете попробовать приведенный ниже код, если хотите применить CSS только к браузерам Chrome (Webkit/Blink). Имейте в виду, что есть и другие браузеры, использующие движок Chrome Webkit...
@supports (not (-moz-appearance:button)) and (contain:paint) and (-webkit-appearance:none) {
body {
background: blue;
}
}
В 2022 году этот код работает довольно хорошо и должен работать в большинстве браузеров Chrome, начиная с ~ 2013 года . Он должен отфильтровывать все Internet Explorer , ранние версии Trident Edge , Firefox , Safari и многие другие браузеры. Но, пожалуйста, протестируйте!
Имейте в виду, что Microsoft Edge версии 83 и более поздние версии перешли со старого движка Trident на браузерный движок Chrome Blink в мае 2020 года. Таким образом, это должно работать и в более новых браузерах Edge. Ожидайте, что это будет работать таким образом, поскольку двигатели под крышками почти одинаковы!
ПРИМЕЧАНИЯ К ЭТОМУ CSS
Как уже упоминалось, приведенный выше код работает во всех браузерах, которые используют некоторые современные версии движков Chrome Webkit или Blink. Двумя основными решающими факторами в приведенном выше коде для максимально ранней поддержки браузера в движках на основе Chrome будут поддержка функции CSS at-rule и более нового свойства Chrome с префиксом . В совокупности полная поддержка обоих в Chrome началась только в мае 2013 года (я полагаю). Таким образом, вы можете рассчитывать на то, что браузеры Chrome версии 28 до сегодняшнего дня будут или должны поддерживать этот CSS-хак, описанный выше. Но опять же, пожалуйста, проверьте!
Итак, давайте рассмотрим, как работает хак.....
Использование нового правила at или «проверки функций» позволяет вашему браузеру проверять, поддерживается ли определенное свойство или функция CSS и его значение в браузере пользователя. Проблема в том, что очень немногие старые и даже новые браузеры поддерживают прием CSS. Он действительно не получил поддержки в Chrome примерно до выпуска браузера в мае 2013 года. Так что это будут самые ранние поддерживаемые браузеры Chrome. Имейте в виду, что Chrome не был выпущен до 2008 года, поэтому он был поздним браузером.
Но браузер не поддерживает
Общее свойство CSS «внешний вид» (версия без префикса) поддерживалось в Mozilla/Firefox еще в 2006 году и в Chrome примерно в 2010 году в экспериментальной версии с префиксом и частичной поддержкой различных функций. Версия префикса Firefox
Таким образом, вы, вероятно, можете предположить, что браузеры Chrome, начиная с 2013 года по настоящее время, смогут использовать приведенные ниже правила, и с тех пор их будут видеть все браузеры, использующие движки Webkit.
Логика
Свойство CSS в основном поддерживалось после 2016 года в Chrome и Firefox. Таким образом, это исключает браузеры Safari из блока CSS. Однако некоторые Safari iOS перешли на движок Webkit Chrome. Так
Наконец, правило префикса Chrome,
Итак, приведенные выше фильтры CSS позволяют видеть код только браузерам Chrome, начиная с версии 27 в 2013 году и Microsoft Edge 83 в 2020 году.
ЗАЧЕМ ВООБЩЕ НУЖНО ПРИМЕНЯТЬ CSS ДЛЯ CHROME?
Стандарты HTML5 и CSS изменились с 2010 года. Больше нет рекомендаций W3C, в которых тщательно согласованные стандарты применяются всеми браузерами. Это означает, что поставщики браузеров постоянно случайным образом меняют свои браузеры (называемые Evergreen) в отношении поддержки CSS. Это также означает, что CSS будет меняться «на лету», ответвления кода редко будут выравниваться, CSS во всех других браузерах редко будет соответствовать друг другу, а «хаки», описанные выше, также могут измениться.
Это неудавшееся движение за веб-стандарты формирует основу для того, почему новый CSS имеет частичную поддержку между браузерами и версиями, браузеры будут все больше и больше выглядеть по-разному, и эти 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;
}
Если вы хотите, мы можем добавить класс к конкретному brwoser, смотрите [fiddle link][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>В Chrome нет собственных условий для установки определений CSS только для него! В этом не должно быть необходимости, потому что Chrome интерпретирует сайты, как определено в стандартах w3c.
Итак, у вас есть две значимые возможности:
- Получить текущий браузер с помощью JavaScript ( смотрите здесь)
- Получить текущий браузер по php/serveride ( смотрите здесь)
Я использую sass mixin для стилей 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; }
}
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*your rules for chrome*/
#divid{
position:relative;
top:-2px;
}
}
проверьте это. это работает для меня.
Мы используем JavaScript для обнаружения Chrome (и платформы) и изменения стиля. Вы можете использовать код ниже:
Также обратите внимание, что Google Chrome на iPhone и Mac отображает веб-страницу по-разному (а именно, у нас была проблема с фоновым положением: исправлено). Поэтому я бы рекомендовал также обнаружить платформу.
Также обратите внимание, что хаки на чистом CSS обычно нацелены как на Safari, так и на Chrome, а также для разных версий разные хаки начинают и перестают работать. Другими словами, я думаю, что невозможно сделать это надежно только с помощью CSS. Поэтому я бы рекомендовал делать это только с помощью JavaScript.
Так просто. Просто добавьте второй класс или идентификатор к вашему элементу во время загрузки, который указывает, какой это браузер.
Таким образом, в основном во внешнем интерфейсе, определите браузер, затем установите id/class, и ваш CSS будет определен с использованием этих именных тегов браузера