CSS Prefixes

Prefixes in CSS are used to ensure compatibility with different browsers, especially when it comes to newer or experimental properties and features. Browser prefixes are special prefixes added to some CSS rules to help different browsers interpret these rules.

1. Why Are Prefixes Important?

Not all browsers support all CSS properties the same way, especially when it comes to newer features. Prefixes help ensure that these properties will work correctly in different browsers.

2. Most Popular Browser Prefixes

Here are some of the most commonly used browser prefixes:

• -webkit-: for browsers based on the WebKit engine, such as Safari and older versions of Chrome and Opera.
• -moz-: for browsers based on Firefox (Mozilla).
• -o-: for older versions of Opera.
• -ms-: for Internet Explorer and Microsoft Edge.

3. How to Apply Prefixes?

Prefixes are applied by adding them before the CSS property.

Example:

If you want to use the experimental border-radius property, you can add different prefixes to ensure compatibility with different browsers:

1div {
2  -webkit-border-radius: 10px;
3  -moz-border-radius: 10px;
4  -ms-border-radius: 10px;
5  -o-border-radius: 10px;
6  border-radius: 10px; /* standard version */
7}

4. Tools and Autoprefixers

Manually adding prefixes to every new property can be tedious and inconvenient. Fortunately, there are tools like Autoprefixer that can automatically add required prefixes to your stylesheet.

Look at the following code:

1.my-element {
2  transform: rotate(45deg);
3  animation: my-animation 5s infinite;
4  box-shadow: 10px 10px 5px #888;
5  border-radius: 10px;
6}
7
8@keyframes my-animation {
9  from { transform: rotate(0deg); }
10  to { transform: rotate(360deg); }
11}

If you paste it into Autoprefixer Online, you'll get roughly the following result:

1.my-element {
2  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
3  -moz-transform: rotate(45deg);    /* Firefox */
4  -ms-transform: rotate(45deg);     /* IE 9 */
5  -o-transform: rotate(45deg);      /* Older Opera */
6  transform: rotate(45deg);         /* Standard */
7
8  -webkit-animation: my-animation 5s infinite; /* Chrome, Safari, Opera */
9  -moz-animation: my-animation 5s infinite;    /* Firefox */
10  -ms-animation: my-animation 5s infinite;     /* IE 10+ */
11  -o-animation: my-animation 5s infinite;      /* Older Opera */
12  animation: my-animation 5s infinite;         /* Standard */
13
14  -webkit-box-shadow: 10px 10px 5px #888; /* Chrome, Safari, Opera */
15  -moz-box-shadow: 10px 10px 5px #888;    /* Firefox */
16  box-shadow: 10px 10px 5px #888;         /* Standard */
17
18  -webkit-border-radius: 10px; /* Chrome, Safari, Opera */
19  -moz-border-radius: 10px;    /* Firefox */
20  border-radius: 10px;         /* Standard */
21}
22
23@-webkit-keyframes my-animation {
24  from { -webkit-transform: rotate(0deg); }
25  to { -webkit-transform: rotate(360deg); }
26}
27
28@-moz-keyframes my-animation {
29  from { -moz-transform: rotate(0deg); }
30  to { -moz-transform: rotate(360deg); }
31}
32
33@-ms-keyframes my-animation {
34  from { -ms-transform: rotate(0deg); }
35  to { -ms-transform: rotate(360deg); }
36}
37
38@-o-keyframes my-animation {
39  from { -o-transform: rotate(0deg); }
40  to { -o-transform: rotate(360deg); }
41}
42
43@keyframes my-animation {
44  from { transform: rotate(0deg); }
45  to { transform: rotate(360deg); }
46}

5. Worth Considering

Although prefixes are useful, it's worth remembering that not all properties require them, and some may already be widely supported by most browsers. Checking documentation and using browser compatibility testing tools can help you understand when and how to apply prefixes.