CSS를 사용하여 Firefox 만 타겟팅

616

조건부 주석을 사용하면 브라우저 별 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에만 ​​'특별'한 것처럼 브라우저 기능에 의존하는 것을보고 싶습니다.

css  firefox  css-hack 
— avdgaag
소스
일부 유사한 질문에, 자신의 관련 답변 ...보고 할 수 있습니다 stackoverflow.com/questions/738831/...
— AnonJr
3
Windows 컴퓨터와 Mac에서 파이어 폭스를 타겟팅하는 방법이 있습니까?
— Kegan Quimby
4
<!-[if Gecko]> ... include ... <! [endif]->
— 정의

답변:

1252

알았어. 찾았 어. 이것은 아마도 가장 깨끗하고 쉬운 솔루션 일 것이고 JavaScript가 켜져 있지 않습니다.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>
스 니펫 확장

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

— 이오 누치 G. 스탠
소스
17
url-prefix ()는 "@ -moz-document"다음에 정확히 무엇을 의미합니까? 그냥 궁금 해서요
— Matt
17
@Matt는 CSS가 적용되는 웹 사이트를 필터링하는 방법입니다. 다른 옵션은 domain()필터 를 사용하는 것 입니다. 예를 들어 @-moz-document domain(google.com) {...}google.com 도메인에서만 동봉 된 CSS 규칙을 적용합니다.
— Ionuț G. Stan
10
IE에서와 같이 완전히 새로운 CSS 문서를 만들 필요가없는 방법이 마음에 듭니다.
— JD Isaacks
7
@JohnIsaacks IE 조건부 주석에 별도의 스타일 시트가 필요하지 않습니다. 인라인 일 수 있습니다. 그런 식으로하고 싶냐는 또 다른 질문입니다.
— Dylan
4
이 해결 방법은 더 이상 2018 년 3 월에 릴리스 된 Firefox 59에서 작동하지 않습니다 . bugzilla.mozilla.org/show_bug.cgi?id=1035091
— Jordan Gray
104

@Antoine 의견에서 업데이트

당신이 사용할 수있는 @supports

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

여기에 더@supports

— 라 포스토
소스
11
이것은 @ -moz-document url-prefix () 예제보다 훨씬 좋은 솔루션이며 SCSS 파서에서도 훌륭하게 작동하지만 다른 하나는 그렇지 않습니다.
— Alastair Hodgson
1
Firefox를 사용하고 있는데 여전히 흰색입니다. 사용중인 버전 때문입니까?
— 앙투안
3
@Antoine 당신이 맞아요! 최신 버전의 FF에서는 작동하지 않았습니다. 내 답변을 업데이트했습니다. 지금 작동합니다. 그것을 지적 해 주셔서 감사합니다!
— laaposto
83

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]-->
— 와카 스 알리 칸 푸 아르
소스
66
이것을 올바르게 이해하면 맨 위의 크롬은 크롬이 아니지만 Firefox 및 IE에 대해 무시하는 기본 동작을 지정합니다.
— Muhd
3
매우 유용한. 전 파이어 폭스 애호가로서, 나는 이와 같은 파이어 폭스 특정 해킹을해야한다고 생각하지만 작동하는 한 나는 그것을 살 수 있습니다.
— 스페이스 맥주
.css 파일에 추가하려는 경우 IE 검색 제안이 작동하지 않습니다. 그래도 HTML에 스타일 시트를 포함시킬 수 있습니다. CSS 파일에 IE CSS를 사용하려면 여기를 참조하십시오. keithclark.co.uk/articles/…
— Biepbot Von Stirling
16

다음은 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를 방문하십시오 .

— 흐 비얀
소스
1
"selector hack 사용"과 제공 한 예제가 어떻게 작동하는지 좀 더 자세히 설명해 주시겠습니까? 감사.
— jj_
1
기본적으로 두 번째 선택기를 첫 번째 브라우저를 이해하지 못하는 다른 브라우저에 숨기는 것입니다. 이 경우 Mozilla만이 이해 _:moz-tree-row(hover)하므로 .selector{}향후 처리 할 수있는 유일한 사람이됩니다 . 이 특정 해킹은 현재 모든 버전의 Firefox에서 작동 합니다. 자세한 내용은 browserhacks.com 을 확인하십시오 .
— jj_
1
미디어 쿼리 해킹 : \ @media 화면 및 (-moz-images-in-menus : 0) {}을 사용했습니다. 이것은 \ @media 화면 및 (-webkit-min-device-pixel-ratio : 0)과 잘 어울립니다. Visual Studio에서는 경고를 사용하지 않습니다.
— Dan Randolph 2018
1
-moz-images-in-menus : 0은 Firefox 52에서 제거되었습니다. bugzilla.mozilla.org/show_bug.cgi?id=1302157
— jonathanKingston
13

우선, 면책 조항. 아래에 제시된 솔루션을 옹호하지는 않습니다. 내가 작성하는 브라우저 별 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에서 영감을 얻었습니다 .

— 이오 누치 G. 스탠
소스
11

-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]-->
— 레이 약스
소스
7

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

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

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

— 케 코아
소스
이는 훌륭하고 안정적인 접근 방식과 같습니다. & mdash; 감사합니다 & mdash; 여전히 브라우저 스니핑에 의존합니다. 오히려 Gecko 전용 CSS 규칙과 같은 기능에 의존하는 것을 사용하고 싶습니다. 기본 스타일과 브라우저 별 애드온과 같은 기본 접근 방식을 사용합니다.
— avdgaag 2016 년
1
@avdaag : 기능 감지는 대부분의 경우에 선호되지만 특정 렌더링 엔진의 버그를 "수정"하기 위해 핵을 주입하려는 경우 이론적으로 사용자 에이전트를 대상으로하는 것이 최적의 솔루션입니다. 알려지지 않은 브라우저를 차별하지 않습니다. 그리고 user-agent 필드는 브라우저가 어떤 렌더링 엔진을 사용하고 있는지 알려주므로 희귀 한 Gecko 브라우저가 등장하더라도 여전히 수정이 가능합니다. 즉, 많은 브라우저가 브라우저 감지의 부적절한 사용으로 인해 사용자 에이전트 문자열을 위조합니다. 실제로 실제로는 잘 작동하지 않을 수 있습니다.
— Lèse majesté
6

Firefox Quantum 57은 Stylo 또는 Quantum CSS로 알려진 Gecko를 대폭 개선하고 잠재적으로 최신 기능을 향상 시켰으므로 Firefox의 기존 버전과 Firefox Quantum을 구별해야하는 상황에 처할 수 있습니다.

내 대답 에서 여기 :

당신은 사용할 수 있습니다 @supports로모그래퍼 calc(0s)와 함께 표현 @-moz-documentSTYLO에 대한 테스트 - 도마뱀에 시간 값을 지원하지 않습니다 calc()표현하지만 STYLO을 수행합니다

@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

개념 증명은 다음과 같습니다.

body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}
스 니펫 확장

레거시 버전의 Firefox를 타겟팅하는 것은 약간 까다로울 수 있습니다. @supportsFx 22 이상을 지원 하는 버전에만 관심이있는 경우 @supports not (animation: calc(0s))필요한 모든 것입니다.

@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}

...하지만 이전 버전을 지원해야하는 경우 위의 개념 증명에 설명 된대로 캐스케이드를 사용해야합니다 .

— BoltClock
소스
3

이를 수행 할 수있는 유일한 방법은 다양한 CSS 해킹을 통한 것이므로 다음 브라우저 업데이트시 페이지가 실패 할 가능성이 훨씬 높아집니다. js-browser 스니퍼를 사용하는 것보다 덜 안전합니다.

— jvenema
소스
0

다음 코드는 스타일 린트 경고를 발생시키는 경향이 있습니다.

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

대신에 

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

나를 도와주었습니다! 여기 에서 스타일 보풀 경고에 대한 해결책을 얻었습니다.

— 카일라스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.