CSS 파이어폭스 CSS - 파이어폭스라면 다른 스타일 css 적용하기
페이지 정보
조회 609회 작성일 22-06-26 18:46
본문
파이어폭스 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]