I've got the following CSS:
.class1,
.class2:hover,
.class3:disabled { color:red; }
This works in Chrome, Firefox, Safari, IE9 and IE7.
Only browser that doesn't support this is IE8.
Is there a way to make it work?
Tnx
IE 8 does not support the pseudoclass :disabled (neither does IE7) altogether. Multiple classes and :hover are supported.
Unlike IE7, IE8 behaves correctly according to ยง4.1.7 and ignores the entire rule due to the fact that it cannot interpret one of the selectors.
Related
I stumbled upon very weird bug. I defined a ::-webkit-input-placeholder rule which coloured the placeholder. Then I added the ::-moz-placeholder to it, combining them into one rule:
#textinput::-webkit-input-placeholder, #textinput::-moz-placeholder {
color: red;
}
Meanwhile each of these selector works on it's own (webkit only or moz only), together separated by comma they don't work at all.
See the examples in this jsfiddle, which you can try in both webkit and firefox.
What happens is that when a browser encounters an invalid selector it ignores the whole list of selectors. -moz is not recognized by webkit and -webkit is not recognized by firefox. That's why it fails in both browsers
BTW, according to this comment from CSS-Tricks, looks like IE7 behaves differently
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.
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;
}
On which elements the attribute hover works on all browsers ?
I guess the element is cross-browser. What about ? Is there any other element ?
For cross-browser I mean working on Safari, Chrome, Firefox, IE 9, 8 and possibly 7.
It's not dependent on which element it is applied to, apart from in IE5/6.
IE 5/6 supports it only on links.
IE 7 supports :hover, but not :active, on all elements.
Put this link on your bookmarks - it will save you plenty of time.
http://www.quirksmode.org/css/contents.html
So for IE7+ and all other browsers, it'll work fine.
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