Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the use of star-preceded property in CSS?
In web development, CSS (Cascading Style Sheets) enables the developers to determine the visual appearance and layout of a website. However, since different web browsers have varying levels of support mechanism for CSS, it can result in inconsistency while rendering the web pages by the compiler.
To overcome this compatibility issue, developers often opt for using CSS hacks to ensure that their web pages are displayed consistently across different browsers and devices. One such hack is the star-preceded property (also known as star property hack), which is used to target specific versions of Internet Explorer (IE) that have limited support for CSS.
In this article, we will explore the star property hack in CSS and discuss its uses and limitations. We will also provide examples of how this hack can be used effectively and best practices for implementing it in your CSS code.
Star-preceded Property
It is a CSS hack used to declare different properties for HTML elements. The property which is preceded by star (*) or underscore (_), are rendered simply in IE 7 and below versions of IE while for IE 8 and above, it is treated as junk by the compiler.
Syntax
element{
background-color: red; // for other browsers
_background-color: red; // for IE 6 and below
*background-color: red; // for IE 7 and below
}
Now, let’s understand this better with examples. We will use this hack for rendering the property in IE 6, IE 7 and other browsers.
Note − This hack is used in different browsers, so run the program in the specified browsers to observe the correct output.
Example
The following illustrates how to make the compiler render CSS properties to an element in Internet Explorer 7 and below.
<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 7 and Below Versions</title>
<style>
.my-div {
background-color: red;
width: 30%;
height: 80%;
padding: 3px;
letter-spacing: 1px;
margin-top: 40px;
/* default margin applied in all other browsers */
*margin-top: 0;
/* IE6 margin */
}
</style>
</head>
<body>
<h1>Star Preceded Property</h1>
<h3>Given below is a div element whose margin-top will be 0 in IE 6 while it will be 20px in all other browsers.</h3>
<div class="my-div"> This is my div element. </div>
</body>
</html>
For IE7 and below versions, the margin-top for the div element will be zero.
If you run the code in any other browser, the margin-top for the div element is 40px.
In above example, the CSS selector .my-div applies a top margin of 40 pixels. However, the *margin-top: 0; rule applies only to Internet Explorer 6, setting the margin to 0 pixels. The asterisk (*) before the property name (margin-top) is the "star" in the "star property hack". This is a syntax error in other browsers, so they will ignore this line.
Example
The following illustrates another way for making the compiler render CSS properties to an element in Internet Explorer 6 and below. It is not applicable in IE 7.
<!DOCTYPE html>
<html>
<head>
<style>
.my-div {
background-color: blue;
/* default background color */
width: 30%;
height: 80%;
padding: 3px;
letter-spacing: 1px;
_background-color: red;
/* background color in IE 6 and below versions */
}
</style>
</head>
<body>
<h1>Star Preceded Property </h1>
<h3>Given below is a div element whose background color will be red in IE 6 and below while it will be blue in all other browsers.</h3>
<div class="my-div"> This is my div element. </div>
</body>
</html>
For IE6 and below versions, the div element has background color will be blue.
If you run the code in any other browser, the background color will be red.
In above example, the CSS selector .my-div applies a red background color. However, the _background-color: blue; rule applies only to Internet Explorer 6, setting the background color to blue.
Uses and Limitations of Star Property Hack
The "star preceded property" was a technique used in the past to target specific versions of Internet Explorer with CSS styles. While it was effective in achieving this goal, it had some advantages and disadvantages.
Uses
It enables the web developers to apply various specific CSS styles to the older versions of Internet Explorer without affecting the result in all other browsers. This helps in creating consistent and uniform experience for the users across multiple browsers.
It was easy to use and reduced the number of codes, making it an attractive alternative for the web developers. It prevented them from writing conditional comments or specific stylesheets for specific browsers.
It was widely used and popular in the web development community, which made it easy to find examples and support. Also, it was user-friendly.
Limitations
The "star preceded property" was a hack. It was not a standard and compliant way of writing CSS codes. It relied on a bug in Internet Explorer to work. Also, it was not guaranteed to work in future modified versions of the browser or in other browsers altogether.
It made the code more difficult to read and maintain. Since it involved writing non-standard code, it was difficult to understand the purpose of the code without additional comments or documentation.
It could lead to unintended consequences, such as affecting other elements on the page or causing unexpected behaviour in the browser.
Conclusion
This technique is a way to target specific browsers with different styles, providing a fallback for older browsers like Internet Explorer 6. Overall, while the "star property hack" was useful in its time, it is no longer recommended as a best practice in web development. Modern web development techniques focus on using standard and compliant code that works across multiple browsers, rather than relying on browser-specific hacks.
86 Views
