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

I would create new pseudo elements:<p><pre><code> .container:gap { background-color: red; } </code></pre> This will allow for more fancy backgrounds (e.g. dotted or gradients) and using { padding: 2px } to set whitespace at ends of the seperator.<p>Possible with a :gap-horz and :gap-vert (or whatever css like to name it) to get seperate vertical and horizontal gaps.<p>Also: .container:gap:nth-gap(2n) { color: blue; } to get alternating colors.

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.

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.

&gt; Adding a border changes the size of the items, which might not be desirable<p>This issue has been addressed for well over a decade.<p>Is the first line of everyone&#x27;s css files not just:<p><pre><code> * { box-sizing: border-box; } </code></pre> That makes borders figure on the inside of the width rather than the outside. It&#x27;s far more sane to reason about.

Ha, that is interesting. I do UI work mostly in QML these days, and almost all of these issues are something I&#x27;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 &quot;spacing&quot; property of the layout (and the GPU, more overdraw...) do the work.

It&#x27;s a decent idea, but it feels like it would have been more useful a decade ago.<p>With modern CSS you can typically handle separators with a single selector and property like:<p><pre><code> .things .thing:not(:last-child) { border-bottom: 1px solid gray; } </code></pre> They touch on this in the article but I feel like they&#x27;re overselling the frequency of edge cases.

this has been a pain point for a long, long time. it&#x27;s cool to see someone doing something<p>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

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.

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.

Yeah, I often have this problem and want some better way than a &lt;hr&#x2F;&gt; (which doesn’t work in table rows or multi column)

Is the old background-image way still valid?

Edge is still a thing apparently.

No mention of outline?

If it doesn&#x27;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?<p>I sure as hell hope not. It would be groundhog day.

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

Ok, so now I want a beautifully crafted scroll between the gaps. What kind of border-xxx would that be? Oh.. nvm<p>&gt; 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.<p>Oh, then I want a line that&#x27;s 40px, or 5em high.. but I can&#x27;t.<p>Not sure what the actual benefit in most cases would be compared to flexbox and have separator elements in there.<p>At least it&#x27;s something, but the spec is quite shallow.. I feel like writing specs for many is a covert way to boost CVs.<p>Anyway, it&#x27;s good to put your thoughts paper and have other look at it.