This question already has answers here:
Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
(2 answers)
Closed 5 years ago.
I'm styling an <input type="range" /> element.
For the track I'm using ::-moz-range-track for Firefox, and ::-webkit-slider-runnable-track for Chrome.
When I define the styles for Firefox, everything works fine, but when I add the Chrome-selector to the definition, it doesn't work in Firefox anymore.
Working in Firefox: https://jsfiddle.net/zr8p7vsy/
Not working in Firefox: https://jsfiddle.net/zr8p7vsy/1/
Having the same CSS styles twice – once with the Chrome selector, once with the Firefox selector – doesn't have this effect.
Why does the additional selector trigger this behavior in Firefox?
Edit: I noticed the second one also doesn't work in Chrome. When I remove the -moz- selector, it works. Also, when I add a non-browser-specific selector instead (e.g. .whatever) it works.
So it seems that multiple browser-specific selectors are crashing the whole styling block.
Why does it do that?
It's because ::-webkit-slider-runnable-track is not valid in Firefox.
This behavior is defined in the selectors level 3 standards
Warning: the equivalence is true in this example because all the
selectors are valid selectors. If just one of these selectors were
invalid, the entire group of selectors would be invalid. This would
invalidate the rule for all three heading elements, whereas in the
former case only one of the three individual heading rules would be
invalidated.
Because an invalid selector part - and since these are vendor extensions, they are not really valid - invalidates the whole rule.
Related
I had a situation where I had to apply a specific CSS style in Edge and IE browsers only. I found online that you can prepend your CSS selector with _:-ms-lang(x) and the style will only be applied in IE and Edge.
But I wonder, how exactly is this fix working? As far as I know, the comma will just separate different selectors, meaning that other browsers should also interpret and use this style.
Here is an example:
Let's say we want to apply a width of 94px to .selector element only in Edge and IE.
_:-ms-lang(x), .selector {
width: 94px;
}
The Edge browser will apply this style, and others won't. But why not?
The comma in the selector should apply the style to _:-ms-lang(x) element AND to .selector element.
Here is a source for this IE hack.
And one more.
In CSS, when a browser does not recognize part of a selector (or thinks there is an error in a selector), it completely ignores the entire rule.
Here's the section in the CSS3 spec outlining this behavior
The prelude of the qualified rule is parsed as a selector list. If this results in an invalid selector list, the entire style rule is invalid.
Here CSS2.1 talks about the special case of comma
CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.
Therefore when the other browsers try to parse the selectors, they find the _:-ms-lang(x) selector to be invalid and so ignore the entire rule (including .selector)
Also here is an excellent answer on why this behavior is desirable
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
I found these lines
width : 74.358974359%;
*width: 74.30578286963829%;
in style sheet but i can't understand what is the meaning of *width ???
i searched in Google but no result found.
thanks in advance
That's a CSS hack that targets Microsoft IE 7 only.IE7 will honor that CSS rule even though it is invalid due to the asterisk. All other browsers will ignore it. So by using the asterisk you can effectively target IE7 only. This is usually done to compensate for IE7 behaving badly and rendering content incorrectly and needing a special rule to correct it.
It is a syntax error. It's one of the IE hacks. Internet Explorer parses CSS in a slightly different way, allowing for certain hacks that will be ignored in other browsers. You can target different versions of IE with different hacks.
So in CSS, it makes the property name invalid and stops it being parsed.
Thanks to bugs in browsers, it is sometimes ignored. This effectively causes the property to apply only to browsers featuring that particular bug — IE7.
In general, it should be avoided in favour of conditional comments.
Unrecommended hacks
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Combine CSS Attribute and Pseudo-Element Selectors?
http://jsfiddle.net/BC3Td/
I have tested this in firefox and opera and there are no issues, however chrome, safari and mobile safari all ignore the second pseudo element css and default to the first, can anyone shed light on what is happening here?
and how can this be achieved without adding classes/id's?
ANSWER:
This is a webkit bug, the fix is relatively simple, if you add the following css (or any css rule that involves purely the (non-pseudo) element then it will fix itself.
#test-div a[href*="tel"],
#test-div a[href*="mail"] { display:block; }
How weird?
updted (working) fiddle is here: http://jsfiddle.net/BC3Td/3/
Sounds like a bug in Webkit selection. The psudeo selector does work if the element is also selected directly however (an effective no op used here):
http://jsfiddle.net/BC3Td/2/
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 3 years ago.
I know what an asterisk does in a selector for CSS (What does an Asterisk do?), but what does it do in a property name? Here is an example of CSS used by YUI. I don't know what the *display does.
.yui-button .first-child
{
display:block;
*display:inline-block;
}
It is a syntax error. So in CSS, it makes the property name invalid and stops it being parsed.
Thanks to bugs in browsers, it is sometimes ignored. This effectively causes the property to apply only to browsers featuring that particular bug — IE7.
In general, it should be avoided in favour of conditional comments.
It's an IE hack. The second declaration will be applied by IE7 and older (thus overriding the first declaration), while other browsers will ignore it and continue applying the first declaration instead.
Also, this is invalid CSS syntax.
its like the underscore for ie6. but for ie7
if you put the asterisk the property will only be used in ie7 and older browsers.
its an hack...
It's one of the IE hacks. Internet Explorer parses CSS in a slightly different way, allowing for certain hacks that will be ignored in other browsers. Google for it. You can target different versions of IE with different hacks.
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
I have been looking at a hack to solve a CSS problem I have. I have used one to create a custom rule for Internet Explorer.
margin-top:45px;
*margin-top:0px;
Does this hack apply to all IE browsers? Does this hack appear in any versions of Firefox or Safari?
This applies to IE7 and below. But be aware that this is not valid CSS, and it could break at any time. See here for a more comprehensive list of the various CSS hacks and which browsers they affect.
Although Internet Explorer 7 corrected its behavior when a property name is prefixed with an underscore or a hyphen, other non-alphanumeric character prefixes are treated as they were in IE6. Therefore, if you add a non-alphanumeric character such as an asterisk (*) immediately before a property name, the property will be applied in IE and not in other browsers. Unlike with the hyphen and underscore method, the CSS specification makes no reservations for the asterisk as a prefix, so use of this hack could result in unexpected behavior as the CSS specifications evolve.
I'd strongly recommend reconsidering whether you really need this hack, and if there isn't a better way to do what you want.