How have CSS gradients evolved in Internet Explorer?

Gradients in Internet Explorer: An Evolution

For implementing gradients in Internet Explorer, we need to use vendor prefixes depending on the version. While earlier versions used proprietary filters, IE9 introduced support for vendor-prefixed CSS gradients.

IE9 Vendor Prefix:

In IE9, the vendor prefix for gradients is '-ms-':

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')";

Additional Vendor Prefixes:

For compatibility with other browsers, consider using additional vendor prefixes as well:

background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* Mozilla Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999)); /* Safari/Chrome (old syntax) */

Opera:

Opera's vendor prefix for gradients is '-o-':

background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

Modern Syntax:

In modern browsers (IE10 ), the recommended way to create gradients is using the unprefixed 'linear-gradient' keyword:

background-image: linear-gradient(top, #444444 0%, #999999 100%);

This syntax is supported by all major browsers including IE10 , Firefox, Safari, Chrome, and Opera.

The above is the detailed content of How have CSS gradients evolved in Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!