2009-12-09 6 views
7

CSS에서 Safari 및 Google 크롬 만 타겟팅하기 위해 body:nth-of-type(1)이 검색되었습니다.CSS Hacks, Firefox 3.5 및 Google 크롬

Lo이고 Mozilla는 올바르게 읽습니다. 나는 열 번 더 찾았지만 아무 것도 나오지 않았다. 그래서 나는 여기있다.

Google 크롬 전용 CSS 해킹이 있습니까?

답변

13

@media screen and (-webkit-min-device-pixel-ratio:0) { ... styles go here ... }

크롬 (AFAIK)하지만 크롬과 사파리에 대한 CSS가 없습니다. Javascript 솔루션을 고려해보십시오.

업데이트 2013 년 1 월 22 일 : 의견에서 언급했듯이 더 이상 안전하지 않을 수 있습니다. 나는 적당한 대안을 찾을 수 없었다.

+0

위의 CSS를 추가하면 firefox와 IE가 잘 돌아 가지 않으며 @media 화면 블록 아래에있는 내 CSS를 읽지 않아도됩니다. 무엇이 잘못 될 수 있는지 알고 있습니까? – talkingD0G

+0

방금 ​​페이지 하단에 CSS 코드를 추가하여 문제를 해결했습니다. 감사! – talkingD0G

+0

내 엉덩이 선생님, 저에게 감사드립니다! – swajak

11

그것은 해킹의 이러한 종류를 방지하는 것이 가장 좋습니다. 분명히 시간이 지남에 따라 더 많은 플랫폼에서 새로운 표준이 점점 더 많이 제공 될 것입니다. 다시 말해서 특정 브라우저가 [특정 CSS 기능]을 가지고 있기 때문에 [특정 브라우저]라고 가정하는 것은 실수입니다.

Eric Wendelin의 대답은 WebKit 브라우저를 타겟팅하는 데 좋은 답변입니다. 대상 웹킷에 추가

@-moz-document url-prefix() { 
    /* Gecko-specific CSS here */ 
} 

(감사 에릭 빈데) :

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Webkit-specific CSS here */ 
} 

당신은 아마 또한 안정적으로 CSS 해킹의 "기능 감지"스타일을 사용할 수 있습니다 Gecko 브라우저를 대상으로하는 좋은 방법도 있습니다 내의 구조는 이미 엔진을 올바르게 분리 했으므로 버전을 분리하는 것과 유사하며 특정 엔진 버전 간의 기능 불일치가 시간 경과에 따라 변하지 않는다고보다 안전하게 가정 할 수 있습니다.

분명히 IE와 다양한 버전을 분리하는 가장 좋은 방법은 여러 버전에서 IE가 지원하는 조건부 주석을 사용하는 것입니다.

0

@supports 기능 감지 기능은 Chrome 28 이상에서 작동합니다.

/* Chrome 28+ */ 

@supports (-webkit-appearance:none) { .selector { color:red; } } 

나는 browserhacks이 게시 - 그래서 browserhacks.com 또는 http://browserstrangeness.bitbucket.org/css_hacks.html#chrome에서 내 라이브 개인 CSS를 해킹 테스트 사이트에서 테스트 중.

거기에 많은 다른 사람들이있어 특정 최신 버전에도 적용되었습니다. 나는 그들이 당신을 즐겁게하기를 바랍니다.

관련 문제