파이어폭스 CSS - 파이어폭스라면 다른 스타일 css 적용하기 > 웹제작/운영

파이어폭스 CSS

파이어폭스라면 다른 스타일 css 적용 방법

브라우저마다 CSS가 모두 똑 같이 작용하는 것은 아니다. 특히 크로미엄, 게코, 웹킨 브라우저 엔진 때문에 화면이 다르게 보이기도 한다.

여기서는 파이어폭스라면 또 다른 css 스타일을 적용하기 위한 방법에 대해 설명한다.

파이어폭스 CSS - 파이어폭스라면 다른 스타일 css 적용하기

파이어폭스 전용 css 적용 방법과 예제

디자인을 위한 css 파일을 열어서 아래 코드를 추가해 주면, 파이어폭스일 경우에 스타일시트를 따로 적용해 줄 수 있다. 

[code]

@-moz-document url-prefix() { 

   .클래스 { 필요한 css 코드 }

}

[/code]

특히, 같은 페이지인데도 크롬과 파이어폭스에서 다르게 보인다면 이렇게 해서 극복할 수 있다. 

예를 들어, abc라는 클래스의 상단 마진만 폭을 다르게 하고 싶다면 아래처럼 하면 된다. 

[code]

<style type="text/css">

   .abc { margin-top:10px; }

      @-moz-document url-prefix() { 

         .abc { margin-top:20px; }

      }

</style>

[/code]

파이어폭스용 css 설명

여기서 사용된 @-moz-document url-prefix()는 파이어폭스일 경우 다른 css를 적용하기 위해 사용되었다. 

여기서 @-moz-가 바로 파이어폭스라면 적용하라는 css다. 

하지만 이것은 웹표준 규칙이 아니다. Mozilla 전용 확장 CSS코드다. 그러므로 다른 브라우저들은 이것을 무시한다.

즉, 파이어폭스에서만 적용된다는 말이다. 

@-moz-document의 뜻은 파이어폭스로 문서를 읽는다면... 이라는 뜻이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

웹문서에 해당되는 전용 코드라는 것이다. 

참고할만한 것으로, 파이어폭스용의 url-prefix()는 아래처럼 활용되기도 한다. 

[code]

@-moz-document url(http://www.w3.org/), url-prefix(http://www.w3.org/Style/), domain(mozilla.org)

[/code]

아래는 Firefox 59부터의 사용 방법이다.

[code]

@document url("https://www.example.com/")

[/code]