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.
Minding the gaps: A new way to draw separators in CSS
81–90 of 99 posts
Re: Minding the gaps: A new way to draw separators in CSS
#82Earlier quoted context omitted.
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.
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.
Re: Minding the gaps: A new way to draw separators in CSS
#83Earlier quoted context omitted.
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.
Re: Minding the gaps: A new way to draw separators in CSS
#84Earlier quoted context omitted.
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.
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.
Re: Minding the gaps: A new way to draw separators in CSS
#85Earlier quoted context omitted.
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.
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
Re: Minding the gaps: A new way to draw separators in CSS
#86Earlier quoted context omitted.
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.
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 t…
Re: Minding the gaps: A new way to draw separators in CSS
#87Earlier quoted context omitted.
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.
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…
Re: Minding the gaps: A new way to draw separators in CSS
#88Earlier quoted context omitted.
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.
^ this These days nobody knows what a font is.
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!” :^)
Re: Minding the gaps: A new way to draw separators in CSS
#89I 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.
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.
Re: Minding the gaps: A new way to draw separators in CSS
#90Earlier quoted context omitted.
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 abo…
I believe you mean / rather than 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/frames_example...