CSS를 사용하여 Firefox만을 대상으로 지정하려면 어떻게 해야 합니까?

CSS를 사용하여 Firefox만 타겟팅

브라우저별 CSS 규칙을 사용하여 Internet Explorer를 타겟팅하는 조건부 주석 기능은 잘 알려져 있습니다. 그러나 문제가 Firefox에서 사용되는 Gecko 엔진에서 발생하는 경우에는 다른 접근 방식이 필요합니다. 다른 브라우저에 영향을 주지 않고 CSS 규칙을 Firefox에만 적용할 수 있는 방법은 무엇입니까?

브라우저 기능 기반 솔루션

JavaScript 브라우저 스니퍼는 Firefox에 대한 완전한 솔루션으로 간주되지 않습니다. 이 목적. 대신, 브라우저 기능을 활용하는 방법이 선호됩니다.

@-moz-document 사용

@-moz-document 규칙을 사용하여 Firefox를 구체적으로 타겟팅할 수 있습니다. '-moz-'로 시작하는 'url-prefix()' 함수가 있는 문서에 CSS 규칙을 적용하여 작동합니다. Firefox는 현재 이 기능을 지원하는 유일한 브라우저입니다.

사용 예

다음 예는 @-moz-document를 사용하여 h1의 색상을 변경하는 방법을 보여줍니다. Firefox에서만 요소가 빨간색으로 표시됩니다.

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

<h1>This should be red in FF</h1>

다른 브라우저에서는 h1 요소가 그대로 유지됩니다. @-moz-document 규칙을 인식하지 못하기 때문에 변경되지 않았습니다.

위 내용은 CSS를 사용하여 Firefox만을 대상으로 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!