What new CSS tricks should you learn right now?

We asked middle and senior level specialists what they need to learn in CSS right now in order to be cool specialists in a couple of years and keep up with trends and new products in CSS.

***

We remind you that you can ask your question to the experts, and we will collect answers to it if it turns out to be interesting. Questions that have already been asked can be found in the list of issues in the section.

If you want to join the ranks of experts and send an answer from your company or yourself, then write to experts@tproger.ru, we will tell you how to do this.

***

Milana Petruk

Web developer arcsinus

Every year there is something new in CSS Cascading Style Sheets. It is better not to grab the newest one, but to wait a little until it is supported by most popular browsers.

What needs to be learned that is already established in CSS and used everywhere?

Two-dimensional grid layout and flexible container module flex.
Preprocessors (for example, Sass, tLess). They make life much easier when writing code.
Frameworks (Bootstrap, Bulma and Materialize are suitable for beginners).
Animation.
Adaptability / responsive – correct display of the site on different devices.
BEM (Block Element Modifier) is a component-based approach to web development that has become popular in recent years. It touches on writing css (cascading is removed) and the principles of naming classes of elements.

Top 15 CSS New Features for 2022 and 2023:

Container queries (@container) instead of media queries. Browser support – 87.42%.
New pseudo-function classes :where(), :has(). :has() has 87.43% support.
Using mathematical operators in media queries. Browser support 70%.
Using of in :nth pseudo-classes. Support – 85.72%
Accent-color property for the main color of the site on forms or throughout the site. Already supported in all modern browsers.
Balanced text wrapping using text-wrap: balance; Support – 37.71%
New dynamic units: svh, svw, lvh, lvw, dvh, dvw. Support – 87.99%
Cascading layers. Support – 90.58%
Nesting of styles within each other, like in Sass. Support – 63.74%
Smooth scrolling of the scrollbar using the scroll-behavior: smooth; property Browser supported.
Styling the site according to the user’s operating system preferences (prefers-reduced-motion, prefers-contrast, prefers-reduced-transparency, inverted-colors and others).
Adaptability to form factor, i.e. taking into account folding and flexible screens when creating websites. It hasn’t gained much popularity yet.
Pseudo-class t:focus-visible. Supported by all browsers.
Individual properties of transformation. Support – 91.19%
color-mix(): and color-contrast(). Not supported by all browsers. Worth learning, but not using yet.

In my opinion, it is worth studying those new products that are at least 70% supported by browsers.

Evgeniy Nekrasov

Lead developer at RDN Group

Currently, there is no particular need to learn new CSS features for everyday work, since many of them are not yet supported on all browsers. However, keeping an eye on these trends and being prepared for future use can be helpful.

I recommend focusing on mastering the basics, such as display: grid (although its use may be limited in older versions of browsers) and flexbox, transitions and animations (for creating smooth and creative animations), backdrop-filter (background blur effects, useful for creating stylized interface elements), variables and calc (using variables and calculations can greatly improve maintainability and flexibility of your code).

For beginners, it’s important to master SCSS, including the use of mixins and functions, by studying examples in major libraries like Bootstrap to expand your skills and avoid over-invention.

***

If you want to join the ranks of experts and send an answer from your company or yourself, then write to experts@tproger.ru, we will tell you how to do this.