💾 Archived View for warmedal.se › ~bjorn › posts › 2021-11-13-default-browser-styles.gmi captured on 2024-05-10 at 11:46:15. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2021-11-30)
-=-=-=-=-=-=-
Browsers have default styles for sites that don't have explicit rules for elements, and these used to matter a lot more when styling wasn't really an option on the web. They matter very much more on gemini then they ever did on the web, but I'll get to that later.
There's a lot of talk about responsive web design these days, and most websites have big stylesheets and sometimes even entire fonts to display as intended. The web is as much about design as content or semantics.
Of course my website is no different. Almost, anyway. Right now this is my entire CSS (it's not much more than it's been before, but I've moved the "logotype" block to the head element instead of inline):
body {
max-width: 45em; margin: auto; padding: 0 1em 5em; background-color: black; color: white;
}
a, a:visited {
color: lightgreen; text-decoration: none;
}
#logotype {
text-align:center; font-size:300%;
}
I've chosen to have a black background now because the white hurt my eyes when it's dark (which it is most of the time now), and subsequently I had to add link colour to make links visible.
Apart from that I rely very much on how browsers present my site, from the default font and size to the paragraph distance and the emoji set used. HTML was actually made to be responsive. It's a reflowing format that theoretically works on any screen size. But of course that won't be the case when there's things like sidebars or banners and stuff. And there pretty much always is.
Which I guess is the reason why default browser styles have sort of lagged behind a bit. You see that padding rule in the body block? That's there because it didn't work on mobile browsers otherwise. The text would hug the edges of the display so tightly that you got the feeling something must have fallen off the screen. It's not a big deal, and I guess most sites don't leave that up to the browser anyway. I'm not a web dev but I assume that most new websites start off with existing themes, templates, or CSS packages and tweak it from there.
Another oddity that I haven't quite understood in HTML but that no doubt has a rational reason to exist is the viewport thing that I have to put in the head block of every page now:
<meta name='viewport' content='width=device-width,initial-scale=1'>
I don't know what it does or if it ever has any other values for the content attribute... It's one of those things that old websites don't have and browsers should have a sane default for, though.
All in all I'm happy that I only have to add a padding rule and a one line meta tag to make my site entirely responsive. It goes to show that designing a page for all display sizes can be very easy if you focus on semantics and look for the least common denominator.
In contrast gemtext documents have no styling information at all. There is no way to add text or data that will not be shown to the reader, like tags with parser only information. Styling in the document is not possible. The compromise between gopher's hard wrapped text lines and HTML's meta-information heavy reflowing text has successfully decoupled semantics from design. As a writer/publisher/creator I don't think about styling at all, because design is not a differentiator. That is, it's not a part of how I shape my identity in geminispace.
For gemini this rather becomes a choice for the user, and a differentiator between browsers. AV-98 and other terminal based browsers rely on ANSI styles to show differences between headings and lists and so forth. Other browsers pick styles in a variety of different ways, and maybe there'll be browsers soon where the user can define styles themselves.
Lagrange is a rather heavy browser, for example, because it focuses a lot on graphical presentation and therefore includes custom font libraries. It truly makes gemini pages a beautiful experience.
Elaho and Rocketeer on iOS are also very pretty, even though they use existing fonts. They differentiate between the line types in a way that makes the pages easy to read and mentally parse. Both have dark backgrounds; in Rocketeer it's all white on black and in Elaho it's white on different dark shades.
The difference between the web and geminispace could not be bigger in this regard. The web hands presentation control completely over to the publisher, and geminispace hands it completely to the client. I think this is a large contributor to the duopoly of web browsers, because it truly takes a number of full time developers only to keep up with all the CSS changes. It's probably fair to say that CSS is almost turing complete by now, even though it's supposedly only for styling.
I hope that people remember the web of old and how plainly readable and adequate default styles can be, and how the ever so well meaning hunt for visual identity differentiation risks complicating things for developers, designers, and users alike.
I know that I wax nostalgic about the web of old here, but let's not forget the charming but inaccessible horrible experiments with scrolling status bar texts, animated snow flake backgrounds, bitmaps with embedded links, "under construction" signs or an over-abundance of animated gifs 😄
It uses custom stylesheets rather than relying on default web browser styles and it even has a couple of well chosen and well placed animated gifs. I love it. It's a wonderful and charming look at someone else's idea of what the web used to be or maybe could have been.
-- CC0 ew0k, 2021-11-13