CSS가 있는 Firefox만 대상으로 함
조건부 주석을 사용하면 브라우저별 CSS 규칙으로 Internet Explorer를 쉽게 대상으로 지정할 수 있습니다.
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
때때로 잘못된 행동을 하는 것은 게코 엔진(파이어폭스)입니다.단 하나의 다른 브라우저가 아닌 CSS 규칙으로 파이어폭스만을 대상으로 하는 가장 좋은 방법은 무엇입니까?즉, 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 확장입니다.⚠ 대부분은 사용되지 않습니다!
이 특정 CSS 확장에 대한 자세한 내용은 다음 질문을 참조하십시오.@-moz-document url-prefix()는 무엇을 합니까?
업데이트됨(@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]-->
여기 파이어폭스 브라우저만을 대상으로 하는 브라우저 해킹이 있습니다.
셀렉터 해킹을 사용합니다.
_:-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) {}
더 많은 정보가 필요하면 브라우저 해킹을 방문하십시오.
우선, 면책 조항입니다.저는 아래에 제시한 해결책을 별로 옹호하지 않습니다.제가 쓰는 유일한 브라우저별 CSS는 IE(특히 IE6)를 위한 것이지만, 그렇지 않기를 바랍니다.
자, 해결책.당신이 우아하게 해달라고 해서 얼마나 우아한지는 모르겠지만 Gecko 플랫폼만을 대상으로 할 것입니다.
이 트릭은 JavaScript가 활성화되고 Firefox 및 기타 모든 Gecko 기반 제품에서 내부적으로 많이 사용되는 Mozilla 바인딩(XBL)을 사용할 때만 작동합니다.비교를 위해, 이것은 IE의 행동 CSS 속성과 비슷하지만 훨씬 더 강력합니다.
내 솔루션에는 세 개의 파일이 포함되어 있습니다.
- ff.filename: 스타일을 지정할 파일
- ff.xml: Gecko 바인딩이 들어 있는 파일
- ff.css: Firefox 관련 스타일
f.1987년
<!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>
f.1987년
h1 {
color: red;
}
업데이트: 위의 솔루션은 그다지 좋지 않습니다.새 LINK 요소를 추가하는 대신 BODY 요소에 "firefox" 클래스를 추가하는 것이 좋습니다.그리고 위의 JS를 다음과 같이 교체하는 것만으로도 가능합니다.
this.className += " firefox";
그 해결책은 딘 에드워즈의 모즈 행동에서 영감을 받았습니다.
-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]-->
이제 Firefox Quantum 57이 스타일로 또는 Quantum CSS로 알려진 Gecko의 상당한 개선 사항과 함께 출시되었으므로 Firefox와 Firefox Quantum의 레거시 버전을 구별해야 하는 상황에 처할 수 있습니다.
제 대답은 다음과 같습니다.
사용할 수 있습니다.
@supportscalc(0s)▁in와 된 표현@-moz-document- 는 Stylo 테스려면하는트 - 의 시간 값을 .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대상으하로는것다를 말입니다. 지원되는 버전에만 관심이 있다면
@supports, Fx , Fx 22 상니다입입니다.@supports not (animation: calc(0s))필요한 것은 다음과 같습니다.@-moz-document url-prefix() { @supports not (animation: calc(0s)) { /* Gecko */ } }그러나 이전 버전도 지원해야 하는 경우 위의 개념 증명에서 설명한 것처럼 캐스케이드를 사용해야 합니다.
당신의 아이디어의 변형은 다음과 같습니다.server-side USER-AGENT detector페이지에 부착할 스타일 시트를 파악할 수 있습니다.이런 식으로 당신은 당신을 가질 수 있습니다.firefox.css, ie.css, opera.css, etc.
당신은 자바스크립트 자체에서 비슷한 것을 달성할 수 있지만, 깨끗하다고 생각하지 않을 수 있습니다.
저도 을 한 요.default.css다을포는함하를 하는.all common styles and then specific style sheets기본값을 재정의하거나 향상시키기 위해 추가됩니다.
이를 위한 유일한 방법은 다양한 CSS 해킹을 통해 다음 브라우저 업데이트에서 페이지가 실패할 가능성을 훨씬 더 높이는 것입니다.오히려, 그것은 js 브라우저 탐지기를 사용하는 것보다 덜 안전할 것입니다.
와 함께-moz
div:-moz-read-only {
background: green;
}
textarea:-moz-read-write {
background: green;
}
:-moz-any(div#foo) div.bar {
background: green;
}
li:-moz-first-node, li:-moz-last-node {
background: green;
}
CSS 지원은 JavaScript에서 사용할 수 있습니다.
if (CSS.supports("( -moz-user-select:unset )")) {
console.log("FIREFOX!!!")
}https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
파이어폭스에만 CSS를 적용하는 방법
아래 솔루션은 다양한 Firefox 브라우저 버전에서 적절한 Firefox 전용 CSS 지원을 제공합니다.
@supports (-moz-appearance:button) and (contain:paint) {
body {
background: red;
}
}
-moz-appearance:button에 Mozilla되었습니다. 그데그런.@supports규칙은 2019년까지 지원되지 않았기 때문에 이 규칙을 지원하는 가장 초기의 Firefox 브라우저가 될 것입니다. contain:paint규칙에서 Safari 브라우저를 제외합니다.Internet Explorer 및 초기 Trident Edge 브라우저는 지원하지 않습니다.@supports따라서 CSS 규칙 보기에서도 제외됩니다.지원해야 하는 알려진 Chrome 브라우저가 없습니다.-moz-appearance:button그렇게 제외되었습니다.
항상 그렇듯이, 나의 모든 CSS 솔루션은 100% 자바스크립트 프리입니다 :)
다음 코드는 스타일 린트 경고를 발생시키는 경향이 있습니다.
@-moz-document url-prefix() {
h1 {
color: red;
}
}
대신 사용
@-moz-document url-prefix('') {
h1 {
color: red;
}
}
도와줬어요!스타일 린트 경고에 대한 솔루션을 여기서 얻었습니다.
언급URL : https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css
'programing' 카테고리의 다른 글
| Git과 함께 프로젝트의 첫 번째 커밋을 변경하시겠습니까? (0) | 2023.05.31 |
|---|---|
| CMD.EXE(Windows Command Interpreter)는 스크립트를 어떻게 구문 분석합니까? (0) | 2023.05.31 |
| 개체에 키 값 관찰자가 연결되어 있는지 확인하는 방법 (0) | 2023.05.31 |
| 루비의 메서드 이름을 사용하여 문자열에서 메서드 호출 (0) | 2023.05.31 |
| 무언가를 실행하기 전에 모든 이미지가 로드될 때까지 기다리는 jQuery의 공식적인 방법 (0) | 2023.05.26 |