That title isn't quite as crazy it seems. I promise!!
While researching for another question, I noticed the following in Stack Overflow's stylesheets:
...
width: auto;
...
width: 650px!ie7;
padding-bottom: 20px!ie7;
...
Is this an odd type of conditional styling? Is this a mistake? Assuming it isn't a mistake, does this work with all IE versions? Is there a way of specifying that a given rule should only be applied to versions of IE greater than – say – 7?
I have never encountered of this before – I've always used conditional comments for IE-specific styles (and for what it's worth, I prefer keeping all IE-specific styles completely separate).
I have heard of this before, but not with the exact text !ie7.
I found a reference here: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
!ie
Internet Explorer 7 fixed one of the
issues with the !important identifier,
but it still has problems when the
identifier has an error in it. If an
illegal identifier name is used in
place of important, Internet Explorer
7 and below will handle the property
normally instead of failing.
Therefore, in any style declaration
block, you can include properties
intended to only apply to Internet
Explorer and add an !ie identifier.
Almost any word can be used in place
of ie.
The !ie identifier allows the property
to be applied in IE 7 and below. It
may or may not work in future
versions. Warning: this uses invalid
CSS!
So, width: 650px!ie7; will be applied in only IE 7 and below.
The actual text ie7 is not required, but it's a sensible string to use, to remind people of the purpose behind the hack.
Related
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 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)
I came across this strange bit of CSS tonight...
display: inline !ie;
Now I've created and seen a lot of CSS and I have never seen this before or its magical powers.
You can add "!ie" at the end of any rule and it will only be applied by M$ Internet Explorer 6 & 7
Can anyone shed any light on this WTF?
Internet Explorer 7 and below have a few quirks related to the !important declaration, which is supposed to give a value higher importance than normal.[3] IE7 and earlier accept virtually any string in place of important and process the value normally, while other browsers will ignore it.
Taken from !Important Quirks section in CSS Filter - Wikipedia
At a guess, I would say that Internet Explorer tries to recover from what is quite clearly an error. The following would also work:
display: inline !pudding;
The specification says that if an invalid value is specified or an error occurs in a rule it should be ignored. It looks like most browsers stick to this but IE recovers for this specific situation.
In some cases, user agents must ignore part of an illegal style sheet. This specification defines ignore to mean that the user agent parses the illegal part (in order to find its beginning and end), but otherwise acts as if it had not been there.
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors
I tried to validate my site's CSS using the W3C CSS Validator. Unfortunately, reset-min.css from YUI framework produced parse error on the string " {*font-size:100%; ".
The validator results.
On further investigation I noticed the following error on Firefox's error console:
Warning: Expected declaration but found '*'. Skipped to next declaration.
I couldn't find any explanation for the meaning of the '*', nor references for a problem in this popular reset CSS.
What am I missing?
This is a hack for IE7 and lower. IE7 and lower will skip the asterisk and continue to parse the CSS as normal. Other browsers will just ignore the entire rule.
As an example, since CSS will use the last declared version of a rule, doing the following will cause IE7 and below to use a font-size of 113%, while other browsers use a font-size of 100% for paragraphs.
p { font-size: 100%; *font-size: 113%; }
There is a little more information at webdevout.net.
Personally, I think that it is acceptable to use such hacks for the purposes of working around the brokenness of IE. Apparently, Yahoo! feels the same way.
It's probably an IE compatibility hack.
There are many CSS syntax errors that some browsers (notably IE 6) will ignore and others won't. Some CSS files will use the errors to make a rule that one browser will see and another browser won't.
EDIT: For a full list, see here. In your particular case, that rule will be seen only by IE 7 or lower.
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.