This answer says we can target Firefox using the following CSS:
#-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>
I want to apply a CSS rule to all browsers except gecko/Firefox, as the CSS rule doesn't display properly in Firefox.
How do I use CSS to target everything except Firefox?
Thanks.
The height of the blue bar in Safari and Chrome matches but in Firefox it is smaller. I would like to make them equal.
You could use a css hack for firefox:
#-moz-document url-prefix() {
header {
height:50px; /* or whatever fits best there */
}
}
This should only be interpreted by Firefox, while Opera, Chrome and Safari will use the default header {...} definition
I have to apply width to a div. The width value is need to be varied across browser. I cant apply conditional css . So can there be any hack for doing this.
FF
.apply{
width: 720px;
}
IE8
.apply{
width: 690px;
}
Can these be combined using some hack so that the respective properties will be applied automaticaly as per the browser.
For Firefox and IE specifically:
In CSS:
#-moz-document url-prefix() {
//Firefox-specific CSS here.
}
In HTML:
<!--[if IE 8]>
<style type="text/css">
//IE8-specific CSS here.
</style>
<![endif]-->
For IE8 and below:
.apply{
width: 690px\9;
}
I found this link, hope its useful to you.
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
Is the width for FF different from other browsers? (except for IE of course). If not, then set your CSS to:
.apply {width: 720px;}
For IE8, use conditional statements in HTML.
<!--[if IE 8]><style type=text/css>.apply {width: 690px;}</style><![endif]-->
Apply CSS Classes based on Browsers like FF and IE & IE Edge.
Use below sample css code.
/* This is for Firefox Browser */
#-moz-document url-prefix() {
.divColor {
color: red;
}
}
/* This is for IE Browser */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.divColor {
color: blue;
}
}
/* This is for IE Edge Browser */
#supports (-ms-ime-align:auto) {
.divColor {
color: green;
}
}
Is there a way to specify some CSS that firefox can read but webkit browsers cannot, or visa versa?
Seems you are not alone who wants this:
Targeting only Firefox with CSS
And you can view more tricks here:
http://stephenkui.com/code-css-only-to-firefox-ie-or-safari/
You could use javascript to do that..
there is also a hack
#-moz-document url-prefix() {
#my-id { font-size: 100%; }
}
This should target only firefox and not other browsers
Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.
Note: I'm looking for a 'clean' solution. Using a JavaScript browser sniffer to add a 'firefox' class to my HTML does not qualify as clean in my opinion. I would rather like to see something that depends on browser capabilities, much like conditional comments are only 'special' to IE…
This solution does not rely on JavaScript being turned on.
#-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>
It's based on yet another Mozilla specific CSS-extension. There's a whole list of these CSS extensions right here:
Mozilla CSS Extensions. ⚠ Do note that they are mostly deprecated!
For more information about this specif CSS-extension, see this question: What does #-moz-document url-prefix() do?
Updated(from #Antoine comment)
You can use #supports
#supports (-moz-appearance:none) {
h1 { color:red; }
}
<h1>This should be red in FF</h1>
More on #supports here
Here is how to tackle three different browsers: IE, FF and 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]-->
Here is some browser hacks for targeting only the Firefox browser,
Using selector hacks.
_:-moz-tree-row(hover), .selector {}
JavaScript Hacks
var isFF = !!window.sidebar;
var isFF = 'MozAppearance' in document.documentElement.style;
var isFF = !!navigator.userAgent.match(/firefox/i);
Media Query Hacks
This is gonna work on, Firefox 3.6 and Later
#media screen and (-moz-images-in-menus:0) {}
If you need more information,Please visit 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]-->
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 #supports with a calc(0s) expression in conjunction with #-moz-document to test for Stylo — Gecko does not support time values in calc() 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.
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.
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.
with -moz prefix
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 support can be used from JavaScript.
if (CSS.supports("( -moz-user-select:unset )")) {
console.log("FIREFOX!!!")
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
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
How to Apply CSS to Only Firefox
This solution below offers you decent Firefox-only CSS support in a wider range of Firefox browser versions...
#supports (-moz-appearance:button) and (contain:paint) {
body {
background: red;
}
}
-moz-appearance:button was supported in Mozilla/Firefox as early as 2006. But the #supports rule was not supported till 2019 so that would be the earliest Firefox browser supporting this rule. contain:paint excludes Safari browsers from the rule. Internet Explorer and early Trident Edge browsers do not support #supports so also excluded from seeing the CSS rule. No known Chrome browser should support -moz-appearance:button, so excluded.
As always, all my CSS solutions are 100% JavaScript-free :)