Which browsers support the CSS !important directive, and what are the various quirks amongst the different browsers that do support it?
Excellent browser support.
It was part of the CSS1 spec and has been around forever, and was always easy enough to implement that browsers appear to have gotten it right on the first try.
At the very least (from personal experience) IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
Pretty much supported by every browser that supports CSS (which is every browser you care about).
According to Wiki, IE7, FireFox 1.0, Safari 1.0, Opera 7, and Chrome fully support !important. IE6 supports it, but it does have a bug. If you do this, color will be red:
h1 {
color: green !important;
color: red;
}
Any browser which supports CSS1+ - ie, any browser that supports CSS - even IE. Even if the CSS implementations are not fully standards-compliant, !important is a core CSS feature.
To elaborate, IIRC, IE5+, all Firefox, most Netscape, Opera, Safari, Chrome.
All browsers apart from IE6 support it which makes it quite handy for CSS hacks. Example:
#someElement { width:200px !important; width:198px; }
All browsers apart from IE6 will render #someElement at 200px because they will honor the !important. IE6 however will just ignore the !important and render #someElement at 198px.
EDIT: Most common use case scenario for this (at least with me) is using it to correct the double margin bug in IE6
Related
Currently, when I code I use:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
But based on my tests, it didn't make any difference with any modern browser ( Chrome 33+, opera 25+, safari 8+). Internet Explorer 8 doesn't supports this property, but the vendor prefixes won't make any difference.
Is there any reason to keep them?
Use http://caniuse.com/#search=border-radius for checking such
Conclusion: No need for adding vendor prefixes for border-radius, as its supported in all major browsers (and IE9+). If you really need border-radius in IE8 check out: How to apply border radius in IE8 and below IE8 browsers?
But in 99% of cases border-radius is not crucial to a design. Employ the technique of graceful degradation and leave IE8 with square corners
You can also add PrefixFree to your page to cover you in a few more cases than just border-radius, as it will add these prefixes for you to be safer.
And for backwards compatibility using CSS3 with older versions of IE there is PIE (again not just for border-radius but others) and you can just add this where you need it:
behavior:url('pie.htc');
This just came to my mind while adding a border radius to my <div>. Since the border-radius CSS property works fine in Mozilla, why do we need -moz-border-radius?
For older versions of Firefox, namely Firefox 3.6 and earlier.
There's a (brief) history of using vendor-specific prefixes like this that enable the code to be read more easily by earlier browsers. In the beginning of HTML5/CSS3 support, each browser handled elements differently, so border-radius would be like:
.rectangle {
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
Nowadays, many modern browsers accept styling like 'border-radius' (for example, the latest Chrome, Safari, Firefox and IE9), so as minitech referred to earlier, these stylings are now used to support older versions of modern browsers.
Is it a bug that Firefox doesn't seem to support background-image swapping in pseudo-classes or is it that the other browsers are doing more than they should be?
I'm trying to figure out if I'm doing something wrong... this works in Opera and Chrome (haven't tested in IE yet)...
.myClass{
background-image:url('off.jpg');
}
.myClass:hover{
background-image:url('on.jpg');
}
However firefox just ignores this. I was hoping to avoid writing a javascript roll-over... this seemed like such an elegant solution, but I'm starting to suspect that I'm hosed.
Your page is in quirks mode, presumably, and :hover has some weird behavior in terms of when it applies or not in quirks mode. I suggest putting your web page in standards mode if you want browsers to actually behave compatibly on it, instead of explicitly asking them for buggy backwards-compatible behavior.
What version of FF are you using? A quick search revealed this possible issue similar to yours: http://support.mozilla.com/en-US/questions/746770
Try this to see if it works:
.myClass{
background-image:url('off.jpg');
}
.myClass:hover{
background-image:url('on.jpg');
}
[class="myClass"]:hover{ /* firefox fix */
background-image:url('on.jpg');
}
I'm currently trying to style a <meter> tag in all major browsers: IE7-9, FF, Chrome, Safari and even Opera. I've managed to remove the default <meter> styling by using the following CSS code:
meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
background: 0;
}
This technique works fine in all mentioned browsers, except Opera! It keeps showing the default green meter. Any idea on how to "destyle" the <meter> tag in Opera?
There is no way yet to style such elements in Opera. There is a proposal called Component Object Model which will obliquely allow us to do such styling when it is in a Working Draft, but we are not close to one.
Webkit has implemented a method that is not in any standard and just a suggestion, and I wouldn't assume this is how it would in the future. Most likely these pseudo-element names would change.
Before I start: shouldn't it be background: transparent; or background: inherit;? See the background property in HTML Dog.
I think you're misunderstanding. The meter::-webkit-meter-bar selector should have no effect at all on IE, FF and Opera since the -webkit part is a selector for Webkit. Chrome and Safari use Webkit as a render engine, but FF uses Gecko, Opera uses Presto, etc.
For FF you would probably need something like -moz-meter-bar...
For Opera I do not know. This Opera community page seems to imply that the prefix would be -o rather than -webkit or -moz.
Good luck.
It's also a good practice to include the "normal" selector when adding such rules.
(And if you're lucky, this might just make it work in Opera.)
meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::meter-bar,
meter::meter-optimum-value,
meter::meter-suboptimum-value,
meter::meter-even-less-good-value {
background: transparent;
}
I was looking at how some site implemented rounded corners, and the CSS had these odd tags that I've never really seen before.
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
I googled it, and they seem to be Firefox specific tags?
Update
The site I was looking at was twitter, it's wierd how a site like that would alienate their IE users.
The -moz-* properties are Gecko-only (Firefox, Mozilla, Camino), the -webkit-* properties are WebKit-only (Chrome, Safari, Epiphany). Vendor-specific prefixes are common for implementing CSS capabilities that have not yet been standardized by the W3C.
Twitter's not "alienating" their IE users. There's simply adding style for browsers that support it.
The -moz ones are firefox specific, the -webkit ones are for safari, chrome and a few other browsers that use that rendering engine.
These are early implementations of attributes that are defined in CSS3 so they will be coming in the future without the prefixes.
I suggest browsing the site from IE or some other browser. I bet you get different markup.
Those are for Firefox (the ones labeled -moz-border) and for Safari (-webkit-border).
Yes, anything with a -moz in front of it will only work in Firefox.
The -webkit ones will only work in webkit-based browsers like Safari, Chrome or Webkit.
See here for many ways to make rounded corners with just normal css tags.
Edit: I don't think that not having rounded corners is exactly alienating, just a slightly different look for IE.
Complete lists of all -moz and -webkit css styles if anyone wants to know