Cross Browser CSS Opacity Property

Internet Explorer

With CSS3 new features most of the browsers don't use the same properties they need to be prefixed with the browser specific property.

For example firefox is always prefixed with a -moz- and the chrome/sarafi is prefixed with a -webkit-.

Below is a snippet to be used for cross browser transparency for the opacity property.

selector {
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial