Disallow properties with a star prefix

Rule from css under compatibility category

What is a trooper!

we have submitted your edit to the community for review! We'll review and make it live on the site in the next few hours, the internet thanks you :).

Browse another section of the knowledge base



Suggest an edit

Cancel

This rule has no content... yet.

Add content to this rule

Or just browse to view rules that have content



 

The star hack is a famous (or perhaps infamous) technique for applying CSS properties only to Internet Explorer prior to version 7. By placing an asterisk immediately before the property name, older versions of Internet Explorer treated it as if the asterisk isn't there while other browsers simply ignore it.

.mybox {
  border: 1px solid black;
  padding: 5px;
  width: 100px;
  *width: 200px; /* BAD */
}

How do I fix this ?

Assuming you're operating in strict mode, use child selectors instead of the star hack. First, write rules that would initially be applied to all browsers. When needed, add IE-specific properties to these rules (instead of properties targeting standards-compliant browsers):

/* GOOD: */
.mybox {
  border: 1px solid black;
  padding: 5px;
  width: 200px; /* IE < 7 specific style */
}

html > .mybox {
  width: 100px; /* Style override for standard browsers */
}

Why this works

Older versions of Internet Explorer don't understand child selectors, so the style override (targetting modern browsers) gets ignored.

Resources

Browse another section of the knowledge base



Signup icon
Ready to see how well your site scores?

Passmarked works best when you have an account. It allows you to keep a dashboard with saved data of the sites you have run through the system, we’ll alert you about important updates and you get access to the Passmarked Slack forum.

Sign up to get started