> 웹 프론트엔드 > CSS 튜토리얼 > Google Chrome에만 특정 CSS 규칙을 적용하려면 어떻게 해야 합니까?

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

Linda Hamilton
풀어 주다: 2024-12-11 14:56:10
원래의
534명이 탐색했습니다.

How Can I Apply Specific CSS Rules Only to Google Chrome?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿