What are Star-Preceded Properties in CSS and Why Were They Used?

Unveiling the Star-Preceded Properties in CSS

In the realm of CSS, you may have encountered rules with properties preceded by an asterisk (*). These aren't mere decorations; they're part of a clever hack called the "star property hack."

The star (*) is a special character that marks the property as specific for Internet Explorer (IE). When IE encounters such a property, it interprets it differently than other browsers. This technique, often used in web development around the turn of the century, allowed developers to write rules that selectively targeted specific browsers.

For instance, consider the following CSS snippet:

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;
}

Notice the properties with an asterisk before them: padding and line-height. These rules are specifically tailored for IE. In this example, they set different values for the padding and line-height for IE than for other browsers, allowing for browser-specific adjustments.

This hack was particularly useful before the advent of CSS preprocessors and modern browser support. It provided a convenient way to target IE without having to write separate rules for each browser. However, as browser compatibility has improved, the need for such techniques has diminished, and they are rarely used in modern development practices.

The above is the detailed content of What are Star-Preceded Properties in CSS and Why Were They Used?. For more information, please follow other related articles on the PHP Chinese website!