What does the star do? What is it called? For me it is some kind of wild card. What is it called so I can read about it?
#div {
*zoom: 1; /*this ... *
zoom : 1;
display: inline;
*display: inline; /*... and this, whats the difference? *
}
I know what this means (all elements):
* {
..css code
}
In simple words, its the key to target css on different IE browser versions. It can also be called as an CSS Hack.
#div {
*zoom: 1; /*Only works on IE7 and below*/
zoom : 1;
display: inline;
*display: inline; /*Only works on IE7 and below*/
}
Means this CSS works only on IE7 and below. It's kind of a hack we can use to apply CSS on IE7 and below.
Here is how to target IE6, IE7, and IE8 Uniquely
#div{
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
CLICK HERE if you want learn more about browser specific CSS.
star-property hack The IE family ignore the *, however, and apply the property without it.This hack is used in order to deliver style rules only to Internet Explorer 7 (and lower). It relies on a wrong DOM implementation that affects Explorer since 1997. According to the specifications, the actual root element of any well-formed (X)HTML document is the html element. Instead, Explorer 7 (and lower) considers the html element as wrapped in another unknown element.
*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.
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
In your context it seems to be the star hack. It does that property only applies in some versions of IE, depends of its use.
You could retrieve more info here.
What does the * in css? -> Selects all the elements after specified elements for eg. div.red *{color: red;} will result all color red after its class red even if you define the other color inside div.red hence you know * means ALL
See This Fiddle
* zoom: 1; -> here you have placed * at first, so this would hack IE only that is this type of style works only in IE and other browsers neglect this.
* it is called asterisk in simple language and in coding language this is called Universal Selector
Related
I am using the micro clearfix hack on a website I am developing. It works fine but I have one question about it; that I was hoping someone could clear up for me.
On the above webpage, the clearfix hack contains:
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
Obviously just adding that to my css triggers a warning because of the *. How exactly do I include the above rule to trigger hasLayout? Do I simply remove the *? Or is there a way to include an if IE 6/7 within a stylesheet itself?
I wasn't exactly clear on if I should remove the * or just paste the code as is.
Thanks in advance.
Or is there a way to include an if IE 6/7 within a stylesheet itself?
Use the IE6/7 media query:
#media, { .cf { zoom: 1 } }
References
Sitepoint CSS Reference: #media
Why does not the css rules work in Chrome?
css:
.selector { (;property: value;); }
or
.selector { [;property: value;]; }
First off, this isn't a hack. Equally, this doesn't only apply to Chrome v30. The same functionality applies in all other modern browsers.
As defined here in the CSS2.1 specification:
...parentheses (( )), brackets ([ ]), and braces ({ }) must always occur in matching pairs and may be nested.
When you add a (, for instance, Chrome will wait for the closing ) before attempting to apply any styles. However, no CSS property is wrapped in parenthesis like this, so thus no style is applied.
Take this example:
.selector {
(color:#f00;); /* Invalid, ignored. */
font-weight:Bold; /* Valid, not ignored. */
}
Here the color declaration is in parenthesis and the font-weight declaration isn't. Chrome will ignore the color property altogether as this is not a valid CSS declaration, but still process the font-weight as normal:
JSFiddle demo.
Parenthesis, brackets and braces like this are simply invalid CSS declarations and are ultimately ignored in the same way that the following would also achieve the same:
.selector {
color; /* Invalid, ignored. */
font-weight:Bold; /* Valid, not ignored. */
}
It's also worth noting that Chrome will treat anything between parenthesis and brackets as a single CSS declaration. In your case, (;property: value;); is treated as one declaration, regardless of the extra semicolons.
It's also worth noting that if you fail to match the closing pair prior to ending the selector (with a }), any selector given after will not be processed (example).
That particular set of CSS oddities is actually known, and what is called bracket hacks for Safari (yes they have a name). They also worked in Chrome until version 28. It works in versions 7.0 and older in Safari at this time (version 8 is the current version of Safari as I am writing this update).
I just found the following snippet in a CSS file:
position: fixed;
_position: absolute;
What does this underline mean in front of the second position statement?
It's one of a number of CSS "hacks" used to target specific versions of Internet Explorer.
selector {
property: value; /* all browsers */
property: value\9; /* < IE9 */
*property: value; /* < IE8 */
_property: value; /* < IE7 */
}
Generally speaking you should avoid CSS hacks in favor of conditional classes on HTML.
This is an old CSS-Hack for IE5, 5.5 & 6.
All browser will display the position:fixed while IE5 - 6 use the _position, so it display it absolute.
But note: This CSS won't validate! And it won't work for IE5/MAC
This is a way to give alternative directives to WinIE browsers, since they don't support certain features of the latest CSS definitions. Other browsers will ignore the whole definition (e.g. _position: relative), while WinIE will treat it as position: relative.
In my site I need to give support for IE7. Now everybody knows that styling things in IE7 is not an easy task. People uses conditional statement in HTML to load specific stylesheet for specific version of IE. But in my case I cannot use such conditional statement, since I am in WebCenter Portal application. Here I need to use skin. It is also a CSS file.
So I want to know is there any formula exists by which I can specify a particular css attribute's value for IE7.
Say I have a class:
.filterbox{
padding:12px 0;
margin:12px 0
}
Now this margin is okay for every browser except IE7 (I didn't test it in IE<7). In IE7 if I use margin:0; then the style would be perfect, but it then breaks in other browser.
How can I specify this margin in a same css class for both in IE7 and non-IE7?
Regards.
Only use this hack if you really can't use conditional comments! They are the best solution for solving IE problems. Hacks like this will quickly mess up your CSS and also make it invalid.
So, here is a hack that targets IE7 (of course this comes after your normal definition):
html>body #filterbox {
*margin: 0;
}
from CSS hacks – Targetting IE7 on Thought-After
you can solve it if you seperate the style sheets for IE7 and other browser:
/* other browsers */
.filterbox{
padding:12px 0;
margin:12px 0
}
/* IE 7 */
*:first-child+html .filterbox
{
padding:12px 0;
margin:0;
}
Attention! You have to define the styles for Ie 7 at last, because the browser will overwrite the first definitions. The others will ignore the last ones.
I was looking at a css file today and found the following rule set:
div.with-some-class {
display:block;
margin:0;
padding:2px 0 0 0;
*padding:1px 0 0 0;
font-size:11px;
font-weight:normal;
*line-height:13px;
color:#3D9AD0;
}
What does the star mean in *padding and *line-height?
Thanks.
This is the "star property hack" along the same lines as the "underscore hack." It includes junk before the property that IE ignores (the * works up to IE 7, the _ up to IE 6).
In CSS? Nothing; it is an error.
Due to bugs in some versions of Internet Explorer, they won't correctly ignore the invalid property name, so this is one way of providing CSS that is specific to those browsers.
Using conditional comments is clearer and safer though.
The asteriks character is a valid wildcard in CSS. Use of it alone means the following CSS properties will be used against all element nodes in the DOM. Example:
*{color:#000;}
The above property will be applied to all DOM elements, thereby defeating the natural cascading in CSS. It can only be overridden by specifically tageting DOM elements where that targeting begins a unique identifier reference. Example:
#uniqueValue div strong{color:#f00;}
The above property will override the wildcard and make the text of all strong elements that occur in a div inside an element with an id attribute value of "uniqueValue".
Using a universally applied wildcard, such as the first example, can be a quick and dirty method for writing a reset stylesheet. It is quick and dirty because granular definition of presentation after the wildcard will likely create an extremely bloated stylesheet. If you are going to use the wildcard I would suggest using it more specifically, such as:
* strong{color:#f00;}
The above example will make the text of all strong elements color red regardless of other CSS properties not specified with a unique identifier. This is considered much safer than using the "!important" declaration as that declaration is known to cause interference with natural functionality of the intended behaviors and is a maintanence nightmare.
The asteriks in your example are in the wrong place as they seem to occur inside the property declarations, the code that goes inside curly braces, and that will likely cause an error.
This is a hack for IE7.
If you write this:
.test {
z-index: 1;
*z-index: 2;
}
on all navigator which respect the W3C Standard <div class="test"></div> HTMLElement have a z-index: 1 but for IE7, this element have a z-index: 2.
This is not standard.
To achieve same thing with W3C Standard, follow this steps:
Add some Internet Explorer Conditional Comment (this is a simple HTML Comment for all other navigateur so, it's a standard way).
<!--[if IE 7]><html lang="fr" class="ie7"><![endif]-->
<!--[if gt IE 7]><!--><html lang="fr"><!--<![endif]-->
And use the previous rules like this:
.test {
z-index: 1;
}
.ie7 .test {
z-index: 2;
}