Làm cách nào để chỉ áp dụng các quy tắc CSS cụ thể cho Chrome?

Có cách nào để áp dụng CSS sau đây cho một divchỉ cụ thể trong Google Chrome không?

position:relative;
top:-2px;

Giải pháp CSS

từ 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;
  );} 
}

Giải pháp JavaScript

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}

Như chúng ta biết, Chrome là một Webkit trình duyệt , Safari cũng là một trình duyệt Webkit, và cả Opera, vì vậy rất khó để nhắm mục tiêu Google Chrome, bằng cách sử dụng truy vấn phương tiện hoặc hack CSS, nhưng Javascript thực sự hiệu quả hơn.

Đây là đoạn mã Javascript sẽ nhắm mục tiêu Google Chrome 14 trở lên,

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

và dưới đây là danh sách các bản hack Trình duyệt có sẵn, dành cho Google chrome, bao gồm cả trình duyệt bị ảnh hưởng, bởi vụ hack đó

Hack WebKit:

.selector:not(*:root) {}

• Google Chrome : Tất cả các phiên bản
• Safari : Tất cả các phiên bản
• Opera : 14 trở lên
• Android : Tất cả các phiên bản

Hỗ trợ Hacks:

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

Google Chrome 28 và Google Chrome> 28, Opera 14 và Opera> 14

• Google Chrome : 28 trở lên
• Opera : 14 trở lên

Hack tài sản / giá trị:

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

Google Chrome 28 và Google Chrome <28, Opera 14 và Opera> 14 và Safari 7 và nhỏ hơn 7. - Google Chrome : 28 trở về trước - Safari : 7 trở về trước - Opera : 14 trở lên

Hacks JavaScript: 1

var isChromium = !!window.chrome;

• Google Chrome : Tất cả các phiên bản
• Opera : 14 trở lên
• Android : 4.0.4

JavaScript Hacks: 2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

• Google Chrome : Tất cả các phiên bản
• Safari : 3 trở lên
• Opera : 14 trở lên

Hacks JavaScript: 3

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

• Google Chrome : 14 trở lên

Hack truy vấn phương tiện: 1

@media \\0 screen {}

• Google Chrome : 22 đến 28
• Safari : 7 trở lên

Hack truy vấn phương tiện: 2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

• Google Chrome : 29 trở lên
• Opera : 16 trở lên

Để biết thêm thông tin vui lòng truy cập trang web này

Bản cập nhật cho chrome> 29 và Safari> 8:

Safari hiện hỗ trợ @supports tính năng này. Điều đó có nghĩa là những bản hack đó cũng có hiệu lực với Safari.

Tôi muốn giới thiệu

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

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}

Bộ chọn trình duyệt css này có thể giúp bạn. Hãy xem.

Bộ chọn trình duyệt CSS là một javascript rất nhỏ chỉ với một dòng giúp trao quyền cho bộ chọn CSS. Nó cung cấp cho bạn khả năng viết mã CSS cụ thể cho từng hệ điều hành và từng trình duyệt.

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

Chỉ áp dụng các quy tắc CSS cụ thể cho Chrome bằng cách sử dụng .selector:not(*:root)với các bộ chọn của bạn:

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}

<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>

Chưa bao giờ gặp trường hợp mà tôi phải thực hiện một cuộc tấn công css chỉ dành cho Chrome cho đến bây giờ. Tuy nhiên, tôi thấy điều này để di chuyển nội dung bên dưới trình chiếu ở nơi rõ ràng: cả hai; không ảnh hưởng gì trong Chrome (nhưng hoạt động tốt ở mọi nơi khác - ngay cả 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;
    }

nếu bạn muốn, chúng tôi có thể thêm lớp vào brwoser cụ thể, xem [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>

Tôi đang sử dụng một hỗn hợp sass cho phong cách chrome, đây là để Chrome 29+mượn giải pháp từ Martin Kristiansson ở trên.

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

Sử dụng nó như thế này:

@include chrome-styles {
  .header { display: none; }
}

Chrome không cung cấp các điều kiện riêng để đặt định nghĩa CSS chỉ dành cho nó! Không cần thiết phải làm điều này, vì Chrome diễn giải các trang web như được xác định trong tiêu chuẩn w3c.

Vì vậy, bạn có hai khả năng có ý nghĩa:

1. Nhận trình duyệt hiện tại bằng javascript ( xem tại đây )
2. Tải trình duyệt hiện tại bằng php / serveride ( xem tại đây )

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

kiểm tra cái này. nó hoạt động cho tôi.

Quá đơn giản. Chỉ cần thêm lớp thứ hai hoặc id vào phần tử của bạn tại thời điểm tải chỉ định trình duyệt đó là.

Vì vậy, về cơ bản ở giao diện người dùng, hãy phát hiện trình duyệt sau đó đặt id / class và css của bạn sẽ được xác định bằng cách sử dụng các thẻ tên cụ thể của trình duyệt đó