[css] CSS를 사용하여 Firefox 만 타겟팅

Program / 글쓴이

조건부 주석을 사용하면 브라우저 별 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>

스 니펫 확장

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

답변

@Antoine 의견에서 업데이트

당신이 사용할 수있는 @supports

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>

스 니펫 확장

여기에 더@supports

답변

IE, FF 및 Chrome의 세 가지 브라우저를 다루는 방법은 다음과 같습니다.

<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
    width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
    #categoryBackNextButtons{
        width:486px;
    }
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
    width:486px;
}
</style>
<![endif]-->

답변

다음은 Firefox 브라우저만을 대상으로하는 일부 브라우저 해킹입니다.

선택기 핵 사용.

_:-moz-tree-row(hover), .selector {}

자바 스크립트 해킹

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

미디어 쿼리 해킹

Firefox 3.6 이상에서 작동합니다.

@media screen and (-moz-images-in-menus:0) {}

자세한 정보가 필요하면 browserhacks를 방문하십시오 .

답변

우선, 면책 조항. 아래에 제시된 솔루션을 옹호하지는 않습니다. 내가 작성하는 브라우저 별 CSS는 IE (특히 IE6) 전용이지만, 그렇지 않은 경우가 있습니다.

이제 해결책입니다. 당신은 그것을 우아하게 요청하여 얼마나 우아한 지 모르겠지만 Gecko 플랫폼만을 목표로 할 것입니다.

이 트릭은 JavaScript가 활성화 된 경우에만 작동 하며 Firefox 및 기타 모든 Gecko 기반 제품에서 내부적으로 많이 사용되는 Mozilla 바인딩 ( XBL )을 사용합니다. 비교를 위해 이것은 IE의 동작 CSS 속성과 비슷하지만 훨씬 강력합니다.

내 솔루션에는 세 가지 파일이 있습니다.

  1. ff.html : 스타일을 지정할 파일
  2. ff.xml : Gecko 바인딩을 포함하는 파일
  3. ff.css : Firefox 특정 스타일

ff.html

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>

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

</body>
</html>

ff.xml

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
    <binding id="load-mozilla-css">
        <implementation>
            <constructor>
            <![CDATA[
                var link = document.createElement("link");
                    link.setAttribute("rel", "stylesheet");
                    link.setAttribute("type", "text/css");
                    link.setAttribute("href", "ff.css");

                document.getElementsByTagName("head")[0]
                        .appendChild(link);
            ]]>
            </constructor>
        </implementation>
    </binding>
</bindings>

ff.css

h1 {
 color: red;
}

업데이트 :
위의 솔루션은 그렇게 좋지 않습니다. 새 LINK 요소를 추가하는 대신 BODY 요소에 해당 “firefox”클래스를 추가 하는 것이 좋습니다. 그리고 위의 JS를 다음으로 바꾸면 가능합니다.

this.className += " firefox";

이 솔루션은 Dean Edwards의 moz-behaviors에서 영감을 얻었습니다 .

답변

-engine 특정 규칙을 사용하면 효과적인 브라우저 타겟팅이 보장됩니다.

<style type="text/css">

    //Other browsers
    color : black;


    //Webkit (Chrome, Safari)
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        color:green;
    }

    //Firefox
    @media screen and (-moz-images-in-menus:0) {
        color:orange;
    }
</style>

//Internet Explorer
<!--[if IE]>
     <style type='text/css'>
        color:blue;
    </style>
<![endif]-->

답변

아이디어의 변형 server-side USER-AGENT detector은 페이지에 첨부 할 스타일 시트를 파악하는 것입니다. 이 방법으로을 가질 수 있습니다 firefox.css, ie.css, opera.css, etc.

Javascript 자체에서 비슷한 것을 달성 할 수는 있지만 깨끗하지는 않습니다.

재정의하거나 기본값을 향상시키기 위해 default.css포함 all common styles and then specific style sheets을 추가하여 비슷한 작업을 수행했습니다 .