Using Freshworks apps? Check out what we can do for you! Learn More


Future of CSS Features in 2021

Future of CSS in 2021 - TechAffinity

The “State of CSS 2020” report offers a glimpse into the future of frontend development — more specifically, the future of CSS. In this article, we’ll review the report, break down key features of CSS, and explore how they are being perceived in the CSS community. Then, we’ll use these insights to speculate about what’s to come in the world of CSS.

The “State of CSS” is an annual survey that, similar to the “State of JavaScript,” records and beautifully illustrates the opinions of CSS users around the world. The data points cover CSS libraries and frameworks, features, units and selectors, and a whole lot more.

In my opinion, the “State of CSS” report is the premier CSS-only developer survey, and I’m hopeful that it will be a staple of the frontend developer community for years to come.

In this piece, we’ll examine the CSS features that will be in high demand in 2020 and discover what the approximately 11,492 survey respondents in 102 countries had to say about major CSS concepts such as typography, layouts, interactions, animations, shapes, and graphics.

1. Layouts

Knowing how to place your boxes in the right place in relation to both the viewport and one another is crucial to your presentation, look, and feel. Although CSS is roughly two decades old, we’ve seen myriad innovations designed to help frontend developers create more and more stunning layouts in CSS, many of which have gained widespread adoption. Let’s take a look at the top CSS layouts developers are using in 2020.

1.1 Flexbox

The Flexbox layout is a one-dimensional CSS module that is used to design interfaces and lay out boxes in a presentation within a container. You can flex the boxes in any direction, expand them to fill up unused space, or shrink them to avoid overflowing. Flexbox lets you make all kinds of alignment adjustments. Think of it as an extension of the grid.

Flexbox - TechAffinity

According to the survey, virtually all CSS users have heard of Flexbox. Even more impressive, 97.5% of respondents have actually used the layout in 2020; whereas in 2019, 94.7% have used it in their projects. This shows that there is an increase in adoption of Flexbox from 2019 to 2020.

1.2 Grid
Grid - TechAffinity

CSS Grid Layout is a straightforward, two-dimensional layout system for the web. With the grid, you can divide your presentation into columns and rows. You can also define relationships of the parts of your webpage in size or position. Almost everyone has heard of CSS grids, but only 43.3% of respondents have actually used this layout. But, in 2019, 54.7% of the respondents have used this layout style in their projects. Since there is a decline in the adoption from 2019 to 2020, this may suggest that users are finding the CSS Grid Layout more difficult to use than Flexbox.

1.3 Multi-Column Layout

The Multi-column Layout specification enables you to arrange content into columns, similar to a newspaper layout. You can choose the number of columns, customize how they flow from one column to another, and adjust the size of the gaps between columns.

Multi-Column Layout - TechAffinity

Although nearly 43.5% of survey respondents are unfamiliar with the Multi-column Layout, 33.4% of respondents have actually used it before. When compared to 2019, only 30.9% of the respondents have used it in their projects. This reflects an awareness gap in the market, since the majority of developers who do know about the Multi-column Layout tend to use it in practice. But, there is an increase in the adoption of this layout in projects.

1.4 Writing Modes
Writing Modes - TechAffinity

CSS Writing Modes is a CSS module that defines international writing modes, such as left-to-right (e.g., Latin scripts), right-to-left (e.g., Hebrew scripts), vertical (e.g., Chinese scripts), and bi-directional modes. This is a niche offering, which explains the low awareness scores in the survey.

2. Shapes and Graphics

As CSS has matured, it has become easier to create graphics and shapes with pure CSS. Today, if you really master the shapes and graphics features of CSS, you can build stunning graphics without using a separate editing app. With support for filters and effects and other features such as blend, CSS makes the job easier and more streamlined.

Another advantage of using CSS has to do with accessibility. Writing in pure CSS and HTML is always conducive to accessibility because screen readers and other assistive devices can easily interpret pure CSS.

2.1 Filters and Effects
Filters & Effects - TechAffinity

Just like the editing software on your phone’s camera or any social media application today, the filter property applies graphical effects, such as color shifts, to an element. It is used to adjust image renderings and backgrounds. Almost everyone who uses CSS knows about it, and according to the “State of CSS,” more than two-thirds of CSS developers use it in practice.

2.2 Object-Fit
Object-fit - TechAffinity

This property is used for the content of a replaced element, such as an image. It defines how the content should be resized to fit the parent container. Just like filters and effects, more than 60.4% of CSS users leverage this property in 2020; whereas, in 2019, only 42.6% of CSS users have leveraged it.

2.3 Shapes
Shapes - TechAffinity

You can apply geometric shapes available in CSS to floating elements in your presentation. This property follows the rules outlined in the level 1 specifications. 23.6% of the survey respondents use the shapes property. Other shapes and graphics features, such as blend mode, masking, and clip-path, also enjoy widespread use in the CSS community.

3. Interactions

JavaScript used to be the only language for controlling browser behavior. As CSS matured, features that enable you to influence browser behavior, such as scroll snap, became available. Let’s see what the “State of CSS” survey respondents had to say about some of these properties.

3.1 Scroll Snap
Scroll Snap - TechAffinity

This CSS module provides scroll snap positions for ports of scroll containers just after scrolling an element. Although 33% of the survey participants are aware of this feature, only 21% are currently using it.

3.2 Overscroll-Behavior
Overscroll Behavior - TechAffinity

overscroll-behavior defines an element’s behavior when it reaches a scroll while being scrolled. 20.9% of developers use it, according to the survey data, and 19.6% actually use the feature.

3.3 Overflow-Anchor
Overflow Anchor - TechAffinity

With this CSS property, you can disable the default browser’s scroll anchor, which automatically adjusts the scroll position to reduce the frequency of content shifts. According to the “State of CSS,” very few people have heard about overflow-anchor and even fewer in the CSS community use it.

4. Typography

In CSS typography, variable fonts are in high demand. As we await true responsive type, let’s look at the most-used typography features in 2020.

4.1 Font Face
Font Face - TechAffinity

This CSS at-rule defines a custom font. You can load it from your local storage or on a remote server. Every CSS developer has heard of it, according to the survey, and 92% currently use it.

4.2 Variable Fonts

Variable fonts enable you to use many variations of a typeface in a single file, thereby eliminating separate font files for every weight or style. You can access all those variations through a simple font face reference.

4.3 Initial_Letter
Initial Letter - TechAffinity

This CSS property is used to style the initial letters of texts in your presentation to designs such as sunken, raised, or even dropped. About 70 percent of CSS users know about this property, and 26.4% use it.

5. Animations and Transforms

Every CSS developer has used animations in one way or another, from a mouse hover to really complex animations, such as on the “State of CSS” homepage. The three most-used features are transitions, transforms, and animations.

5.1 Transitions
Transitions - TechAffinity

This CSS module enables you to build gradual transitions between values of CSS properties. You can control things such as the duration and timing function of the transition. According to the survey, 94% of CSS users have used transitions.

5.2 Transforms
Transforms - TechAffinity

Transforms are CSS modules that specify how CSS-styled elements can be transformed in both two- and three-dimensional space. Like transitions, 94% of CSS users have used transform.

5.3 Animations
Animations - TechAffiinty

You can animate the values of CSS properties you define over time using keyframes with the CSS module called animations. By specifying the timing function, duration, and number of times it should be repeated, animation is achieved and controlled. According to the “State of CSS,” 91% of CSS users have used this module in their work.

Wrapping Up

The “State of CSS” survey revealed valuable insights about the properties and modules that are poised to take the CSS community by storm in 2020. The fact that Flexbox was the most-adopted feature of the year, followed by transitions and transforms, suggests that CSS users are focusing more on animations. The survey data also revealed an increased interest among developers in CSS modules, and it will be fascinating to see how this trend progresses in 2021. What were your favorite CSS features of 2020? What are you most excited for in 2021?

We, at TechAffinity have front-end developers who are experts in delivering trendy websites and web applications with future-ready features. Shoot your queries to or schedule a meeting with our experts.

Subscribe to Our Blog

Stay updated with latest news, updates from us