no example screenshot or demo page? really?
58 bytes of CSS to look great nearly everywhere
131–140 of 254 posts
Re: 58 bytes of CSS to look great nearly everywhere
#132I wrote my version here last year: https://www.swyx.io/css-100-bytes html { max-width: 70ch; padding: 3em 1em; margin: auto; line-height: 1.75; font-size: 1.25em; } if you have 100 more to spare: h1,h2,h3,h4,h5,h6 { margin: 3em 0 1em; } p,ul,ol { margin-bottom: 2em; color: #1d1d1d; font-family: sans-serif; } explanation in the blogpost
Element-based selectors, setting the root font-size, mixed units, text color with no background color...I guess the assumption is that you won't add ANY other styling? Big headaches down the road if you do.
Re: 58 bytes of CSS to look great nearly everywhere
#133Do 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.
You do, via `color-scheme` or media query
Re: 58 bytes of CSS to look great nearly everywhere
#134A comparison using danluu's website: Default: https://postimg.cc/k2Zwffms With the 100 bytes version: https://postimg.cc/645d9vKT
Line spacing is atrocious
Re: 58 bytes of CSS to look great nearly everywhere
#135Earlier quoted context omitted.
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 de…
Yup. My eyes started getting tired exactly at the point when the text became gray.
Re: 58 bytes of CSS to look great nearly everywhere
#136Earlier quoted context omitted.
People are using 48+ inch OLED tvs for monitors now. Someone reading full width text will look like they're watching a tennis match.
People can set the exact width they're comfortable with by making the browser window the size they want. But the moment that max-width is added, the choice is removed.
That's a good point and I feel the same way about links that open in news tabs.
Re: 58 bytes of CSS to look great nearly everywhere
#137What is wrong with browser default styling, and why do browsers ship with something that is wrong?
> What is wrong with browser default styling, and why do browsers ship with something that is wrong? The problem with browser default styling is that there should be another level: user default styling. I.e., the styling as chosen by the user.
I think this is a valid point. For example, I have always wondered why default browser styles don't at least adjust to the OS's theme - be it Metro, Material, Qt, Gtk, whatever. It would solve a lot of issues for bare-bones websites, while still allowing full configurability for websites via override. And if we really cannot have nice things because of backwards compatibility, make OS integration optional via tag etc.
Why does every website have to reinvent the wheel?
Re: 58 bytes of CSS to look great nearly everywhere
#138Is there a html/css only way to automatically “columnize” text into multiple columns of reasonable width?
There is the columns CSS property: https://developer.mozilla.org/docs/Web/CSS/columns You probably don't want to apply it to a whole document because then you need to scroll back to the top to read the second half. But it can be effective to columnize text sections between headings.
Thanks. I’d love to see automatic pagination as well so it builds full window columnized “pages”.
Re: 58 bytes of CSS to look great nearly everywhere
#139I'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.
Hope you don't mind the self-promo: Here's a GH project of mine which attempts to provide styles for popular websites to remove large paddings and max-widths: https://github.com/phil294/density-userstyle
Re: 58 bytes of CSS to look great nearly everywhere
#140I 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…
Frankly my pet hate is that page takes 7 seconds to load on a 500Mb WiFi connection on a high end android device.