Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the use of star-preceded property in CSS?
In web development, CSS (Cascading Style Sheets) enables developers to control the visual appearance and layout of websites. However, different web browsers have varying levels of CSS support, which can result in inconsistent rendering across different platforms.
To overcome compatibility issues, developers historically used CSS hacks to ensure consistent display across browsers. The star-preceded property (or star property hack) was one such technique used to target specific versions of Internet Explorer that had limited CSS support.
Syntax
selector {
property: value; /* Standard property for all browsers */
*property: value; /* Property for IE 7 and below */
_property: value; /* Property for IE 6 and below */
}
How Star-Preceded Properties Work
The star-preceded property is a CSS hack where properties prefixed with an asterisk (*) or underscore (_) are recognized only by specific Internet Explorer versions
*property: Recognized by IE 7 and below
_property: Recognized by IE 6 and below
property: Standard property recognized by all modern browsers
Modern browsers treat these prefixed properties as invalid syntax and ignore them, while older IE versions process them normally.
Example: Targeting IE 7 and Below
The following example shows how to apply different margin values for IE 7 and other browsers
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: #4CAF50;
width: 200px;
height: 100px;
margin-top: 40px; /* Default margin for modern browsers */
*margin-top: 10px; /* Margin for IE 7 and below */
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h2>Star Property Hack Demo</h2>
<div class="box">Sample Box</div>
</body>
</html>
A green box appears with 40px top margin in modern browsers, but would have 10px top margin in IE 7 and below.
Example: Targeting IE 6 and Below
This example demonstrates using the underscore prefix for IE 6 compatibility
<!DOCTYPE html>
<html>
<head>
<style>
.content {
background-color: blue; /* Default background */
_background-color: red; /* Background for IE 6 and below */
width: 250px;
height: 80px;
padding: 15px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h2>Underscore Hack Demo</h2>
<div class="content">This box is blue in modern browsers</div>
</body>
</html>
A blue box with white text appears in modern browsers, but would appear red in IE 6 and below.
Advantages and Limitations
Advantages
Simple implementation without conditional comments
Targeted browser-specific styling
Reduced code complexity compared to separate stylesheets
Limitations
Non-standard CSS that violates web standards
Makes code harder to maintain and debug
Relies on browser bugs rather than proper feature detection
Deprecated approach in modern web development
Conclusion
While star-preceded properties were useful for targeting legacy Internet Explorer versions, they represent outdated CSS practices. Modern web development focuses on progressive enhancement, feature detection, and standards-compliant code rather than browser-specific hacks.
485 Views
