What browsers and versions does the * CSS hack apply to? [duplicate] - css

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.

Related

what is the meaning of "*width" property in CSS? [duplicate]

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

Why declare the same CSS parameter twice, but second one with a asterisk? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS reset - purpose of asterik within a style
I was reading through the CSS styles for HTML5BoilerPlate, and I came across this unfamiliar line:
button, input, select, textarea {
font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;
}
In particular, the second ****vertical-align***, why call twice and put an asterisk in front of it.
If anyone knows the name of the technique or why it's used, it would be a great help
Thanks!
-Adrian
It's a nasty hack that can be used to target older versions of IE (other browsers ignore the invalid asterisk-prefixed value). Definitely not a good idea, far better to use IE conditional stylesheets or similar techniques.
It's a CSS hack for Internet Explorer browsers:
*property: value
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.
property: value applies the property value in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS.
from here
This is a css hack and used to target IE7 browser.
For more reference see How to Target IE6, IE7, and IE8 Uniquely with 4 Characters
It's an IE6 hack. If you put the * in front of a CSS attribute, it will only be read by IE6. Since IE6 usage is now down to 1% of the world, we can forget about this hack (unless you live in China)

What is the use of star sign in CSS? [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What does a star-preceded property mean in CSS?
I downloaded CSS file for one of jQuery scripts and it look like this
.usual div {
*margin-top:-15px;
clear:left;
background:snow;
font:10pt Georgia;
}
what is the use of star sign?
This is a hack for IE7 and under. Only those browsers will respond to the CSS rule, as it's considered invalid to all other browsers.
It's a hack to, in this case, change positioning in certain versions of IE.
The CSS standard says to ignore properties whose names are preceded with some character, but some versions of Internet Explorer ignore this. Some you might see are:
*someproperty: somevalue - IE7 and earlier affected
_someproperty: somevalue - IE6 and earlier affected
#someproperty: somevalue - I forget. Probably the same effect as *.
You should probably use conditional comments instead, however.

What does an asterisk do in a CSS property name? [duplicate]

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.

Purpose of asterisk before a CSS property

The following is taken from the Yahoo CSS reset. Can someone please explain the purpose of the asterisks?
body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
*font-size:small;
*font:x-small;
}
It is a browser specific CSS hack for versions 7 or below of Internet Explorer.
*property: value
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.
*property: value applies the property value in IE 7 and below. It may or may
not work in future versions. Warning:
this uses invalid CSS.
From: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
It's an Internet Explorer hack. If you add a non-alphanumeric character such as an asterisk (*) immediately before a property name, the property will be applied in IE7 and below, but not in other browsers.
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
All browsers but IE ignore the rules. It's known as the star hack. I think IE7 will ignore the rules in standards mode.
In this case, the font rule is set and then overridden for IE 6 and sometimes 7.
Placing characters like that is a hack/workaround for getting IE 6 to use a style's property, while hiding it from more "sane" browsers.
From here:
To cut a long story short, the Internet Explorer CSS parser is overly
aggressive at trying to discover the names of properties and will in
fact ignore leading non-alphanumeric characters. From my testing this
appears to be the case from at least IE5 onwards.
As far as I know, asterisk prevents Firefox to read the attribute, but is valid in IE.
It's a CSS hack, that rule will only be applied to IE7 and below.
I wouldn't recommended using it though, there's better ways to fix IE incompatibilities.

Resources