Live data from Hacker News

58 bytes of CSS to look great nearly everywhere

gist.github.com

21–30 of 254 posts

Re: 58 bytes of CSS to look great nearly everywhere

#21
Shot in the semi-dark: there was a blog post posted here —- I haven’t been able to find it with HN search —- some years ago that started from scartch/browser-defaults and proceeded in like 5 steps to some nice minimal defaults. Not exactly a plain reset; there were some opinionated choices. Step one was something like the parent article. Anyone have an idea what this was, or have some similar recommendations?

Re: 58 bytes of CSS to look great nearly everywhere

#22
post #9

Earlier quoted context omitted.

Default styling looks terrible and is hard to read. Humans are good at reading columns at around roughly 80 characters, while browsers default to filling the whole width of the screen with text, resulting in a column that's hundreds of characters wide. Text also gets easier to read when more spaced out; the default line height makes the text too close together. Browsers still ship the bad defaults because changing de…

> Humans are good at reading columns at around roughly 80 characters What makes you say that? Anecdotally, I prefer using the full width of my screen.

Same, I lose my place every time moving from the bottom of a column to the top of the next.

Re: 58 bytes of CSS to look great nearly everywhere

#23

Do you still have to explicitly add CSS to do something appropriate for the user's dark mode setting? I'd rather not specify any colors at all and just let the browser use system defaults, but last time I checked, that used black-on-white even in dark mode.

That would introduce yet another set of defaults that developers would then need to inevitably override.

Re: 58 bytes of CSS to look great nearly everywhere

#24
post #9

Earlier quoted context omitted.

Default styling looks terrible and is hard to read. Humans are good at reading columns at around roughly 80 characters, while browsers default to filling the whole width of the screen with text, resulting in a column that's hundreds of characters wide. Text also gets easier to read when more spaced out; the default line height makes the text too close together. Browsers still ship the bad defaults because changing de…

> Humans are good at reading columns at around roughly 80 characters What makes you say that? Anecdotally, I prefer using the full width of my screen.

Especially for long blocks of text or becomes easy to go to the wrong line when scanning back to the left side of the page.

There exist decades of empirical research on this topic.

https://en.m.wikipedia.org/wiki/Line_length

Re: 58 bytes of CSS to look great nearly everywhere

#25
post #16
post #9

Earlier quoted context omitted.

Default styling looks terrible and is hard to read. Humans are good at reading columns at around roughly 80 characters, while browsers default to filling the whole width of the screen with text, resulting in a column that's hundreds of characters wide. Text also gets easier to read when more spaced out; the default line height makes the text too close together. Browsers still ship the bad defaults because changing de…

> Humans are good at reading columns at around roughly 80 characters Do you have some evidence backing this up? Thanks.

This is the sort of thing you can Google, because it is extremely common advice. A few of the top hits:

https://www.fonts.com/content/learning/fontology/level-2/tex...

https://pimpmytype.com/line-length-line-height/

https://material.io/design/typography/understanding-typograp... (see under Line Length)

I don't have any studies at hand, but I think it's been pretty well established.

Re: 58 bytes of CSS to look great nearly everywhere

#26

What is wrong with browser default styling, and why do browsers ship with something that is wrong?

Historical reasons. Default browser styling still carry a lot of heritage from back when screens were 640x480 and you had to squeeze as many lines as possible onto the 14" screen.

Of course, if you change the default CSS now that 30 years of HTML have been written to rely on these defaults, almost every website will break.

Re: 58 bytes of CSS to look great nearly everywhere

#27
post #7

Earlier quoted context omitted.

Browsers ship with defaults that are now 20 years old - there was a cool post here about 8px body padding a while ago. It's not "wrong" it's legacy.

Why is it legacy though? Shouldn't browsers be free to change it?

Web browsers have a hard constraint of backwards compatibility. Eventually we could see some CSS directive which enables "modern" default styling, both for mobile and desktop, but it would be opt-in so that existing sites which rely on defaults do not break.

Re: 58 bytes of CSS to look great nearly everywhere

#28

I've got a screen that is much wider than it is tall, this throws away so much of it. It's as bad as Facebook, where the stuff you want to see is a band about 1/4 the area of the screen.

In theory sites could optimize for wide screens by adding columns, but 1) its a very small audience 2) most content is not suitable for that (how would you scroll a feed that spans 3 columns?)

Re: 58 bytes of CSS to look great nearly everywhere

#29
post #7

Earlier quoted context omitted.

Browsers ship with defaults that are now 20 years old - there was a cool post here about 8px body padding a while ago. It's not "wrong" it's legacy.

Why is it legacy though? Shouldn't browsers be free to change it?

If you change them, almost every website will look bad in your browser because most rely on some of these defaults.

Re: 58 bytes of CSS to look great nearly everywhere

#30

Do you still have to explicitly add CSS to do something appropriate for the user's dark mode setting? I'd rather not specify any colors at all and just let the browser use system defaults, but last time I checked, that used black-on-white even in dark mode.

That would introduce yet another set of defaults that developers would then need to inevitably override.

I'd accept that. The user-agent knows better than I do what the user needs. Especially if the user is low-vision, color-sensitive, or whatever.
Post reply on HN