5 New CSS Features You Can Test Right Now

5 New CSS Features You Can Test Right Now

We'll focus on five new CSS features that you can already test in the stable version of at least one web browser: CSS subgrid; Flexbox gaps; The content-visibility property; The contain-intrinsic-size property; The :is and :where pseudo-classes

In this guide, we'll focus on five new CSS features that you can already test in the stable version of at least one web browser.

Before browsers gradually begin to implement them, CSS features are first defined in specifications of the W3 Consortium — usually after long discussions. There are countless new CSS features that are worth mentioning, but for this guide, we’ll focus on five that you can already test in the stable version of at least one web browser:

  1. CSS subgrid
  2. Flexbox gaps
  3. The content-visibility property
  4. The contain-intrinsic-size property
  5. The :is() and :where() pseudo-classes

Note that browser support for these features changes all the time, so always check the current level of support on sites such as Can I Use, the MDN CSS Reference (support info is at the bottom of each page), and Chrome Platform Status.


1. CSS subgrid

CSS Grid is a flexible layout module that allows developers to create complicated layouts without using JavaScript or resorting to messy CSS hacks.

To apply the grid layout to an HTML element, add the following rule to it.

 .grid-container {
    display: grid;
}

There are several grid-specific properties you can use to set up the exact layout you need.

For instance, in the above example, the child elements of .grid-container will be the grid items, and they will be laid out according to the rules you define with the grid-template-columnsandgrid-template-rows properties:

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

The code above defines the following CSS grid layout.

CSS Grid Layout

But, what if you want to include some (or all) of the grandchild elements of .grid-container in the grid layout too? That’s where the CSS subgrid comes into play.

You can add the following rules to a grid item to enable it to adopt its parent’s grid tracks (including the name grid lines and areas, even though it can also define its own).

.grid-item {
    /* these rules specify the subgrid's position within the layout */
    grid-column: 2 / 4;      /* two columns vertically */
    grid-row: 1 / 3;         /* two rows horizontally */

    /* these rules belong to the subgrid itself */
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

The grid-columnandgrid-row properties define the grid item’s position within the grid columns or rows. The child elements of .grid-item will form the subgrid. A grid item can span more than one grid cell. For instance, here it spreads across four cells (the values of grid-column and grid-row are arbitrary in the example above).

As you can see, subgrid is not a standalone CSS property, but a value you can add to the grid-template-columns and grid-template-rows properties. It makes the children of .grid-item included in the grid layout:

CSS Subgrid Layout

As you can see, the subgrid has become part of the grid layout, and it’s been positioned to the exact place where we wanted to (between the second and fourth vertical grid lines and the first and third horizontal grid lines).

The rest of the grid items has kept the normal grid flow, and a fourth row has also appeared at the bottom of the layout. However, since we only defined three rows with the grid-template-rows property, the fourth row doesn’t have a preset value, so it just takes the natural height of its contents. If we were to remove the text from the last three grid items, they wouldn’t even show up because their natural height would be 0.

You can test the example above using the following CodePen demo.

You can also create a one-dimensional subgrid by adopting only either grid-template-columns or grid-template-rows and using a new value for the other one.

For example, in the following case, the subgrid only adopts the columns of the main grid, but it creates a new rule for the rows.

.grid-item {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: 200px 400px 200px;
}

Browser support

The CSS subgrid specification is a W3C candidate recommendation as of August 2020. Currently, it’s only supported by Firefox 71+, but it’s also coming to Chromium, the open-source web browser that’s used as the foundation for major browsers including Chrome, Opera, Brave, and the new Microsoft Edge.

If you need a fallback method, note that a nested grid (defined with the inherit value) is not the same thing as the CSS subgrid. You can emulate a subgrid using a nested grid and recalculating the grid tracks; however, in that case, you’d still have two independent grids instead of one that shares its tracks with some or all children of the grid items.

2. Flexbox gaps

Adding gaps between flex rows or flex columns in a flexbox layout has been a difficult question for a long time. It’s usually solved by adding margins to flex items, but the problem with margins is that they are also added to the beginning and end of each flex row or column. Even though these can be removed by adding negative margins to the first/last element, it’s not the most elegant solution.

Luckily, browser support for flexbox gaps is getting better. The gap, row-gap, and column-gap properties exist in different contexts, with different levels of browser support. You can use the gap properties in the following layout modules.

  • Flexbox, defined by the display: flex; declaration
  • CSS grid, defined by the display: grid; declaration
  • Multicolumn (multicol) layout, defined by the column-count and/or column-width properties

You can find the shared syntax of gap properties in the CSS Box Alignment Module (level 3) specification.

You can use the gap, row-gap, and column-gap properties with any length values (px, em, rem, cm, mm, vmin, vmax, etc.) or percentages (%).

In the flexbox context, you need to add them to the flex container (not to the flex items).

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

The gap property is the shorthand for row-gap and column-gap. If you use it with two values, then the first value belongs to row-gap and the second one to column-gap.

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

If you use it with just one value, row-gap and column-gap will take the same value.

.flex-container {
  gap: 10px;
}

Browser support

You can check browser support for the gap properties in the related Can I Use tables, which show support in various contexts. You can see that it’s the most widely supported in the CSS grid layout since this is where it was first defined.

In the flexbox layout, the gap properties are currently supported by Edge 84+, Firefox 63+, Chrome 84+, and Opera 70+. Internet Explorer (obviously) and Safari do not support it.

Considering fallback for Safari and older browsers, the problem with the gap property is that you can’t test it with a @supports feature query since browser support is different in the three layout modules (flexbox, CSS grid, multicol) and @supports checks for the most widely supported context (CSS grid). If you need to support Safari, IE, or older browsers, you’re better off using the margin hack for now (unless you want to do extra checks with JavaScript).

css web-development programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Software Developer vs Web Developer | Difference Web Developer & Software Developer

Software Developer vs Web Developer | Difference Web Developer & Software Developer | Software development and web development are normally used interchangeably. Although both include development, a software developer has different responsibilities from that of a web developer.

Developing for the Mobile-Web: Part 1 — CSS Media Queries

Developing our web pages for the mobile web has never been more important than it is now. I grew up in the early stages of the internet.