จะใช้กฎ CSS เฉพาะกับ Chrome เท่านั้นได้อย่างไร

มีวิธีใช้ 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 
}

อย่างที่เราทราบกันดีว่า 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 : ทุกเวอร์ชัน
• Opera : 14 ขึ้นไป
• Android : ทุกเวอร์ชัน

รองรับ Hacks:

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

Google Chrome 28 และ Google Chrome> 28, Opera 14 และ Opera> 14

• Google Chrome : 28 และใหม่กว่า
• Opera : 14 ขึ้นไป

คุณสมบัติ / มูลค่า Hacks:

.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 Hacks: 1

var isChromium = !!window.chrome;

• Google Chrome : ทุกเวอร์ชัน
• Opera : 14 ขึ้นไป
• Android : 4.0.4

JavaScript Hacks: 2 {Webkit}

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

• Google Chrome : ทุกเวอร์ชัน
• Safari : 3 ขึ้นไป
• Opera : 14 ขึ้นไป

JavaScript Hacks: 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 และใหม่กว่า
• Opera : 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 เป็นจาวาสคริปต์ที่มีขนาดเล็กมากเพียงบรรทัดเดียวซึ่งช่วยให้ตัวเลือก 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 ที่ต้องการดู [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>

ฉันใช้ sass mixin สำหรับรูปแบบโครเมี่ยมนี่คือการChrome 29+ยืมโซลูชันจาก Martin Kristiansson ด้านบน

@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

ดังนั้นคุณมีความเป็นไปได้ที่มีความหมายสองประการ:

1. รับเบราว์เซอร์ปัจจุบันด้วยจาวาสคริปต์ ( ดูที่นี่ )
2. รับเบราว์เซอร์ปัจจุบันโดย php / serverside ( ดูที่นี่ )

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

ตรวจสอบสิ่งนี้มันทำงานให้ฉัน

ง่ายมาก เพียงเพิ่มคลาสที่สองหรือ id ให้กับองค์ประกอบของคุณในเวลาโหลดซึ่งระบุว่าเป็นเบราว์เซอร์ใด

โดยพื้นฐานแล้วที่ส่วนหน้าให้ตรวจหาเบราว์เซอร์จากนั้นตั้งค่า id / class และ css ของคุณจะถูกกำหนดโดยใช้แท็กเฉพาะของเบราว์เซอร์เหล่านั้น