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 5 days ago [-]
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.
thomasfedb 4 days ago [-]
Perhaps with margin: auto your :gap element can sit in the middle of the “gap space”?
adregan 3 days ago [-]
I think we’re getting into kludge territory there. Might as well have an explicit property that can be autocompleted/stumbled upon via spec or docs than an implicit behavior born of a little trick.
Permik 5 days ago [-]
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 5 days ago [-]
Isn't it (technically, officially) two colons for a pseudo-element? ::gap instead of :gap.
SuperNinKenDo 4 days ago [-]
I believe that was deprecated for reasons I don't understand, but admittedly, I'm too lazy to check since I'm on my phone.
silverwind 4 days ago [-]
I think a `gap-image`, similar to `border-image` would be more flexible.
andrewingram 5 days ago [-]
Came here to make the exact same comment, just being able to specify a border feels a little shortsighted.
interstice 5 days ago [-]
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 5 days ago [-]
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 5 days ago [-]
Was just wondering that myself.. why they went with "rule" in `column-rule` and now `row-rule`
Telemakhos 5 days ago [-]
It’s the correct term from the technical vocabulary of book layout and printing. A rule is a line separating things on a page, while a border is a box.[0]. While the term originates in book printing shops, native English speakers would recognize it most easily from the terms “standard ruled” and “college ruled” as applied to loose-leaf notebook paper, describing the faint blue, printed horizontal lines providing guidance for straight handwriting.[1]
I remember this argument from the 90s where large numbers of people were upset at having to learn the world "Font". What it came down to was, either you use the correct existing term, or you create a new term and end up with constant conflict between the two.
These days everyone knows what a font is.
Sharlin 5 days ago [-]
Funnily the word "font" is in fact now used in digital publishing for what is more properly called "typeface". In traditional typesetting "font" refers to one specific size, weight and style of a typeface. That is, Helvetica is a typeface, Helvetica Light Oblique 12pt is a font.
ghusbands 4 days ago [-]
The way a word is typically used is its general meaning, even if it has a different meaning in some technical circles.
Eric_WVGG 5 days ago [-]
^ this
These days nobody knows what a font is.
codetrotter 4 days ago [-]
I only know because a friend of mine studied design at the university.
Seems fine to me, it’s a fun piece of trivia for me that I am happy my friend told me. And at the same time, I don’t feel cheated for not having learned it myself in my education as mine was not in design :p
Also it does open up a neat avenue for designers to troll people if they are feeling mischievous.
Client: “This looks great, but could we try a different font?”
Designer: “Sure thing!”
Designer bumps size from 12pt to 14pt.
Designer: “There you go – different font!” :^)
rerdavies 4 days ago [-]
A typeface would also be a font-family
zarzavat 5 days ago [-]
While that may be true, I’ll say that as a native English speaker that reading is not the most obvious reading of “row rule”, which to me would be “A determinate method prescribed for performing any operation and producing a certain result.”
Indeed a “CSS rule” is already a thing and it has nothing to do with lines.
lelanthran 5 days ago [-]
> Indeed a “CSS rule” is already a thing and it has nothing to do with lines.
Shouldn't make a difference; we had the element `<hr>` (horizontal rule) since before CSS, after all.
mary-ext 5 days ago [-]
honestly didn't know hr actually stood for that, huh
pessimizer 4 days ago [-]
A ruler is an object that helps you draw lines.
It's also the monarch that makes the rules, but even the rules help you stay within the lines.
layer8 5 days ago [-]
While that is right, “divider” or “divider line” are common as well, and easier to search for. Try a search for “rule page layout” or “rule typography” or “rule css”.
Admittedly, we already have <hr> and <table rules="…">.
krispyfi 5 days ago [-]
> From Middle English reule, rewle, rule, borrowed from Old French riule, reule, from Latin regula (“straight stick, bar, ruler, pattern”), from regō (“to keep straight, direct, govern, rule”), ultimately from Proto-Indo-European h₃réǵeti (“to straighten; right”), from the root h₃reǵ-; see regent. Doublet of rail, regal, regula and rigol.
Thanks that's helpful to know they picked a valid term, but if I'd hold a no-context poll (unless I mention ruler) a significant number of people wouldn't know this.
hnlmorg 5 days ago [-]
How many of those people would know what CSS is though? Or understand the distinction between "internet" and "web"? Heck, a lot of people don't even understand the distinction between "wifi" and "internet" let alone anything actually technical.
I do get your point and can honestly relate to it. But I wouldn't argue that a no-context poll is the right way to define specialist jargon.
blooalien 5 days ago [-]
> ... a significant number of people wouldn't know this.
While true, an even more significant number of folks into typography and design absolutely would (and arguably even should) know this.
setr 5 days ago [-]
Choosing terminology without context is probably a terrible idea in general; you’re basically forcing everything to fit that “describe complex topics like I’m a toddler” framework, which is terribly inefficient for any non-novice practitioner in the subject.
The more important aspect is that, within the context, it’s internally consistent. If I bother to learn my terms, I’ll be able to utilize it functionally. And of course, that the term can actually be explained
None4U 5 days ago [-]
There's already an element <hr> "horizontal rule" in HTML
Joker_vD 5 days ago [-]
Couldn't they have at least used the word "ruler" then?
Sharlin 5 days ago [-]
No, because a ruler is completely different from a rule.
Joker_vD 5 days ago [-]
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.
Sharlin 5 days ago [-]
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.
Joker_vD 5 days ago [-]
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.
cstrahan 5 days ago [-]
If I understand what you’re referring to, then I suspect you’re mistaken about the names you’re referring to.
In page layout software, the thin UI elements bordering the left side and top side of the page, with the little tick marks, is called a ruler. The tick marks on the ruler are called rules (just like the rules on a physical ruler used for measuring things). When you click/drag on the ruler elements, you create guides (or guidelines).
I’ve never seen “ruler guides” verbatim, but I would take that to be shorthand for “guides one could create using the ruler” (which would be a mouthful) to disambiguate the word “guide” when there isn’t sufficient context for the reader to likely understand what was meant.
The guides themselves are not rulers.
rerdavies 4 days ago [-]
"ruler guide" - One of those English noun chains that my translators hate so much. Because in most other languages you actually do have to say "the guide of the ruler" or some comparably awkward mouthful.
krispyfi 5 days ago [-]
A ruler is called a "ruler" because it has rules.
> A ruler, sometimes called a rule, scale or a line gauge or metre/meter stick, is an instrument used to make length measurements, whereby a length is read from a series of markings called "rules" along an edge of the device.
This proposal extends this mechanism to be more general.
janpot 5 days ago [-]
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 5 days ago [-]
It's absolutely crazy that the only way to get a native splitter in HTML is to use iframes.
cosmic_cheese 5 days ago [-]
Front end web isn’t my specialty, but I really don’t know why framesets were deprecated. Having resizable panes as a primitive is crazy useful and applicable to several use cases (documentation with a nested tree sidebar comes to mind, for example).
Yeah they were ugly and looked like they came straight out of the Netscape 2.0 era (because they did) but that’s nothing CSS couldn’t have fixed.
autoexec 5 days ago [-]
Frames and tables were awesome, useful, and simple to learn. While they had their problems, really they just became unfashionable and the result has been a million efforts to replicate what we already had.
zeroq 5 days ago [-]
This.
At one point people decided that tables are lame.
Iframes on the other hand posed a security issue (cross site scripting) - you have two pages living inside the same window, with possible access and trivial attack vectors like creating a page with one iframe being invisible (1x1px for instance).
But that's just an exception, frontend is really a fashion driven developement and there's often no rhyme or reason to why the mob decides to chose one way over another.
son_of_gloin 4 days ago [-]
In the "bad old days", tables were abused to build page layouts. There were all sorts of problems with this due to weird rendering rules within table cells and the table itself.
Some people piled onto the "omg tables are so bad" fever without properly acknowledging that they are still the best way to display tabular data - their original purpose.
Zardoz84 5 days ago [-]
a few days ago, I saw a very old web application that had a f** table inside of a button to center a <IMG> with an icon, with a text.
4 days ago [-]
1shooner 5 days ago [-]
I can't cite any sources, but I want to say it was a combination of security, state management, and responsive layout that were all a huge headache.
cosmic_cheese 5 days ago [-]
Sounds plausible, but most of those concerns have probably been addressed at this point between the leaps and bounds CSS has made with regards to layout, plus the security work that’s gone into iframes?
nsonha 5 days ago [-]
what is "native splitter" why do I even want it?
IshKebab 5 days ago [-]
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 `<input>` 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.
Yeah I mean, it was obsolete before the first iPhone so that's not surprising.
blooalien 5 days ago [-]
It places related content or features of a program alongside or above one another in the same program window so you get all of what you need all right there on the one window. The separate spaces are often resizable, too, so you can fit the content that's important to you however you as the end-user want it. Thus why as another commenter here (izzieto) notes, it's used in almost any application you can think of.
izietto 5 days ago [-]
Open any application and you'll see native splitters and their related use cases
recursive 5 days ago [-]
Oh this? This isn't a splitter, this is a dialog box.
recursive 5 days ago [-]
I don't think that's true. The `resize` rule in CSS can do this.
donatj 5 days ago [-]
> 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 5 days ago [-]
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:
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.
yojo 5 days ago [-]
You just add padding to the items with borders so they visually consume the same space, then increase the width of everything except :first-child to account for the new padding/border. Easy!
That’s sarcasm, obviously. But man, I’ve spent so many hours over the years hacking little lines between HTML boxes.
yojo 5 days ago [-]
Oh, and don’t forget to update the styles or class name via JavaScript if you want to support drag and drop without it looking incredibly janky.
ahartmetz 5 days ago [-]
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 5 days ago [-]
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:
They touch on this in the article but I feel like they're overselling the frequency of edge cases.
poncho_romero 5 days ago [-]
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 5 days ago [-]
Also doesn't really work when e.g. flex items are set to wrap
micromacrofoot 5 days ago [-]
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 5 days ago [-]
Does this work in a grid?
vladde 5 days ago [-]
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 5 days ago [-]
> 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?
micromacrofoot 5 days ago [-]
grid can wrap if you auto size columns
larusso 5 days ago [-]
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 5 days ago [-]
great quote. swiss german designer perhaps?
larusso 5 days ago [-]
Sadly don‘t know the original source. A design teacher of mine said it out load when he judged a design from a student.
shireboy 5 days ago [-]
Yeah, I often have this problem and want some better way than a <hr/> (which doesn’t work in table rows or multi column)
jofzar 5 days ago [-]
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.
mediumsmart 4 days ago [-]
Is the old background-image way still valid?
hirako2000 5 days ago [-]
Edge is still a thing apparently.
yurishimo 5 days ago [-]
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 5 days ago [-]
No mention of outline?
hcfman 5 days ago [-]
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 5 days ago [-]
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...
hcfman 5 days ago [-]
No of course there's no suggestion. I'm just referring to historical precedences.
If we don't remember the past we are doomed to repeat it as they say.
tasuki 5 days ago [-]
Note this was written by a "software engineer". A designer would have used white space for separation, not a line.
cstrahan 5 days ago [-]
The designers behind practically every newspaper (including the New York Times) would disagree with you:
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 5 days ago [-]
I don't think there's only one way to present information.
MortyWaves 5 days ago [-]
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.
tasuki 5 days ago [-]
I'm getting at the fact that designers use white space to visually separate things. People who know nothing about design put lines between things to separate them.
jeroenhd 5 days ago [-]
That sounds rather pretentious. There are good places to use whitespace and there are good places to use separators. There's a reason Excel uses lines to separate cells rather than whitespace and it's not because Microsoft never thought to hire a designer.
Going hard on whitespace is just a visual trend that'll undoubtedly change in the future again. It wasn't that long ago that designers went all in on glossy 3D effects with hard separators for basic UI design. You cannot derive someone's qualifications from a subjective aesthetical choice like that.
micromacrofoot 5 days ago [-]
nonsense, sometimes you want a line
jbverschoor 5 days ago [-]
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.
Rendered at 08:54:46 GMT+0000 (Coordinated Universal Time) with Vercel.
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.
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.
:gap ( -[inline\block] ( -[start/end] ) )
You know how the shorthands work elsewhere, so this just replicates that.
Not sure about content: though, that could get weird.
[0] https://practicaltypography.com/rules-and-borders.html [1] https://en.m.wikipedia.org/wiki/Ruled_paper
These days everyone knows what a font is.
These days nobody knows what a font is.
Seems fine to me, it’s a fun piece of trivia for me that I am happy my friend told me. And at the same time, I don’t feel cheated for not having learned it myself in my education as mine was not in design :p
Also it does open up a neat avenue for designers to troll people if they are feeling mischievous.
Client: “This looks great, but could we try a different font?”
Designer: “Sure thing!”
Designer bumps size from 12pt to 14pt.
Designer: “There you go – different font!” :^)
Indeed a “CSS rule” is already a thing and it has nothing to do with lines.
Shouldn't make a difference; we had the element `<hr>` (horizontal rule) since before CSS, after all.
It's also the monarch that makes the rules, but even the rules help you stay within the lines.
Admittedly, we already have <hr> and <table rules="…">.
https://en.m.wiktionary.org/wiki/rule#English
I do get your point and can honestly relate to it. But I wouldn't argue that a no-context poll is the right way to define specialist jargon.
While true, an even more significant number of folks into typography and design absolutely would (and arguably even should) know this.
The more important aspect is that, within the context, it’s internally consistent. If I bother to learn my terms, I’ll be able to utilize it functionally. And of course, that the term can actually be explained
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.
I presume you’re talking about a feature like this: https://tagboard.com/product/guides-and-remote-refresh-capab...
In page layout software, the thin UI elements bordering the left side and top side of the page, with the little tick marks, is called a ruler. The tick marks on the ruler are called rules (just like the rules on a physical ruler used for measuring things). When you click/drag on the ruler elements, you create guides (or guidelines).
I’ve never seen “ruler guides” verbatim, but I would take that to be shorthand for “guides one could create using the ruler” (which would be a mouthful) to disambiguate the word “guide” when there isn’t sufficient context for the reader to likely understand what was meant.
The guides themselves are not rulers.
> A ruler, sometimes called a rule, scale or a line gauge or metre/meter stick, is an instrument used to make length measurements, whereby a length is read from a series of markings called "rules" along an edge of the device.
https://en.m.wikipedia.org/wiki/Ruler
- there is a decision on how to measure things ( this affects prices taxes and commerce )
- there is an association between the power to enforce a standard and the instruments of that standard
- the measure instruments are generally very straight
This proposal extends this mechanism to be more general.
Yeah they were ugly and looked like they came straight out of the Netscape 2.0 era (because they did) but that’s nothing CSS couldn’t have fixed.
At one point people decided that tables are lame.
Iframes on the other hand posed a security issue (cross site scripting) - you have two pages living inside the same window, with possible access and trivial attack vectors like creating a page with one iframe being invisible (1x1px for instance).
But that's just an exception, frontend is really a fashion driven developement and there's often no rhyme or reason to why the mob decides to chose one way over another.
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 `<input>` 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.
Your example has `noresize` set, but I found one that doesn't: https://www.yourhtmlsource.com/examples/frameset1.html
This issue has been addressed for well over a decade.
Is the first line of everyone's css files not just:
That makes borders figure on the inside of the width rather than the outside. It's far more sane to reason about.<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.
That’s sarcasm, obviously. But man, I’ve spent so many hours over the years hacking little lines between HTML boxes.
With modern CSS you can typically handle separators with a single selector and property like:
They touch on this in the article but I feel like they're overselling the frequency of edge cases.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
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?
I sure as hell hope not. It would be groundhog day.
If we don't remember the past we are doomed to repeat it as they say.
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.
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.
Going hard on whitespace is just a visual trend that'll undoubtedly change in the future again. It wasn't that long ago that designers went all in on glossy 3D effects with hard separators for basic UI design. You cannot derive someone's qualifications from a subjective aesthetical choice like that.
> 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.