7 ms·
Minding the gaps: A new way to draw separators in CSS
- pacifika 2y agoDesign 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 2y agoWas just wondering that myself.. why they went with "rule" in `column-rule` and now `row-rule`
- karlshea 2y agoIt should be familiar from the <hr> tag (horizontal rule).
- krispyfi 2y 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. https://en.m.wiktionary.org/wiki/rule#English https://en.m.wiktionary.org/wiki/rule#English
- pacifika 2y agoThanks 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 2y 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.
- hnlmorg 2y agoHow 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 2y agoThere's already an element <hr> "horizontal rule" in HTML
- setr 2y agoChoosing 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 2y agoCouldn't they have at least used the word "ruler" then?
- Sharlin 2y agoNo, because a ruler is completely different from a rule.
- Joker_vD 2y agoNo? 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 2y agoIsn't a ruler a measuring device to measure a rule?
- Sharlin 2y agoBut 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 2y agoWait, 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 2y agoIf 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-capabilities/ 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.
- Telemakhos 2y agoIt’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 https://practicaltypography.com/rules-and-borders.html [1] https://en.m.wikipedia.org/wiki/Ruled_paper https://en.m.wikipedia.org/wiki/Ruled_paper
- moomin 2y agoI 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 2y agoFunnily 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 2y ago^ this These days nobody knows what a font is.
- codetrotter 2y agoI 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!” :^)
- bfgeek 2y agoPart 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 https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule This proposal extends this mechanism to be more general.
- vladde 2y agothis 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 2y 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 2y agogrid can wrap if you auto size columns
- jofzar 2y agoGod I hope this goes through... Using AI to fix my aweful knowledge of flexbox was a blessing but this feels like the actual solution.
- janpot 2y agoI 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 2y agoIt's absolutely crazy that the only way to get a native splitter in HTML is to use iframes.
- nsonha 2y agowhat is "native splitter" why do I even want it?
- izietto 2y agoOpen any application and you'll see native splitters and their related use cases
- recursive 2y agoOh this? This isn't a splitter, this is a dialog box.
- blooalien 2y agoIt 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 2y agoA 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 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.
- hcfman 2y agoIf 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 2y agoThere'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 2y agoNo 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.
- silvestrov 2y agoI 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 2y agoCame here to make the exact same comment, just being able to specify a border feels a little shortsighted.
- Permik 2y agoKnowing 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 2y agoI 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 2y agoPerhaps with margin: auto your :gap element can sit in the middle of the “gap space”?
- adregan 2y agoI 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.
- 2y ago
- tasuki 2y agoNote this was written by a "software engineer". A designer would have used white space for separation, not a line.
- epolanski 2y agoI don't think there's only one way to present information.
- MortyWaves 2y agoWhat 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 2y agoI'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 2y agoThat 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 2y agononsense, sometimes you want a line
- cstrahan 2y agoThe designers behind practically every newspaper (including the New York Times) would disagree with you: https://store.nytimes.com/cdn/shop/products/new-york-times-front-page-reprint_1024x1024.jpg?v=1737018191 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 2y agoOk, 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 2y 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 2y agoThat 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 2y agoYou 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 2y agoOh, 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 2y agoIt'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 2y agothey 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 2y agoAs 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 2y agoAlso doesn't really work when e.g. flex items are set to wrap
- madeofpalk 2y agoDoes this work in a grid?
- ahartmetz 2y agoHa, 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 2y agoYeah, I often have this problem and want some better way than a <hr/> (which doesn’t work in table rows or multi column)
- larusso 2y agoReminds 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.
- hirako2000 2y agoEdge is still a thing apparently.
- yurishimo 2y agoEdge 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 2y agoNo mention of outline?
- mediumsmart 2y agoIs the old background-image way still valid?