New features in CSS3 and what to expect in CSS4

14.06.18 IT / CSS 3069

CSS technology with the advent of the new version of CSS3 has provided developers with truly unique options for page design. The main feature of CSS3 is the ability to create animated elements on the page without the help of scripts, as well as the introduction of support for all kinds of gradients, radial and linear. Added support for anti-aliasing and shadows. This version is a global update and replaces the old versions: 1, 2, 2.1 .

For example, CSS3 introduced the ability to define support for a property using a @supports query. Now you can write different rules that will be applied only if the required properties are supported. This feature is supported by almost all modern browsers, with the exception of a few.

Finally, CSS has the ability to use variables , which was previously only possible with the use of third-party libraries called CSS preprocessors . Now it is enough to define a variable and use it everywhere in the code, this will allow you to quickly change the value of the desired property in a few seconds, and before you had to manually change it for everyone. The support is pretty good, but you need to look at the compatibility tables .

Another thing worth highlighting is the ability to create a grid in pure CSS. Added value for popular property: display: grid . New units have been introduced, just for such cases: fr . Now you can make layouts of any complexity. Browser support is pretty good at the moment, but older versions do not support these innovations, so you need to be careful when using it.

As far as CSS4 is concerned, things are still pretty confusing here. This version exists in draft form, a specific list of features will be determined in the final version. Thus, it is planned to add the following innovations: new pseudo-classes of various types, logical combinations of selectors , various tag selectors and attributes, table selectors and relationships.

For example, among the pseudo-classes some are language pseudo-classes, location pseudo-classes, custom action pseudo-classes, time-related pseudo-classes, input pseudo-classes, mutating pseudo-classes, tree structure pseudo-classes.

Using new CSS3 features is now very important for correct and beautiful page layout , and with the release of CSS4 , the capabilities of this new version. But as always, even after a new version is released, it will take some time before it becomes supported by most modern browsers.