CSS has been around for almost 25 years now and has continuously improved its features over the years. In 2021 they have introduced several new features that will help web designers improve layout display and code efficiency. The new features and their implications are discussed below.

New available features

Flexbox gaps

This is a feature in flex layout that will play a role in adding gaps between flex columns and flex rows. This has always been a difficult task requiring a lot of resizing and margin adding to implement successfully. Working with margins to achieve the desired result is messy and cumbersome and thus the need for flexbox gaps. More browsers are now supporting flexbox gaps and this has improved code efficiency. The three properties associated with flexbox gaps are gap, row-gap and column-gap. However, these properties are not the same in all browsers but require different browser support levels. The gap properties include:

• display: grid - declaration defining the CSS grid
• display: flex - declaration defining the flexbox
• column-count - for multicolumn layout
• column-width -for column appearance

It is important to remember that flexbox properties are added to the flexbox container and not the flexbox items. See the code sample below:

.flex-container {
  row-gap: 10px;
  column-gap: 15px;
}

Alternatively, you can use the gap property which will stand for row-gap and column-gap. With gap the code above would be written as:

.flex-container {
  gap: 20px 25px;
}

CSS subgrid

This is a new module that will allow CSS developers to create complex layouts without complex CSS or javascript code. This new feature will bring flexibility and also efficiency in resource utilization for complex user interfaces. The grid layout will have several properties to allow for its implementation. They include:

• .grid-container: this property will represent the grid items that are to be included arranged as defined by the properties below.
• grid-template-columns: this property will define the number of columns and their appearance.
• grid-template-rows: this property will define the properties of the row.

Below is an example:

.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 55px 65vh 55px;
}

The CSS subgrid role comes in when you want to add grandchild elements to the .grid-container above. To enable a child to adopt the parent’s track on the grid you add the following code to the grid item.

.grid-item {
    /*position of the subgrid in the layout*/
    grid-column: 3 / 6;      /* three vertical columns */
    grid-row: 1 / 3;         /* two horizontal rows */
 
    /* subgrid rules */
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

From the above, we see that the subgrid is not a sole feature but a property that can be added to grid-template-columns and grid-template-rows properties. The addition of the subgrid allows for grid_items children to be added to the layout.

The content-visibility property

This is a property meant to help the rendering process of off-screen elements. The content-visibility property takes three values:

• hidden - used when the element rendering is skipped
• visible - element is rendered normally
• auto - this automatically implements rendering when an element is on screen and skips the rendering when the element is off the screen.

This property improves the rendering of pages and makes the page more user friendly. To implement this property, you add the property to the element you want the rendering process changed. For instance:

article {
  content-visibility: auto;
}

The contain-intrinsic-size property

This property defines the width and height of elements in a way that the element size is not affected by the size of its children. This ensures that the elements are prevented from collapsing to zero under certain circumstances. One case where this is applicaSpecificityble is when you set the elements content-visibility is set to auto. When the rendering on an element is skipped, it can cause the collapse of a related element whose dimensions were related to an unrendered element.

Below is this property’s code sample:

article {
  content-visibility: auto;
  contain-intrinsic-size: 750px 950px;
}

The :is() and :where() pseudo-classes

These two pseudo-classes will help to shorten the long CSS selector list by repetition reduction. They mark the unique items in a selector that is repetitive allowing for the addition of only one selector instead of several selectors. Code without the two pseudo-classes:

.my-class pa em, .my-class list em, .my-class sect em {
    /* CSS rules */
}

To keep the specificity high, you make use of :is(). This makes it harder to override the rules with declarations made subsequently.

.my-class :is(pa, list, sect) em {
  /* CSS rules */
}

The :where pseudo-class is similar to :is. The difference being their specificity (how salient the rule is). For :where this is always zero, for :is it uses the most salient selector.

New feature to expect in 2021

The CSS3 Multi-Column Module

This is a module meant to increase website user interface flexibility across different screen sizes. The module will allow content inside an element to flow into multiple columns easily. The designer will be able to specify the number of columns in which an element should be rendered.

The CSS Cascading and Inheritance Level 5

This will add layers to the Cascade and define how to sort those layers. This will improve cascade management and allow for easier use of the inheritance feature.

Aspect Ratio

To make images fit into different spaces with different dimensions and elements relationships, a developer currently has to use object-fit and padding-top. These two solutions can lead to unwanted image cropping and a lot of complex coding. The aspect-ratio feature will allow a developer to set aspect-ratio to auto to allow for better fitting across different layout sizes. The feature will also prevent cumulative layout shift by creating a placeholder space. Code sample:

.container {
 width: 100%;
 aspect-ratio: 8 / 6;
}

@support

This at-rule will let developers specify declarations that are browser support dependent. This can be for a single or multiple CSS features and is referred to as a feature query. This rule will be implemented by nesting it into another conditional group at-rule or at the top level of the code.

Code sample:

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
    div {
        float: right;
    }
}