Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

58 bytes of CSS to look great nearly everywhere

gist.github.com

Post reply on HN
Print view View original

231–240 of 254 posts

Re: 58 bytes of CSS to look great nearly everywhere

#231

Post by 7steps2much »

SquareWheel wrote: post #157
sorenjan wrote: post #101

Earlier quoted context omitted.

Newspapers use columns for the same reason, to not get too wide lines. Unfortunately I don't think I've ever seen a site use columns, even though CSS supports it. https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Personally I find column-style layout to be more difficult on the web. Though probably just due to lack of familiarity. As one example, the "Golf with your Friends" subreddit always throws me for a loop due to its use of columns. I have no idea how to read it! https://old.reddit.com/r/GWYF/ Note this example will only work on a widescreen desktop browser.

Just a quick note: It works on none widescreen desktop browsers as well if you zoom out far enough. Or at least it does on my 14" with FF 106

Re: 58 bytes of CSS to look great nearly everywhere

#232

Post by samtheprogram »

FrontAid wrote: post #60
DaveInTucson wrote: post #56

Earlier quoted context omitted.

hopefully not too dumb a question, but why put this on html instead of body?

Au contraire. That is good question. Everything in the snippet except the font-size should also work with the body selector. The font-size is an exception here as it defines the root font size that the `rem` unit is based on. And that has to be defined on html. https://css-tricks.com/html-vs-body-in-css/

This, in combination with the author trying to limit the number of bytes (adding another selector would be unnecessary and add to the length), is why.

Re: 58 bytes of CSS to look great nearly everywhere

#233

Post by nottorp »

thiht wrote: post #226
nottorp wrote: post #223

Earlier quoted context omitted.

I don't know what the right metric is but i simply can't read those sites that present you with a mobile-like layout with two paragraphs per screen on a 24" monitor. If the text is too small I can hit Cmd - Plus but with those i have no recourse.

It's not mobile-like, it's just legible. Just because you have a 24" monitor doesn't mean the text should take all the width, that's terrible.

Two of them

Re: 58 bytes of CSS to look great nearly everywhere

#234

Post by collinmanderson »

mwcampbell wrote: post #72
411111111111111 wrote: post #49

Earlier quoted context omitted.

That's true, but there could theoretically be more then one default. I'm not arguing in favour of it, just pointing out the possibility. it would be pretty simple to create a so that it's opt-in. I personally just don't see the point. There are a lot of bare bone frameworks around and if you're doing a static website (which would likely be the only type to benefit from that)... The <10 kilobytes gzipped css won't mat…

I would still appreciate an opt-in "modern" default that browser developers should feel free to change going forward. For me, it's not about minimizing download size; it's about maintaining a proper division between content and functionality, which are what I as an author and developer provide, and appearance, which should be up to the user agent, to best meet the user's needs and preferences. Sure, since I work on a…

It's probably hard to get everyone to agree on the defaults, especially the width / line-length of content. I think it makes sense to default to no width constraint, zero padding rather than picking something arbitrary. I personally start with 1em padding whereas the author seems to prefer 2em, (or 1.5, or 2ch which is roughly 1em)

Browsers used to default to adding margin/padding automatically to documents (Quirks Mode), but modern html includes a doctype to use "Standards Mode" which is more sane.

At the same time it would be nice to default to sans-serif typeface and line-height around 1.5 but it starts getting arbitrary very quickly and it's nice to build on something that doesn't change over time.

Re: 58 bytes of CSS to look great nearly everywhere

#235

Post by collinmanderson »

xani_ wrote: post #145
magnio wrote: post #45

A comparison using danluu's website: Default: https://postimg.cc/k2Zwffms With the 100 bytes version: https://postimg.cc/645d9vKT

That line spacing is obnoxiously big tho

Yeah when I saw 2em padding and 1.75 line height in the css I thought "too big". I think 1em padding and 1.5 line-height are a bit better for general defaults.

It often can look better to have more whitespace, but it lowers information density. It depends on the situation.

Re: 58 bytes of CSS to look great nearly everywhere

#236

Post by collinmanderson »

robertoandred wrote: post #175
sorenjan wrote: post #101

Earlier quoted context omitted.

Newspapers use columns for the same reason, to not get too wide lines. Unfortunately I don't think I've ever seen a site use columns, even though CSS supports it. https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Columns like those are a bit awkward when combined with scrolling long blocks of text. When you reach the bottom of one column, do you need to scroll back up to get to the top of the next? Or do you have the column fit the height of the screen and have some sort of horizontal scrolling for as many columns as it takes.

Maybe they could do it the old-fashioned way and scroll the columns horizontally.

https://en.wikipedia.org/wiki/Dead_Sea_Scrolls#/media/File:G...

Re: 58 bytes of CSS to look great nearly everywhere

#237

Post by teo_zero »

7steps2much wrote: post #230
teo_zero wrote: post #199

Earlier quoted context omitted.

I don't get this: > font-family: system-ui Why render texts with the font that the reader has selected for a different function, ignoring the one that she has selected for texts?

MDN[0] says: > Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics. So it might have been used to make the snippet "truly" universal for the developer using it. That said, I believe it would be better to choose the font family based on the content. E…

I still don't get it. You don't know what users select as UI font, how can it be universal? On the other hand, you do know what font they like for text, but decide to ignore it and serve them text rendered in what they selected for buttons!

Re: 58 bytes of CSS to look great nearly everywhere

#238

Post by ravenstine »

roelschroeven wrote: post #146
ravenstine wrote: post #41

Earlier quoted context omitted.

I much prefer the default styling other than that the margins are nearly nonexistent. Any time I come across a site that uses mostly default styling (such as some academic webpages from the 90s), I always think to myself "wow, this is pleasant to read." > Text also gets easier to read when more spaced out; the default line height makes the text too close together. The opposite is easily true in my experience. Making…

I feel that large text with large line heights makes small pieces of text (maybe a couple paragraphs maximum) easier to read, but makes comprehension of a larger piece of text more difficult. It makes you loose overview of the larger structure. It's very well possible that it's all different for different people, but I much prefer having a larger piece of text in view; smaller font, smaller margins and smaller line h…

I was just thinking; maybe large font size, wide margins, and bigger line height may serve to inflate "engagement" because they make it more difficult for a user to be able to glance at the majority of the page and get a sense of whether it's worth reading. If scrolling and getting a big picture view of an article takes some effort, users may be more likely to either read through the content or scroll slowly. Either way, it's a win for the designers because whatever tracker being employed will provide some fancy charts to convince the suits and ties that their work "increased engagement." It may also get users to look at more ads. All of which will certainly be pitched under the idea that it's accessible.

I really hate this if that's true, because the net effect does seem to be that I have to spend more time on a page to determine if the content is garbage or not. With physical books, you could flip through pages and catch things you're interested in by glancing over large areas. The modern web, for whatever reason, is doing quite a bit to prevent that from being possible on our screens without hacking our own browsers to fix the mess.

Re: 58 bytes of CSS to look great nearly everywhere

#239

Post by sorenjan »

robertoandred wrote: post #175
sorenjan wrote: post #101

Earlier quoted context omitted.

Newspapers use columns for the same reason, to not get too wide lines. Unfortunately I don't think I've ever seen a site use columns, even though CSS supports it. https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Columns like those are a bit awkward when combined with scrolling long blocks of text. When you reach the bottom of one column, do you need to scroll back up to get to the top of the next? Or do you have the column fit the height of the screen and have some sort of horizontal scrolling for as many columns as it takes.

Why not limit the height of the columns so they fit on the screen, and wrap around to new columns lower down? So when you reach the end of the rightmost column, you scroll down the page and continue reading at the leftmost column.

I've experimented with this style on Wikipedia, with separate columns under each headline. It usually works well.

Re: 58 bytes of CSS to look great nearly everywhere

#240

Post by sorenjan »

SquareWheel wrote: post #157
sorenjan wrote: post #101

Earlier quoted context omitted.

Newspapers use columns for the same reason, to not get too wide lines. Unfortunately I don't think I've ever seen a site use columns, even though CSS supports it. https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Personally I find column-style layout to be more difficult on the web. Though probably just due to lack of familiarity. As one example, the "Golf with your Friends" subreddit always throws me for a loop due to its use of columns. I have no idea how to read it! https://old.reddit.com/r/GWYF/ Note this example will only work on a widescreen desktop browser.

Columns that you have to scroll like that is not user friendly, their height needs to be limited to less than the window height.
Post reply on HN