Free CSS course. Sign Up for tracking progress →

CSS: Prefixes

CSS is not a static product; new rules are being added all the time. Before a property becomes an official standard, it goes through a long process of discussion and fine-tuning. Browser makers also try to keep up with the times and add support for modern features to new versions of their products.

This is used to test and adjust the behavior of a property in browsers. If a rule is important, then later browser makers will "agree" on the subtleties of using the rules and implement support in their new browsers.

Many of the properties that you might think are standard have gone from an idea and partial implementation to a common property you use in everyday work. So what happens when a new property comes along?

  1. It goes through the discussion phase. Developers agree on how the rule will work, and how and what it will affect on the page
  2. Browser developers add functionality to the new feature to their product little by little. Usually, at this time, different browsers handle the properties slightly differently
  3. The property gets into the standard and all browsers begin to support it "officially"

If parts 1 and 3 are clear, then part 2 is the most interesting. When the functionality is added, you can start using the property with the following points in mind:

  1. The behavior may be slightly different in different browsers
  2. The property won't work in earlier versions of the browser

In order not to confuse developers, properties that are not yet fully supported and not part of the standard are designated with constructions called prefixes. They help the browser to determine that there is a new property, and if there is an implementation for it, it'll be executed. If there is no implementation, then the property will be considered invalid and ignored

For example, the box-shadow property, which sets the shadow for an element, was once in the discussion and implementation process. To use it, you had to additionally specify prefixes — small additions to the property that are given before the property name. As a result, CSS looked like this:

.shadow {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

You can see three references to the box-shadow property:

  • -webkit-box-shadow — property for a WebKit browser
  • -moz-box-shadow — property for browsers based on solutions from Mozilla
  • box-shadow — property without prefixes

If the browser could not handle the box-shadow property, it looked for its -webkit- or -moz- prefix. If this couldn't be found either, then the rule would be ignored. Nowadays, using these prefixes will help you use the box-shadow property in very old Chrome, Safari and Firefox browsers.

You don't need to keep it in your head all the time. Many processes are now automated, including adding prefixes. In the future, you'll discover all the tools to do this if work with web layouts. But it's important to know what prefixes are and how they help new and old browsers

Instructions

There is no assignment in this lesson. You can just click or tap "Check"

The exercise doesn't pass checking. What to do? 😶

If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:

  • Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
In my environment the code works, but not here 🤨

Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.

My code is different from the teacher's one 🤔

It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.

In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.

I've read the lessons but nothing is clear 🙄

It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.

By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.

Tips

  • You can check the compatibility of different properties and whether you need to specify prefixes at Can I use


If you got stuck and don't know what to do, you can ask a question in our huge and friendly community