Getting rid of "grid-" prefix on CSS Grid Layout gutter properties
Early this year I was working on unprefixing the CSS Grid Layout gutter properties.
The properties were originally named grid-column-gap
and grid-row-gap
,
together with the grid-gap
shorthand.
The CSS Working Group (CSSWG) decided to remove the grid-
prefix
from these properties last summer, so they could be extended to be used
in other layout models like Flexbox.
I was not planning to write a blog post about this, but the task ended up becoming something more than just renaming the properties, so this post describes what it took to implement this. Also people got quite excited about the possibility of animating grid gutters when I announced that this was ready on Twitter.
CSS Grid Layout gutter properties are now unprefixed in @ChromiumDev & @WebKit joining @MSEdgeDev. Only @Firefox is missing.
— Manuel Rego (@regocas) 5 de febrero de 2018
We also make them animatable as that was missing before by mistake.
Patches by @Igalia have just landed today thanks to @TechAtBloomberg support. Enjoy!😀 pic.twitter.com/hLb7uXsunj
The task #
So the theory seems pretty simply, we currently have 3 properties
with the grid-
prefix and we want to remove it:
grid-column-gap
becomescolumn-gap
,grid-row-gap
becomesrow-gap
andgrid-gap
becomesgap
.
But column-gap
is already an existent property,
defined by the Multicolumn spec,
which has been around for a long time.
So we cannot just create a new property, but we have to make it work
also for Grid Layout, and be sure that the syntax is equivalent.
Animatable properties #
When I started to test Multicol column-gap
I realized it was animatable,
however our implementations (Blink and WebKit)
of the Grid Layout gutter properties were not.
We’d need to make our properties animatable if we want to remove the prefixes.
More on that, I found a bug on Multicol column-gap
animation,
as its default computed value is normal
, and it shouldn’t be possible
to animate it.
This was fixed quickly by Morten Stenshorne from Google.
Making the properties animatable is not complex at all, both Blink and WebKit have everything ready to make this task easy for properties like the gutter ones that represent lengths. So I decided to do this as part of the unprefixing patch, instead of something separated.
Percentages #
But there was something else, the Grid gutter properties
accept percentage values, however column-gap
hadn’t that support yet.
So I added percentage support to column-gap
for multicolumn,
as a preliminary patch for the unprefixing one.
There has been long discussions in the CSSWG about how to resolve percentages on gutter properties. The spec has recently changed so these properties should be resolved to zero for content-based containers. However my patch is not implementing that, as we don’t believe there’s an easy way to support something like that in most of the web engines, and Blink and WebKit are not exceptions. Our patch follows what Microsoft Edge does in these cases, and resolves the percentage gaps like it does for percentage widths or heights. And the Firefox implementation that has just landed this week does the same.
I guess we’ll still have some extra discussions about this topic in the CSSWG, but percentages themselves deserve their own blog post.
Implementation #
Once all the previous problems got solved, I landed the patches related to unprefixing the gutter properties in both Blink and WebKit. So you can use the unprefixed version since Chrome 66.0.3341.0 and Safari Technology Preview 50.
<div style="display: grid; grid: 100px 50px / 300px 200px;
column-gap: 25px; row-gap: 10px;">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
Note that as specified in the spec, the previous prefixed properties are still valid and will be kept as an alias to avoid breaking existent content.
Also it’s important to notice that now the gap
shorthand applies
to Multicol containers too, as it sets the value of column-gap
longhand
(together with row-gap
which would be ignored by Multicol).
<div style="column-count: 2; gap: 100px;">
<div>First column</div>
<div>Second column</div>
</div>
Web Platform Tests #
As usual in our last developments, we have been using
web-platform-tests
repository
for all the tests related to this work.
As a result of this work we have now 16 new tests
that verify the support of these properties,
including tests for animations stuff too.
Running those tests on the different browsers, I realized there was
an inconsistency between css-align and css-multicol specifications.
Both specs define the column-gap
property, but the computed value
was different.
I raised a CSSWG issue
that has been recently solved,
so that the computed value for column-gap: normal
should still be normal
.
This causes that the property won’t be animatable from normal
to other values
as explained before.
This is the summary of the status of these tests in the main browser engines:
- Blink and WebKit: They pass all the tests and follow last CSSWG resolution.
- Edge: Unprefixed properties are available since version 41.
Percentage support is interoperable with Blink and WebKit.
The computed value of
column-gap: normal
is notnormal
there, so this needs to get updated. - Firefox: It doesn’t have support for the unprefixed properties yet,
however the default computed value is
normal
like in Blink and WebKit. But Multicolcolumn-gap
percentage support has just been added. Note that there are already patches on review for this issue, so hopefully they’ll be merged in the coming days.
Conclusions #
The task is completed and everything should be settled down at this point, you can start using these unprefixed properties, and it seems that Firefox will join the rest of browser by adding this support very soon.
Last, but not least, this is again part of the ongoing collaboration between Igalia and Bloomberg. I don’t mind to repeat myself over and over, but it’s really worth to highlight the support from Bloomberg in the CSS Grid Layout development, they have been showing to the world that an external company can directly influence in the new specifications from the standard bodies and implementations by the browser vendors. Thank you very much!
Finally and just as a heads-up, I’ll be in Berlin next week for the CSSWG F2F meeting. I’m sure we’ll have interesting conversations about CSS Grid Layout and many other topics there.
- Previous: "display: contents" is coming
- Next: CSSWG F2F Berlin 2018