Firefox 전용 CSS 규칙

조건부 주석은 브라우저별 CSS를 사용하여 Internet Explorer를 효과적으로 타겟팅하지만 Firefox를 구체적으로 타겟팅하는 문제는 여전히 남아 있습니다. 이 문제를 해결하려면 브라우저 스니핑 JavaScript를 피하고 조건부 주석과 유사한 브라우저 기능을 활용하는 솔루션을 찾으십시오.

독점 Firefox 타겟팅

이러한 기준을 충족하는 솔루션은 다음과 같습니다.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

이 규칙은 Firefox에 고유한 url-prefix() 함수가 있는 요소를 대상으로 합니다. 이는 CSS 규칙이 Firefox에서만 적용되고 Internet Explorer, WebKit 또는 Opera를 포함한 다른 브라우저에서는 적용되지 않도록 보장합니다.

이 규칙을 사용하려면 CSS 파일에 추가하기만 하면 됩니다. 브라우저가 HTML로 렌더링하면

요소는 Firefox에서만 빨간색으로 표시됩니다.

이 솔루션은 브라우저 기능에만 의존하여 JavaScript 속임수 없이 Firefox를 대상으로 하는 명확하고 매우 구체적인 방법을 제공합니다.