Note this was written by a "software engineer". A designer would have used white space for separation, not a line.
Minding the gaps: A new way to draw separators in CSS
31–40 of 99 posts
Re: Minding the gaps: A new way to draw separators in CSS
#32Earlier quoted context omitted.
It's absolutely crazy that the only way to get a native splitter in HTML is to use iframes.
what is "native splitter" why do I even want it?
A splitter is the widget that shows two (or more) panes with a divider that you can drag. Commonly used for side bar navigation, see this example: https://codepen.io/Zodiase/pen/qmjyKL
A native splitter is one that is drawn by the browser itself, or even the OS. The only way to get that on the web is with iframes. Otherwise you have to resort to Javascript and manually handling mouse move events as in the example above.
Why do you want that? Same reasons we have `` instead of having every website reimplement text boxes, sliders, checkboxes, etc. with canvas and mouse events.
Sorry I couldn't find an example of an actual iframes website because obviously nobody uses iframes any more.
Re: Minding the gaps: A new way to draw separators in CSS
#33Note this was written by a "software engineer". A designer would have used white space for separation, not a line.
I don't think there's only one way to present information.
Re: Minding the gaps: A new way to draw separators in CSS
#34Ok, 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.
Re: Minding the gaps: A new way to draw separators in CSS
#35Earlier quoted context omitted.
No? Both "rule" and "ruler" can denote this thing also called straightedge; but the word "ruler" is more commonly used in this sense, while "rule" generally means an instruction.
But here the meaning of "rule" is not "straightedge", but rather the derived meaning "a thin printed line or dash". So "ruler" would be improper because that word doesn't have the typographical meaning.
Wait, so the "ruler guides" are misnamed, they are just "rules"?
In any case, the things they added could very well have been called "column-divider" and "row-divider" with much less ambiguity because not everyone who has to wrangle with CSS is a designer by profession or by choice.
Re: Minding the gaps: A new way to draw separators in CSS
#36> 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; }
Re: Minding the gaps: A new way to draw separators in CSS
#37I 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.
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.
Re: Minding the gaps: A new way to draw separators in CSS
#38It'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;
}
Re: Minding the gaps: A new way to draw separators in CSS
#39Note this was written by a "software engineer". A designer would have used white space for separation, not a line.
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.
Re: Minding the gaps: A new way to draw separators in CSS
#40Earlier quoted context omitted.
what is "native splitter" why do I even want it?
A splitter is the widget that shows two (or more) panes with a divider that you can drag. Commonly used for side bar navigation, see this example: https://codepen.io/Zodiase/pen/qmjyKL A native splitter is one that is drawn by the browser itself, or even the OS. The only way to get that on the web is with iframes. Otherwise you have to resort to Javascript and manually handling mouse move events as in the example abo…
I believe you mean / rather than s, though you used to be able to do frames inside iframes. I’m surprised mobile Safari supports them. Example: https://www.quackit.com/html/templates/frames/frames_example...