Firefox 에서 겨냥한 전용 CSS

조건부 주석 CSS 규칙을 사용하여 쉽게 타겟으로의 함께 인터넷 익스플로러 브라우저 별:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

게코 엔진 (Firefox) 이 무례한 행동 하는 경우가 있습니다. 어떤 약간만이라도 최선의 방법은 아닌 다른 브라우저 Firefox 를 단일 타겟으로의 전용 CSS 규칙을 가능 즉, 인터넷 익스플로러, 오페라 뿐만 아니라 WebKit 규칙요 firefox 국한됨 무시하시겠습니까 한다고 한다.

  • 39, & # 39 m Note:* I& 찾고, clean& # 39. 솔루션. # 39, & # 39 를 사용하여 JavaScript 있지만브라우저에 sniffer 추가하기에서는 firefox&. 내 의견으로는 HTML 로 자격이 없는 클래스 내 청소하십시오 않습니다. 차라리 생각하신거야 보고 싶다, 단지 & # 39 브라우저 기능을 따라 조건부 주석 처럼 special& # 39. ie 로.

Shishir Morshed
편집된 질문25일 12월 2015 в 8:13
프로그래밍
firefox css css-hack
4일 6월 2009 в 8:19
11 파운드
질문에 대한 의견 (3)
해결책

39, ve I& 확인, 그것을 발견했다. 이것은 아마도 가장 쉽고 청소하십시오 솔루션이므로 거기에 의존할 필요는 없으며 JavaScript 기술입니까 켜졌음.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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

끝 - &lt 스니핏 >;!

39 의 또 다른 mizilla it& 따라 특정 CSS 확장자입니다. # 39 의 전체 목록을 there& 이러한 CSS 확장장치 여기서요: [Mizilla CSS 확장장치] (https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions).

VXp
편집된 답변19일 4월 2018 в 11:00
해설 (12)

어떻게 이 문제를 다루기 위해 세 가지 다른 브라우저: IE, 크롬, FF


/*This will work for chrome */
#categoryBackNextButtons
{
    width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
    #categoryBackNextButtons{
        width:486px;
    }
}
Barney
편집된 답변16일 6월 2015 в 8:33
해설 (3)
  • 업데이트되도록 * () 의 @Antoine 주석문입니다.)

'' @Supports 사용할 수 있습니다.

<! - begin 스니핏: js 숨기십시오: &gt 거짓값 -;

@supports (-moz-appearance:none) {
    h1 { color:red; }

}

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

끝 - &lt 스니핏 >;!

Here @supports) 에 '보다'

laaposto
편집된 답변29일 11월 2017 в 10:22
해설 (4)

다음은 일부 공략하기 위한 전용 브라우저를 브라우저 Firefox 학스

선택기를 사용하는 hacks.

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

JavaScript 학스

var isFF = !!window.sidebar;

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

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

미디어 쿼리하지 학스

이는 gonna work on, 모질라 파이어폭스 3.6 이상

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

추가 정보가 필요하면 www. merant. 브라우제르하크스

Hbirjand
편집된 답변26일 8월 2014 в 10:34
해설 (4)

첫째, a 부인문을. 난 내가 don& # 39, t really 정보지지자 솔루션에 대한 χ02 같습니다. Css 는 IE (특히 IE6), 비록 유일한 있지만브라우저에 특정 I wish I write it wasn& # 39, t 케이스.

이제 솔루션입니다. 그래서 내가 어떻게 그런 있습니다 수 있지만, 우아한 don& # 39 는 잘 모르는 것 # 39 의 우아한 it& 타겟으로의 게코 플랫폼의.

하지만 이 때 JavaScript 활성화되었는지 apc® 경우에만 사용 및 mizilla 바인딩 (스블), 즉 Firefox 에서 많이 사용되는 내부 및 기타 모든 게코 기반 제품. 그러나 CSS 속성을 대한 비교, 이건 마치 비헤이비어를 IE 에서 훨씬 더 강력한.

3 개의 파일이 포함되어 있는 내 해결책:

  1. 프리트믈: 스타일 파일
  2. 프리스마르: 게코 바인딩 포함된 파일
  3. 프리크스: Firefox 특정 스타일
  • 프리트믈 *





body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}




<h1>This should be red in FF</h1>
  • 프리스마르 *
<?xml version="1.0"?>
  • 프리크스 *
h1 {
 color: red;
}
  • Update: 위의 솔루션이므로 좋은 것은 아니다. 대신 새로운 요소를 덧붙이기 게 좋겠다고 경우 해당 링크를 추가할 예정입니다 , * &quot firefox&quot. 클래스 몸에 요소. S # 39 위, JS 를 대체하여 및 it& 가능한, 그냥 다음과 같다.
this.className += " firefox";
해설 (0)

엔진 특정 규칙을 사용하여 있지만브라우저에 유효인 대상으로 합니다.



    //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;
    }


//Internet Explorer
해설 (0)

사용자 에이전트 없이 '변형' 를 분석할 수 있는 것이 더 투명지에 서버측 첨부하려면 스타일시트가 페이지에 대한. 이렇게 리자크스 퍼라이크스 등 ',' 피세우스카스, 있을 수 있습니다.

  • 수행할 수 있는 것 자체를 고려하지 않을 수 있지만, 이를 clean.* Javascript 에서 비슷한

내가 행한 모든 것을 포함하는 일반적인 데포t.크스 비슷한 구축하여 '' 다음 '스타일', 또는 특정 스타일 시트 가속화합니다 무시하려면 높이는 설정값으로.

Anzil khaN
편집된 답변16일 3월 2018 в 7:40
해설 (2)

이제 Firefox 는 실질적인 개선을 위한 - 57 - Quantum out with CSS, 또는 통칭 스티요 게코, 잠재적으로는 알려진 양자 교도관님도요 찾을 수 있는 상황에서 기존 버전의 파이어폭스, 파이어폭스, 양자 구별할 수 있습니다.

From my 오토메이티드 [here] (https://stackoverflow.com/questions/47575563/conditional-css-rule-targeting-firefox-quantum/47798653 # 47798653):

&gt. '와' 계산 '@supports 사용할 수 있습니다 (0 년대)' 과 함께 '-' @-moz-document 표현식에서는 테스트하려면 스티요 시간 값을 계산 () '가 아니라' 표현식에서는 스티요 게코 지원하지 않습니다.

&gt. <! - 언어: &gt css 랭 -;

&gt. @-moz-document uirl 접미어입니다. () { &gt. @supports (애니메이션: 계산기 (0 년대) { &gt. / 스티요 / &gt. } &gt. }

&gt. # 39 의 here& 개념 증명:

&gt. <! - begin 스니핏: js - &gt.

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

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

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}

끝 - &lt 스니핏 >;!

&gt. 기존 버전의 경우 까다로운 - # 39 는 약간 대상으로 Firefox 버전 ',' 를 지원하는 @supports you&, re 관심을 가질 뿐 아니라, '22 위로 @supports 원하는거요 Fx (애니메이션: 계산기 (0 년대)) '가 필요한 모든 것:

&gt. <! - 언어: &gt css 랭 -;

&gt. @-moz-document uirl 접미어입니다. () { &gt. @supports not (애니메이션: 계산기 (0 년대) { &gt. / 게코 / &gt. } &gt. }

&gt. . # 39, 심지어 신앙이니라 이전 버전을 지원하는 데 필요한 you& 할 수있을 [활용할 케스케이드] (https://stackoverflow.com/questions/16584228/what-is-the-most-practical-way-to-check-for-supports-support-using-only-css/16585200 # 16585200) 위에 있는 것처럼 개념 증명.

BoltClock
편집된 답변14일 12월 2017 в 4:31
해설 (0)

이는 CSS 를 통해 다양한 작업을 수행할 수 있는 유일한 방법은 hacks 페이지에 발쿰치로 훨씬 실패할 가능성이 높은 있지만브라우저에 다음 번 업데이트. 덜 안전하게 사용할 때보다 js 브라우저 sniffer 뭔가있다면 될 수 없다.

해설 (0)

다음 코드는 스타일입니까 lint 개의경고 버리는 경향이 있다.

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

대신 사용하여

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

나를 도와준 아웃해야! 이 솔루션은 보풀 잡을라는데 스타일에 대한 경고를 보낸 here

해설 (0)

CSS 지원 는 javascript 에 바인딩하면 등 때는기대어 참고.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

if (CSS.supports("( -moz-user-select:unset )")){
  console.log("FIREFOX!!!")
 }

끝 - &lt 스니핏 >;!

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

해설 (0)