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

51–60 of 254 posts

Re: 58 bytes of CSS to look great nearly everywhere

#51

Post by dwringer »

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.

Re: 58 bytes of CSS to look great nearly everywhere

#52

Post by WallyFunk »

joeriddles wrote: post #39
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?

Perhaps this or this? Excuse the language. [1] http://motherfuckingwebsite.com/ [2] http://bettermotherfuckingwebsite.com/

And this: https://watercss.kognise.dev/

Re: 58 bytes of CSS to look great nearly everywhere

#53

Post by hoherd »

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.

This whole design pattern of wasting screen real estate in desktop browsers drives me crazy. If I want narrow text I'll make my browser window narrow.

On mobile, so many times it ends up creating a bad UX, but I will say that it does make more sense there where you can't change your browser width.

Re: 58 bytes of CSS to look great nearly everywhere

#54

Post by FrontAid »

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.

> 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.

I would think so. And because of that, accessibility is an essential topic. Luckily, this snippet will automatically follow your zoom level and/or font size settings.

Re: 58 bytes of CSS to look great nearly everywhere

#55

Post by sva_ »

mort96 wrote: post #4

The original page seems to be gone from the web, but here's an archive of it: http://web.archive.org/web/20210318102514/https://jrl.ninja/... . That shows the described CSS in practice.

It also references this previous discussion: https://news.ycombinator.com/item?id=19607169

Re: 58 bytes of CSS to look great nearly everywhere

#56

Post by DaveInTucson »

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…

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

Re: 58 bytes of CSS to look great nearly everywhere

#58

Post by antics9 »

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…

This will work in obscure browsers like Netsurf as well:

html{ margin:0 auto; max-width:80ch; padding:0.6em; font-family:serif; line-height:1.6; background:#FFF; color:#222 } h1,h2,h3{color:#444} img{width:100%}

Re: 58 bytes of CSS to look great nearly everywhere

#60

Post by FrontAid »

DaveInTucson wrote: post #56
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…

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/

Post reply on HN