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?
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:
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 Mozillabox-shadow
— property without prefixesIf 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
There is no assignment in this lesson. You can just click or tap "Check"
You can check the compatibility of different properties and whether you need to specify prefixes at Can I use
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
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.
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.
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.
Hi! I'm Tota, and my job is to help you learn. To activate me, please sign up or log in if you already have an account
Your exercise will be checked with these tests:
1const { test } = require('tests');
2
3test(({ query, expect }) => {
4 expect(true);
5});
6
Teacher's solution will be available in: