Not all CSS properties work for all web browsers. Fortunately, the compatibility of most properties can be improved by using compatibility prefixes and/or different syntaxes. Most of the time you will not have to worry about this because most properties work using the standard syntax in all fairly up-to-date browsers. However, some properties require this extra attention.
Most of the properties that require compatibility attention are not used frequently. Some properties that require compatibility attention include: transform, border-radius, animation, and @keyframes. Template:Border-radius can be used to quickly and easily address the compatibility of the border-radius property. Animation and @keyframes are properties that only Staff Members need to worry about since you need admin permissions to create animations.
What you need to know in a nutshell[]
- Remember to pay extra attention to the transform, border-radius, animation, and @keyframes CSS properties.
- Template:Border-radius can replace the border-radius property in an element and ensure the most compatibility.
- The background-image property is repeated for a reason in gradient code.
- A gradient will not appear in some browsers if one or more of the background-image properties are omitted.
- If a property is called more than once in the same element, the browser will render the one that is listed last and compatible.
Compatibility Prefixes[]
One of the ways to address compatibility is compatibility prefixes. These prefixes are added to the front of a property name in a statement.
Below is the standard syntax of the border-radius property.
border-radius: 10px;
The standard syntax will work in most browsers, but the property will work in more browser versions if the compatibility prefixed properties are used. The property is repeated but each statement is started with a different prefix. The element below uses the compatibility prefixes for the border-radius property:
<div style="border: black solid 5px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">Text</div>
Notice how the prefix comes before the normal property name and has a dash on both sides of it.
As stated above, Template:Border-radius can be used instead. This element is equivalent to the above element:
<div style="border: black solid 5px; {{Border-radius|10px}};">Text</div>
The Different Compatibility Prefixes include:
- webkit
- moz
- o
- ms
Each property's page on W3Schools' CSS Property Reference has a table like the one below that tells you that property's compatibility. The cells display the first version of the browser that supports the property. The numbers with compatibility prefixes beside them tell you that the property will work in that broswer version if the prefix is used.
Different Syntax[]
Some properties do not simply need to be duplicated with prefixes before the property name. Some of them require different syntax than that to be compatible in more browsers. Background gradients are the best example of this. This is an element with a gradient:
<div style="width: 400px; background-image: -ms-linear-gradient(top, red 0%, gold 100%); background-image: -moz-linear-gradient(top, red 0%, gold 100%); background-image: -o-linear-gradient(top, red 0%, gold 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, red), color-stop(1, gold)); background-image: -webkit-linear-gradient(top, red 0%, gold 100%); background-image: linear-gradient(To Bottom, red 0%, gold 100%);">Text</div>
Notice how the background-image property is repeated several times without a prefix, the keywords of the properties have prefixes and different syntaxes. This will ensure that the gradient appears in pretty much any browser. When making gradients, its recommended to use some sort of gradient-building tool such as the one that I made.
| Back |
| Return to Editing Guide List |
| Next |