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.
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.
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.
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.
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.
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.
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?”
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.
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="…">.
> 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.
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.
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
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.
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.
"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.
> 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.
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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.
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.
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
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.
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.
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...
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.
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.
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.
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.
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.