특정 CSS 규칙을 Chrome에만 적용하는 방법은 무엇입니까?

다음 CSS를 divChrome에서만 특정에 적용하는 방법이 있습니까?

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

자바 스크립트 솔루션

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

아시다시피, Chrome은 Webkit 브라우저이고, Safari는 Webkit 브라우저이며, Opera도 미디어 쿼리 나 CSS 해킹을 사용하여 Google Chrome을 대상으로 지정하기가 매우 어렵지만 Javascript가 실제로 더 효과적입니다.

다음은 Google Chrome 14 이상을 대상으로하는 자바 스크립트 코드입니다.

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

아래는 해당 해킹에 의해 영향을받은 브라우저를 포함한 Google 크롬에 대해 사용 가능한 브라우저 해킹 목록입니다.

WebKit 해킹 :

.selector:not(*:root) {}

• Google 크롬 : 모든 버전
• Safari : 모든 버전
• Opera : 14 이상
• Android : 모든 버전

해킹 지원 :

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

Google Chrome 28 및 Google Chrome> 28, Opera 14 및 Opera> 14

• Google Chrome : 28 이상
• Opera : 14 이상

속성 / 가치 해킹 :

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

구글 크롬 28, 7보다 구글 크롬 <28, 오페라 14, 오페라> (14), 및 Safari 7 이하 - 구글 크롬 : 28 전 - 사파리 : 7 전 - 오페라 : 14 나중에

자바 스크립트 해킹 :

var isChromium = !!window.chrome;

• Google 크롬 : 모든 버전
• Opera : 14 이상
• 안드로이드 : 4.0.4

자바 스크립트 해킹 : 2 {Webkit}

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

• Google 크롬 : 모든 버전
• Safari : 3 이상
• Opera : 14 이상

자바 스크립트 해킹 : 3

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

• Google Chrome : 14 이상

미디어 쿼리 해킹 :

@media \\0 screen {}

• Google 크롬 : 22 ~ 28
• Safari : 7 이상

미디어 쿼리 해킹 : 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

.selector:not(*:root)선택기와 함께 사용 하는 경우에만 특정 CSS 규칙을 Chrome에 적용 합니다.

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

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

지금까지 Chrome 전용 CSS 해킹을 수행해야하는 인스턴스를 본 적이 없습니다. 그러나이 방법은 내용이 명확한 슬라이드 쇼 아래로 이동하는 것으로 나타났습니다. 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 / 클래스를 설정하면 해당 브라우저 별 이름 태그를 사용하여 CSS가 정의됩니다.