Chrome 관련 CSS 규칙을 어떻게 타겟팅할 수 있나요?

Chrome 관련 CSS 규칙을 타겟팅하는 방법

CSS로 웹 요소를 맞춤설정할 때 특정 DOM 요소에만 특정 스타일을 적용해야 하는 상황이 발생할 수 있습니다. 크롬 브라우저. 이를 달성하기 위한 몇 가지 솔루션은 다음과 같습니다.

CSS 솔루션

1. Webkit 미디어 쿼리: Chrome은 많은 CSS 속성에 "-webkit" 접두사를 사용합니다. . 아래와 같이 "-webkit-min-device-pixel-ratio" 미디어 쿼리를 사용하여 Chrome 전용 스타일을 타겟팅할 수 있습니다.

/* Chrome, Safari, Edge, Firefox */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

2. Chrome 전용 미디어 쿼리 : Chrome 버전 29의 경우 다음 미디어 쿼리를 사용하여 Chrome을 타겟팅할 수 있습니다. 만:

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

3. Chrome 관련 CSS 구문(Chrome 22-28): Chrome 버전 22-28에서는 "-chrome- :only" 구문은 브라우저:

/* Chrome 22-28 */
@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 
}

위 내용은 Chrome 관련 CSS 규칙을 어떻게 타겟팅할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!