[HN Gopher] Minding the gaps: A new way to draw separators in CSS
___________________________________________________________________
Minding the gaps: A new way to draw separators in CSS
Author : SigmundurM
Score : 230 points
Date : 2025-03-20 08:00 UTC (14 hours ago)
(HTM) web link (blogs.windows.com)
(TXT) w3m dump (blogs.windows.com)
| pacifika wrote:
| 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 wrote:
| Was just wondering that myself.. why they went with "rule" in
| `column-rule` and now `row-rule`
| krispyfi wrote:
| > From Middle English reule, rewle, rule, borrowed from Old
| French riule, reule, from Latin regula ("straight stick, bar,
| ruler, pattern"), from rego ("to keep straight, direct,
| govern, rule"), ultimately from Proto-Indo-European _h3regeti
| ("to straighten; right"), from the root_ h3reg-; see regent.
| Doublet of rail, regal, regula and rigol.
|
| https://en.m.wiktionary.org/wiki/rule#English
| pacifika wrote:
| 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.
| blooalien wrote:
| > ... 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.
| hnlmorg wrote:
| 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.
| None4U wrote:
| There's already an element <hr> "horizontal rule" in HTML
| setr wrote:
| 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
| Joker_vD wrote:
| Couldn't they have at least used the word "ruler" then?
| Sharlin wrote:
| No, because a ruler is completely different from a rule.
| Joker_vD wrote:
| 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.
| 9dev wrote:
| Isn't a ruler a measuring device to measure a rule?
| Sharlin wrote:
| 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 wrote:
| 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 wrote:
| If I understand what you're referring to, then I suspect
| you're mistaken about the names you're referring to.
|
| 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.
| rerdavies wrote:
| "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 wrote:
| 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.
|
| https://en.m.wikipedia.org/wiki/Ruler
| rerdavies wrote:
| A ruler is called a ruler because you use it to MAKE
| rules. Fixed that for u, wikipedia. :-)
| karlshea wrote:
| It should be familiar from the <hr> tag (horizontal rule).
| Telemakhos wrote:
| 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]
|
| [0] https://practicaltypography.com/rules-and-borders.html
| [1] https://en.m.wikipedia.org/wiki/Ruled_paper
| moomin wrote:
| 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 wrote:
| 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.
| Eric_WVGG wrote:
| ^ this
|
| These days nobody knows what a font is.
| codetrotter wrote:
| 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 wrote:
| A typeface would also be a font-family
| zarzavat wrote:
| 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 wrote:
| > 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 wrote:
| honestly didn't know hr actually stood for that, huh
| layer8 wrote:
| 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="...">.
| bfgeek wrote:
| Part of the design constraint here is to reuse the existing
| properties that exist for multi-column layout which have
| existed for a long time - https://developer.mozilla.org/en-
| US/docs/Web/CSS/column-rule
|
| This proposal extends this mechanism to be more general.
| vladde wrote:
| 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 wrote:
| > 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 wrote:
| grid can wrap if you auto size columns
| jofzar wrote:
| 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.
| hcfman wrote:
| 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 wrote:
| 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 wrote:
| 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.
| janpot wrote:
| 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 wrote:
| It's absolutely crazy that the only way to get a native
| splitter in HTML is to use iframes.
| nsonha wrote:
| what is "native splitter" why do I even want it?
| izietto wrote:
| Open any application and you'll see native splitters and
| their related use cases
| recursive wrote:
| Oh this? This isn't a splitter, this is a dialog box.
| blooalien wrote:
| 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.
| IshKebab wrote:
| 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.
| breckenedge wrote:
| I believe you mean <frameset>/<frame> rather than
| <iframe>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/fr
| ames_example...
| IshKebab wrote:
| Ah yes you're right! Similar to iframes anyway.
|
| Your example has `noresize` set, but I found one that
| doesn't:
| https://www.yourhtmlsource.com/examples/frameset1.html
| istjohn wrote:
| It's not resizeable on mobile.
| IshKebab wrote:
| Yeah I mean, it was obsolete before the first iPhone so
| that's not surprising.
| recursive wrote:
| I don't think that's true. The `resize` rule in CSS can do
| this.
| cosmic_cheese wrote:
| 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.
| 1shooner wrote:
| 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 wrote:
| 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?
| autoexec wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| silvestrov wrote:
| 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.
| andrewingram wrote:
| Came here to make the exact same comment, just being able to
| specify a border feels a little shortsighted.
| Permik wrote:
| 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.
| adregan wrote:
| 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.
| interstice wrote:
| 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.
| rhet0rica wrote:
| Isn't it (technically, officially) two colons for a pseudo-
| element? ::gap instead of :gap.
| tasuki wrote:
| Note this was written by a "software engineer". A designer would
| have used white space for separation, not a line.
| epolanski wrote:
| I don't think there's only one way to present information.
| MortyWaves wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| nonsense, sometimes you want a line
| cstrahan wrote:
| 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.
| jbverschoor wrote:
| 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.
| donatj wrote:
| > 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 wrote:
| 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.
| yojo wrote:
| 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 wrote:
| 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.
| Pikamander2 wrote:
| 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.
| micromacrofoot wrote:
| 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
| poncho_romero wrote:
| 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 wrote:
| Also doesn't really work when e.g. flex items are set to wrap
| madeofpalk wrote:
| Does this work in a grid?
| ahartmetz wrote:
| 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.
| shireboy wrote:
| Yeah, I often have this problem and want some better way than a
| <hr/> (which doesn't work in table rows or multi column)
| larusso wrote:
| Reminds me of a German designer proverb: ,,fallt 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 wrote:
| great quote. swiss german designer perhaps?
| larusso wrote:
| Sadly don't know the original source. A design teacher of
| mine said it out load when he judged a design from a student.
| hirako2000 wrote:
| Edge is still a thing apparently.
| yurishimo wrote:
| 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 wrote:
| No mention of outline?
___________________________________________________________________
(page generated 2025-03-20 23:00 UTC)