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
I think the line spacing is "comfy". Approved. For me.
58 bytes of CSS to look great nearly everywhere
171–180 of 254 posts
Re: 58 bytes of CSS to look great nearly everywhere
#172Re: 58 bytes of CSS to look great nearly everywhere
#173Line height 1.75 lol no thanks.
Re: 58 bytes of CSS to look great nearly everywhere
#174I 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…
> body :not(:is(h1,h2,h3,h4,h5,h6)) {
That seems both clever and hard to maintain over the long run.
Re: 58 bytes of CSS to look great nearly everywhere
#175Not 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.
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.
Re: 58 bytes of CSS to look great nearly everywhere
#176I 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…
> body :not(:is(h1,h2,h3,h4,h5,h6)) { That seems both clever and hard to maintain over the long run.
What would make it hard to maintain? (honest question, I'm rather ignorant of CSS)
Re: 58 bytes of CSS to look great nearly everywhere
#177this is too narrow for my liking
Re: 58 bytes of CSS to look great nearly everywhere
#178I 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 like this but given the max-width: 70ch, how do you prefer to handle things that you do want to take up the full screen width, such as pictures or header/footer with a background color? Explicitly set each of them to 100vw? I've tried the opposite approach, setting the max-width only on p,h1,h2,h3 (etc) but it's error-prone. I've never quite found a set up that feels simple and robust.
Re: 58 bytes of CSS to look great nearly everywhere
#179this is too narrow for my liking
[deleted]
Re: 58 bytes of CSS to look great nearly everywhere
#180Earlier quoted context omitted.
The modern approach is to do a universal rest: *, *:before, *:after { all: unset; display: revert; box-sizing: border-box; }
Would that actually work as a safeguard against this? What you're reverting and unsetting to is the very defaults we're talking about changing.
As I understand it, it won't protect you. What will protect is actually setting the value (and most sites do that, at least for those few commonly changed ones with bad defaults).