Google Chrome에만 특정 CSS 규칙을 적용하려면 어떻게 해야 합니까?

Chrome에 특정 CSS 규칙 적용: 기술 및 솔루션

사용된 브라우저를 기반으로 웹페이지의 특정 요소를 타겟팅하면 향상된 사용자 경험을 제공할 수 있습니다. 웹사이트 성능을 최적화합니다. 그러한 시나리오 중 하나는 Google Chrome의 특정 div에만 CSS 스타일을 적용하는 것입니다.

CSS 솔루션

이를 달성하려면 특정 -webkit-을 사용하여 미디어 쿼리를 활용할 수 있습니다. 다음 코드에 설명된 대로 접두사:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

이 쿼리는 최소 픽셀 비율이 0인 장치를 대상으로 하여 적용을 효과적으로 제한합니다. 비특정 브라우저는 영향을 받지 않지만 Chrome은 영향을 받지 않습니다.

또한 -webkit-min-device-pixel-ratio 및 최소 해상도 속성을 사용하여 보다 구체적인 Chrome 버전을 타겟팅할 수 있습니다.

@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

Chrome 버전 22-28의 경우 -chrome- 접두사는 다음과 같습니다. 사용:

@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

JavaScript 솔루션

또는 JavaScript를 사용하여 사용자 브라우저에 Chrome이 있는지 확인할 수 있습니다.

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

이 접근 방식은 브라우저 유형에 따라 CSS 스타일을 동적으로 적용하는 옵션을 제공합니다. 그러나 JavaScript 기능이 필요하며 모든 시나리오에 적합하지 않을 수 있습니다.

위 내용은 Google Chrome에만 특정 CSS 규칙을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!