CSS로 Firefox 만 타겟팅
조건부 주석을 사용하면 브라우저 별 CSS 규칙으로 Internet Explorer를 쉽게 타겟팅 할 수 있습니다.
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
때때로 오작동하는 것은 Gecko 엔진 (Firefox)입니다. 다른 브라우저가 아닌 CSS 규칙으로 Firefox 만 타겟팅하는 가장 좋은 방법은 무엇입니까? 즉, Internet Explorer는 Firefox 전용 규칙을 무시해야 할뿐만 아니라 WebKit 및 Opera도 무시해야합니다.
참고 : '깨끗한'솔루션을 찾고 있습니다. 내 HTML에 'firefox'클래스를 추가하기 위해 JavaScript 브라우저 스니퍼를 사용하는 것은 내 의견으로는 깨끗한 것으로 간주되지 않습니다. 조건부 주석이 IE에만 '특별한'것처럼 브라우저 기능에 따라 달라지는 것을보고 싶습니다.
좋아, 찾았 어. 이것은 아마도 가장 깨끗하고 쉬운 솔루션이며 JavaScript가 켜져있는 것에 의존하지 않습니다.
@-moz-document url-prefix() {
h1 {
color: red;
}
}<h1>This should be red in FF</h1>또 다른 Mozilla 특정 CSS 확장을 기반으로합니다. 바로 여기에 이러한 CSS 확장에 대한 전체 목록이 있습니다 : Mozilla CSS Extensions .
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]-->
업데이트 됨 (@Antoine 댓글에서)
당신이 사용할 수있는 @supports
@supports (-moz-appearance:none) {
h1 { color:red; }
}<h1>This should be red in FF</h1>여기에 더@supports
다음은 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를 방문 하세요.
First of all, a disclaimer. I don't really advocate for the solution I present below. The only browser specific CSS I write is for IE (especially IE6), although I wish it wasn't the case.
Now, the solution. You asked it to be elegant so I don't know how elegant is it but it's sure going to target Gecko platforms only.
The trick is only working when JavaScript is enabled and makes use of Mozilla bindings (XBL), which are heavily used internally in Firefox and all other Gecko-based products. For a comparison, this is like the behavior CSS property in IE, but much more powerful.
Three files are involved in my solution:
- ff.html: the file to style
- ff.xml: the file containg the Gecko bindings
- ff.css: Firefox specific styling
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;
}
Update: The above solution is not that good. It would be better if instead of appending a new LINK element it will add that "firefox" class on the BODY element. And it's possible, just by replacing the above JS with the following:
this.className += " firefox";
The solution is inspired by Dean Edwards' moz-behaviors.
Using -engine specific rules ensures effective browser targeting.
<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]-->
A variation on your idea is to have a server-side USER-AGENT detector that will figure out what style sheet to attach to the page. This way you can have a firefox.css, ie.css, opera.css, etc.
You can accomplish a similar thing in Javascript itself, although you may not regard it as clean.
I have done a similar thing by having a default.css which includes all common styles and then specific style sheets are added to override, or enhance the defaults.
Now that Firefox Quantum 57 is out with substantial — and potentially breaking — improvements to Gecko collectively known as Stylo or Quantum CSS, you may find yourself in a situation where you have to distinguish between legacy versions of Firefox and Firefox Quantum.
From my answer here:
You can use
@supportswith acalc(0s)expression in conjunction with@-moz-documentto test for Stylo — Gecko does not support time values incalc()expressions but Stylo does:@-moz-document url-prefix() { @supports (animation: calc(0s)) { /* Stylo */ } }Here's a proof-of-concept:
body::before { content: 'Not Fx'; } @-moz-document url-prefix() { body::before { content: 'Fx legacy'; } @supports (animation: calc(0s)) { body::before { content: 'Fx Quantum'; } } }Targeting legacy versions of Firefox is a little tricky — if you're only interested in versions that support
@supports, which is Fx 22 and up,@supports not (animation: calc(0s))is all you need:@-moz-document url-prefix() { @supports not (animation: calc(0s)) { /* Gecko */ } }... but if you need to support even older versions, you'll need to make use of the cascade, as demonstrated in the proof-of-concept above.
The only way to do this is via various CSS hacks, which will make your page much more likely to fail on the next browser updates. If anything, it will be LESS safe than using a js-browser sniffer.
The following code tends to throw Style lint warnings:
@-moz-document url-prefix() {
h1 {
color: red;
}
}
Instead using
@-moz-document url-prefix('') {
h1 {
color: red;
}
}
Helped me out! Got the solution for style lint warning from here
CSS support has binding to javascript, as a side note.
if (CSS.supports("( -moz-user-select:unset )")){
console.log("FIREFOX!!!")
}https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
참고URL : https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css
'code' 카테고리의 다른 글
| iReport가 JRE 8을 사용하여 시작되지 않음 (0) | 2020.10.04 |
|---|---|
| java.util.Date에서 XMLGregorianCalendar로 (0) | 2020.10.03 |
| Unwind segues는 무엇이며 어떻게 사용합니까? (0) | 2020.10.03 |
| C # DateTime을 "YYYYMMDDHHMMSS"형식으로 (0) | 2020.10.03 |
| 외래 키 제한 테이블을 자르는 방법은 무엇입니까? (0) | 2020.10.03 |