Minding the gaps: A new way to draw separators in CSS(blogs.windows.com) |
Minding the gaps: A new way to draw separators in CSS(blogs.windows.com) |
.container:gap { background-color: red; }
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
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.
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; }
<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:
.things .thing:not(:last-child)
{
border-bottom: 1px solid gray;
}
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.
> 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.
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.
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
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.
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
These days everyone knows what a font is.
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.
Admittedly, we already have <hr> and <table rules="…">.
It's also the monarch that makes the rules, but even the rules help you stay within the lines.
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!” :^)
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.
- 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
