What is the use of star-preceded property in CSS ?
Last Updated :
29 Jan, 2020
It is a simple hack also known as the ‘* property hack’. It is useful when it comes to dealing with the older versions of Internet Explorer (i.e. IE6 and IE7). When we add * before any property name in CSS, it targets IE 7 and below version of IE browsers and reflects when loading the same CSS on the browser while it acts as junk for all other browsers including IE 8 and above.
Note: We can use underscore (_) for IE6 and the star (*) for IE7. Add _ or * in front of a CSS property when required.
Syntax:
color: blue; /* all browsers */
*color: blue; /* IE7 and below */
_color: blue; /* IE6 and below */
Below example illustrate the star-preceded property in CSS:
Example: In this example, we will see how an element preceding with a * behaves differently for different versions in IE. We can see that for element h1 we have added the property color beginning with a *.
<!DOCTYPE html>
< html >
< head >
< style >
p {
background-color: pink
}
h1 {
*color: green
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< b >
A Computer Science Portal
for Geeks.
</ b >
< p >
This is an example for
star-preceded property
< p >
</ center >
</ body >
</ html >
|
Note: It is a kind of bug and it will only works for IE7 and below.
Output:
- Output For IE 7 and below: We can see that our h1 property with text GeeksforGeeks is green in color thus, *property name is excepted by this browser version.
- Output For IE 8 and above: We can see that our h1 property with text GeeksforGeeks is black in color showing that *property name is treated as junk in browser IE 8 and above.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...