Live data from Hacker News

Minding the gaps: A new way to draw separators in CSS

blogs.windows.com

11–20 of 99 posts

Re: Minding the gaps: A new way to draw separators in CSS

#11
post #7

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.

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...

Re: Minding the gaps: A new way to draw separators in CSS

#12
post #9
post #6

Earlier quoted context omitted.

Was just wondering that myself.. why they went with "rule" in `column-rule` and now `row-rule`

> 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

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.

Re: Minding the gaps: A new way to draw separators in CSS

#13
post #9
post #6

Earlier quoted context omitted.

Was just wondering that myself.. why they went with "rule" in `column-rule` and now `row-rule`

> 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

Couldn't they have at least used the word "ruler" then?

Re: Minding the gaps: A new way to draw separators in CSS

#14
post #6
post #2

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.

Was just wondering that myself.. why they went with "rule" in `column-rule` and now `row-rule`

It should be familiar from the tag (horizontal rule).

Re: Minding the gaps: A new way to draw separators in CSS

#15
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.

Re: Minding the gaps: A new way to draw separators in CSS

#16
post #8

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.

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?

Re: Minding the gaps: A new way to draw separators in CSS

#17
post #16

Earlier 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?

Open any application and you'll see native splitters and their related use cases

Re: Minding the gaps: A new way to draw separators in CSS

#18
post #9

Earlier quoted context omitted.

> 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

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.

> ... 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.

Re: Minding the gaps: A new way to draw separators in CSS

#19
post #16

Earlier 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?

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.

Re: Minding the gaps: A new way to draw separators in CSS

#20
post #6
post #2

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.

Was just wondering that myself.. why they went with "rule" in `column-rule` and now `row-rule`

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

Post reply on HN