프로그래밍 언어/HTML,CSS,JS

CSS로 Firefox 만 타겟팅

Rateye 2021. 6. 23. 10:37
728x90
반응형
질문 : CSS로 Firefox 만 타겟팅

조건부 주석을 사용하면 브라우저 별 CSS 규칙으로 Internet Explorer를 쉽게 타겟팅 할 수 있습니다.

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

때때로 오작동하는 것은 Gecko 엔진 (Firefox)입니다. CSS 규칙으로 Firefox 만 타겟팅하고 다른 브라우저 하나만 타겟팅하는 가장 좋은 방법은 무엇입니까? 즉, Internet Explorer는 Firefox 전용 규칙을 무시해야 할뿐만 아니라 WebKit 및 Opera도 무시해야합니다.

참고 : '깨끗한'솔루션을 찾고 있습니다. JavaScript 브라우저 스니퍼를 사용하여 내 HTML에 'firefox'클래스를 추가하는 것은 내 생각에 깨끗한 것으로 간주되지 않습니다. 조건부 주석이 IE에만 '특별한'것처럼 브라우저 기능에 따라 달라지는 것을보고 싶습니다.

답변

이것은 아마도 가장 깨끗하고 쉬운 솔루션이며 JavaScript가 켜져있는 것에 의존하지 않습니다.

@-moz-document url-prefix() { h1 { color: red; } }
<h1>This should be red in FF</h1>
@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>
@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>
@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>

또 다른 Mozilla 특정 CSS 확장을 기반으로합니다. 바로 여기에 이러한 CSS 확장에 대한 전체 목록이 있습니다 : Mozilla CSS Extensions .

출처 : https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css
728x90
반응형