Live data from Hacker News

58 bytes of CSS to look great nearly everywhere

gist.github.com

71–80 of 254 posts

Re: 58 bytes of CSS to look great nearly everywhere

#71

Earlier quoted context omitted.

I doubt this. Almost every website overrides all of the relevant CSS attributes, because the default is just atrocious. Changing the default won't impact them. Anyway, the browsers still can update the CSS and add a "reverse read mode" button that changes it back.

They override the CSS attributes that don't fit what they are doing now, but changing the defaults would introduce new attributes, which may not presently be overridden.

The modern approach is to do a universal rest:

  *, *:before, *:after {
    all: unset;
    display: revert;
    box-sizing: border-box;
  }

Re: 58 bytes of CSS to look great nearly everywhere

#72

Earlier quoted context omitted.

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.

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 accessibility and am visually impaired myself, my perspective on this is skewed. Still, there are clearly others who wish the browser would have more sensible defaults.

Re: 58 bytes of CSS to look great nearly everywhere

#73

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…

> Hence, a lot of screen space is wasted and the user has to scroll more

Unfortunately that appears to be the case for a great many sites when viewed on a mobile device.

My current pet hate is British Airways, https://www.britishairways.com/travel/home/public/en_gb/ has so much wasted space that on my Pixel I have to scroll to reach the buttons "Manage My Booking" and "Check In". Further down the page the "Your account" and "Sign up" bits are so large and generously padded that they fill my mobile device's screen all by themselves.

Is this by design? Maybe in some warped design brief "scrolling" = "[potential] customer interaction" = a KPI gets fulfilled?

Re: 58 bytes of CSS to look great nearly everywhere

#76
Not explicitly mentioned here, but worth bringing up: Text width should always be constrained to a maximum width to optimize for human reading. Every book ever printed has text with set within the same range for a reason. Full width text guarantees most users will have a poor reading experience.

Re: 58 bytes of CSS to look great nearly everywhere

#77

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…

> Hence, a lot of screen space is wasted and the user has to scroll more Unfortunately that appears to be the case for a great many sites when viewed on a mobile device. My current pet hate is British Airways, https://www.britishairways.com/travel/home/public/en_gb/ has so much wasted space that on my Pixel I have to scroll to reach the buttons "Manage My Booking" and "Check In". Further down the page the "Your accou…

I bet you think autos should not have wood interiors, too! Heathen!

(I wonder if it is a "posh / classy" style or what not?)

Re: 58 bytes of CSS to look great nearly everywhere

#78

Earlier quoted context omitted.

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.

But it would be better still if browsers offered an opt-in modern default style, to relieve us developers of having to make assumptions about the user's visual needs, which should be the domain of the user agent.

Re: 58 bytes of CSS to look great nearly everywhere

#79
“max-width: 38rem it appears that the default font size for most browsers is 16px, so 38rem is 608px. supporting 600px displays at a minimum seems reasonable.”

I’m not an expert in CSS, but I don’t think this makes sense. Why base the width on the default font size when you know you’re aiming for 600px? Just write 600px. Also that’s a max width, so what makes this support 600px screens at a minimum?

Re: 58 bytes of CSS to look great nearly everywhere

#80
post #70

Earlier quoted context omitted.

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.

If Google would stop the absurd block on text reflow and resize, on Chrome Android, we'd really be good.

Seeing how slick and smooth and beautiful and handy it is on Opera, puts any ridiculous dev team rejections to waste.

Text reflow missing from Chrome -- valid proof end user convenience is not a primary concern.

I bet text reflow moves ads into the wrong position, thus the decade long block.

Post reply on HN