The Future Of CSS

Rachel Andrew takes a look at the new CSS that is starting to land in browsers, from row and column gap properties for Flexbox to entirely new specifications.

- Rachel Andrew

This is a very exciting time to be a web developer. We will take a look at some of the new CSS properties and entire specifications that are making their way into browsers. Some of these are behind flags or only available in beta versions of browsers now but you will be seeing them in release versions very soon.

Gutters for Flexbox

CSS Grid Layout introduced the grid column-gap, grid-row-gap and grid-gap properties. Multi-column layout already had column-gap. It therefore made sense to remove these properties from the Grid and Multicol specifications and place them into Box Alignment, the specification that deals with space distribution and alignment across all specifications. This meant the gap properties – now renamed column-gap, row-gap and gap for all contexts could be specified for other layout methods – such as Flexbox.

At the time of writing, Firefox is the only browser to have implemented these properties for Flexbox and they are expected to ship in Firefox 63 (which should be available by the time you read this). However I would expect other browsers to follow suit. This should mean that instead of having to use margins to create gutters between flex items, you’ll be able to use gaps as in grid layout.

.flex {

display: flex;

flex-wrap: wrap;

row-gap: 20px;

column-gap: 10px;

}

Logical properties and values

Our CSS properties and values have traditionally been mapped to the physical properties of a screen. For example, we use width and height and we set margins on the top, right, bottom and left of an element. These physical properties seem strange when working in writing modes other than horizontal and top to bottom. As a simple example we can think about a box with both a height and a width.