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.
> 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'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'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'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.
It'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're overselling the frequency of edge cases.
this has been a pain point for a long, long time. it'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.
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?<p>I sure as hell hope not. It would be groundhog day.
Ok, so now I want a beautifully crafted scroll between the gaps. What kind of border-xxx would that be? Oh.. nvm<p>> 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's 40px, or 5em high.. but I can'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'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's good to put your thoughts paper and have other look at it.