Чи є спосіб застосувати наступний CSS до певного div
лише в Google Chrome?
position:relative;
top:-2px;
Чи є спосіб застосувати наступний CSS до певного div
лише в Google Chrome?
position:relative;
top:-2px;
Відповіді:
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
}
data-ng-class
для кутових і додав .chrome
клас із виразом JS. Працював як шарм. Спасибі
Як ми знаємо, Chrome - це веб-переглядач Webkit , Safari - це також веб-переглядач Webkit, а також Opera, тому націлити на Google Chrome дуже важко, використовуючи медіа-запити або хаки CSS, але Javascript справді ефективніший.
Ось фрагмент коду Javascript, який буде націлений на Google Chrome 14 і новіші версії,
var isChrome = !!window.chrome && !!window.chrome.webstore;
і нижче - перелік доступних хак браузера для хрома Google, включаючи браузер під впливом цього хака
.selector:not(*:root) {}
@supports (-webkit-appearance:none) {}
Google Chrome 28 і Google Chrome> 28, Opera 14 і Opera> 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 і пізніші
var isChromium = !!window.chrome;
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
var isChrome = !!window.chrome && !!window.chrome.webstore;
@media \\0 screen {}
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
Для отримання додаткової інформації відвідайте цей веб-сайт
@supports (-webkit-appearance:none) { }
зараз працює для MS Edge.
Оновлення для 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>
Ніколи не натрапляв на екземпляр, де до цього часу мені доводилося робити злом 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, див. [скрипковий посилання] [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>
Я використовую 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; }
}
Chrome не надає жодних власних умов для встановлення визначення CSS саме для цього! Цього не повинно бути, тому що Chrome інтерпретує веб-сайти, як визначено у стандартах w3c.
Отже, у вас є дві значущі можливості:
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*your rules for chrome*/
#divid{
position:relative;
top:-2px;
}
}
перевірте цю роботу.
Так просто. Просто додайте до вас елемент другого класу або id під час завантаження, який визначає, який це браузер.
Отже, в основному, на першому кінці, виявіть браузер, а потім встановіть id / class, і ваш css буде визначений за допомогою цих тегів, визначених для браузера