Minding the gaps: A new way to draw separators in CSS

[silvestrov]

I would create new pseudo elements:

    .container:gap { background-color: red; }

This will allow for more fancy backgrounds (e.g. dotted or gradients) and using { padding: 2px } to set whitespace at ends of the seperator.

Possible with a :gap-horz and :gap-vert (or whatever css like to name it) to get seperate vertical and horizontal gaps.

Also: .container:gap:nth-gap(2n) { color: blue; } to get alternating colors.

[adregan]

I often set gaps between elements to 1rem or more. Coloring the gap wouldn’t be the same as adding a rule.

My “theory of layout” is that no element should have any styling that relates to its relationship with other elements. Gap is very useful for establishing spacing.

[Permik]

Knowing how CSS tries to support direction agnostic layouts the pseudo elements would be:

:gap ( -[inline\block] ( -[start/end] ) )

You know how the shorthands work elsewhere, so this just replicates that.

[rhet0rica]

Isn't it (technically, officially) two colons for a pseudo-element? ::gap instead of :gap.

[silverwind]

I think a `gap-image`, similar to `border-image` would be more flexible.

[andrewingram]

Came here to make the exact same comment, just being able to specify a border feels a little shortsighted.

[interstice]

Came here to say this too, the flexibility of having something like :after would mean not having to consider all the potential ways people are going to want to use this.

Not sure about content: though, that could get weird.

[pacifika]

Design by committee is not the best but if you need one more view to be convinced, as a non native English speakers the property names proposed are not communicating the meaning very well. Eg Defining the gap but drawing the separator.

[bung]

Was just wondering that myself.. why they went with "rule" in `column-rule` and now `row-rule`

[janpot]

I wish they took the use-case of resizable panels into account. Even if the implementation is fully user-land, a styleable separator that can also receive events would be so useful.

[IshKebab]

It's absolutely crazy that the only way to get a native splitter in HTML is to use iframes.

[donatj]

> Adding a border changes the size of the items, which might not be desirable

This issue has been addressed for well over a decade.

Is the first line of everyone's css files not just:

    * { box-sizing: border-box; }

That makes borders figure on the inside of the width rather than the outside. It's far more sane to reason about.

[do_not_redeem]

That does not solve the problem in the article. Consider this layout:

<content1> <content2> <content3>

If you start out with equally spaced columns, and then you add borders to content2 and content3 to end up with this visually:

<content1> <border> <content2> <border> <content3>

The DOM actually looks like this:

<content1> <border content2> <border content3>

Now content2 and content3 are smaller than content1, because the borders are part of their width. Borders are the wrong tool for this job no matter the value of box-sizing.

[ahartmetz]

Ha, that is interesting. I do UI work mostly in QML these days, and almost all of these issues are something I've dealt with. A couple of months ago, I used the gap between items with background showing through to implement grid lines in a calendar view. It lets the "spacing" property of the layout (and the GPU, more overdraw...) do the work.

[Pikamander2]

It's a decent idea, but it feels like it would have been more useful a decade ago.

With modern CSS you can typically handle separators with a single selector and property like:

  .things .thing:not(:last-child)
  {
      border-bottom: 1px solid gray;
  }

They touch on this in the article but I feel like they're overselling the frequency of edge cases.

[poncho_romero]

As they say in the article, your solution doesn’t work for even moderately complex layouts. If you want to add a space between elements, margin works wonderfully until those elements can wrap. Gap was introduced because regardless of what happens, there will always be a space between elements. Your solution fails to address the situation gap was introduced to fill.

[somishere]

Also doesn't really work when e.g. flex items are set to wrap

[micromacrofoot]

they aren't really edge cases, once you do this you add 1px to the layout unevenly - I run into this frustration with grid all the time

[madeofpalk]

Does this work in a grid?

[vladde]

this has been a pain point for a long, long time. it's cool to see someone doing something

this is just `display: grid` though, and not for non-fixed width elements – the hacker news nav bar is an example where the | between links—on small screens—will either appear at the end of the first line, or at the start of the second line

[genuine_smiles]

> this is just `display: grid` though

It’s also for flexbox

> and not for non-fixed width elements

What’s this mean? The biggest thing grid can’t do is wrapping; is that what you mean?

[larusso]

Reminds me of a German designer proverb: „fällt dem Gestalter nichts mehr ein baut er ein paar Linien ein“. As in: when the designer has no idea how to clearly separate content he starts adding lines.

[seumars]

great quote. swiss german designer perhaps?

[jofzar]

God I hope this goes through... Using AI to fix my aweful knowledge of flexbox was a blessing but this feels like the actual solution.

[shireboy]

Yeah, I often have this problem and want some better way than a <hr/> (which doesn’t work in table rows or multi column)

[mediumsmart]

Is the old background-image way still valid?

[hirako2000]

Edge is still a thing apparently.

[yurishimo]

Edge actually has some super smart engineers working on it. I'm still not going to use it, but Microsoft is committing resources to advancing web standards and performance in a meaningful way. They contribute upstream and advocate very openly for web performance.

[mmastrac]

No mention of outline?

[hcfman]

If it doesn't go through, what then? Do we see a return to people using special flags and having code to see if you are on an edge server or not?

I sure as hell hope not. It would be groundhog day.

[oneeyedpigeon]

There's no suggestion that Microsoft will add this to Edge if it doesn't go through, is there? Hopefully, even if it did, it will do so progressively — designers have learnt to let go of pixel-perfect web styling by now, surely...

[tasuki]

Note this was written by a "software engineer". A designer would have used white space for separation, not a line.

[cstrahan]

The designers behind practically every newspaper (including the New York Times) would disagree with you:

https://store.nytimes.com/cdn/shop/products/new-york-times-f...

If you’re against established, commonly accepted best practices for design, then I can’t argue with you — everyone is entitled to their own opinions, as unpopular as they may be.

[epolanski]

I don't think there's only one way to present information.

[MortyWaves]

What are you even getting at here?

Obviously that's how a "designer" or "software engineer" would display items that require whitespace between them.

This proposal is for when you do want something other whitespace.

[micromacrofoot]

nonsense, sometimes you want a line

[jbverschoor]

Ok, so now I want a beautifully crafted scroll between the gaps. What kind of border-xxx would that be? Oh.. nvm

> Images in gap decorations. Compared to, say, border-image, gap decoration images need to cover significantly more cases such as T intersections. See this comment for more detail. Further exploration is needed into the best way to handle these, so this scenario is left to a future level of the feature.

Oh, then I want a line that's 40px, or 5em high.. but I can't.

Not sure what the actual benefit in most cases would be compared to flexbox and have separator elements in there.

At least it's something, but the spec is quite shallow.. I feel like writing specs for many is a covert way to boost CVs.

Anyway, it's good to put your thoughts paper and have other look at it.