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

61–70 of 254 posts

Re: 58 bytes of CSS to look great nearly everywhere

#61

Post by clairity »

mikewarot wrote: post #17

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.

browsers have been working on multiple column text for a while now[0], so by employing a container/media query, you could have multiple columns for wide screens and content containers. i experimented with it a couple years ago and found quirks (which i can't remember offhand) that made it not quite ready for primetime then.

[0]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns...

Re: 58 bytes of CSS to look great nearly everywhere

#62

Post by dmitriid »

Herodotus38 wrote: post #33
jraines wrote: post #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?

I had to through my saved favorites, but I knew what you were talking about. From 5(!) years ago: https://jgthms.com/web-design-in-4-minutes/

Great, with one nitpick: "Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text"

Why are people so afraid of black text on white background?! In the end, after all the colors and custom fonts the website has gray text with poor readability which instantly fails WCAG AAA. Had he kept #555 (which is still not ideal), the author would have had a WCAG AAA-compliant design with minimal effort.

Re: 58 bytes of CSS to look great nearly everywhere

#63

Post by coffeeblack »

Herodotus38 wrote: post #33
jraines wrote: post #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?

I had to through my saved favorites, but I knew what you were talking about. From 5(!) years ago: https://jgthms.com/web-design-in-4-minutes/

Well done step by step presentation.

But I still prefer how the page looked initially, without all the styles.

Re: 58 bytes of CSS to look great nearly everywhere

#66

Post by alerighi »

mort96 wrote: post #9
freediver wrote: post #5

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

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

Depends. The reason why it may seem better to have narrow column is so you can skip ahead more easily and thus read faster (reason why newspaper divide an article into columns). Otherwise it doesn't make difference.

To me it's absurd that this day the trend is to have wide screen displays (16:9 but nowadays even 21:9 is common) and then all the text is vertical in a column that makes it impossible to read.

I prefer to give the use a choice: after all if the user prefers narrow text all he has to do is to take the mouse and resize the browser window at the width that he likes! But doing the opposite is not possible (at least without an extension that modifies CSS), and thus you have to keep scrolling something that otherwise would have fitted in a single screen.

Re: 58 bytes of CSS to look great nearly everywhere

#67

Post by dagurp »

djbusby wrote: post #7
freediver wrote: post #5

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

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.

It would be nice if you could choose between defaults in the html tag

Re: 58 bytes of CSS to look great nearly everywhere

#68

Post by shadowofneptune »

ricardobeat wrote: post #28
mikewarot wrote: post #17

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?)

https://www.nasm.us/xdoc/2.15.05/html/nasmdoc2.html

The NASM website is an example of this. Personally, I don't like it and would prefer a single column.

Re: 58 bytes of CSS to look great nearly everywhere

#69

Post by wpietri »

marginalia_nu wrote: post #26
freediver wrote: post #5

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.

Allow me to go off on a tangent and say:

> 30 years of HTML

holy fucking shit

Re: 58 bytes of CSS to look great nearly everywhere

#70

Post by rch »

dwringer wrote: post #51
FrontAid wrote: post #35

I think this does not work well for mobile devices. Spacing and the font size is too large. Hence, a lot of screen space is wasted and the user has to scroll more. Larger font sizes on mobile are usually not a good idea as the device tends to be closer to your eyes anyway. A snippet that could work better in my opinion is the following: html { max-width: 70ch; /* larger spacing on larger screens, very small spacing o…

I wonder if everyone has a different optimum here based on different eyesight, screen size, and usage patterns. I always have a slightly different zoom on every website I visit. With this one I tend to agree, I can't see enough text at once and the margins seem a bit wide.

Content on the web used to flow pretty well irrespective of those factors. The 'liquid' layout in Adobe's pdf reader works as it should, as does the simplified view in Chrome (which is suspiciously only offered on sites without ads). So, I'm optimistic that simplified layouts are worth pursuing.
Post reply on HN