Testing a new method (CSS custom properties) for the site themes - please report any issues you notice
In his never-ending quest to keep improving Tildes's theme system, @Bauke has reworked a major portion of it again, this time making it use CSS custom properties (instead of pre-generating a lot of theme-specific rules using Sass).
This new method has a lot of benefits, including reducing the size of Tildes's CSS file to less than half of what it was before. It will also make it much simpler for people to override certain site colors or create their own themes using local CSS changes (e.g. through extensions like Stylus). (Note: please don't invest a lot of time into using it to customize yet, since it may still need to have further changes or even reverted)
This is a relatively modern CSS feature that should have good support at this point, but it's possible there will still be some issues, or things that were missed during the conversion. If you notice any colors being wrong or other appearance changes (even minor ones), please leave a comment (including which theme you're using) so that I can fix them up.
Thanks yet again, @Bauke!
And I haven't done it in a while now, but I've topped everyone back up to 10 invites, accessible on the invite page.
I would be utterly surprised if any issues with support come up: you already use CSS Grid, the support for which is a hair shorter than that of custom properties.
In the future, you could generate two stylesheets: the modern one, and the legacy one, where values are set instead of derived from variables. How to determine which to use in a natural way is beyond me. Perhaps leaving legacy themes in place, with set values, could be a good solution for users with older browsers.
But at that stage, if you're looking to support much older (or non-GUI) browsers, you'd want to address using Grid rather than Flexbox, or table layout, or letting it flow vertically.
There's @supports, but that's not fully supported yet. :p
Yet?
It will never be supported in IE 11 or older. Microsoft is not to go about and update their old browsers for new specs, even though there are still small-but-nonzero audiences for those. Some properties get support in IE, and I suspect it's only because the relevant browsers had the underlying interfaces already baked into them.
Your best guess as a web designer working with CSS is to rely on the fact that modern browsers are evergreen. If you need wider support than that, it might require server-side request parsing and then serving the appropriate payload.
I think you're reading into my comment too literally. I understand that Microsoft won't be updating older version of IE. However, the percentages of users still using IE will slowly go down, at which point it would be more accurate to say that
@supportsis a well-supported feature.Perfect! I was really hoping to see the switch to custom properties. I'm a web performance guy so including all the themes seemed wasteful to me (even though they're each quite small). Nice work @Bauke!
No issues noticed here on Atom One Dark. Is there a before and after comparison on payload size?
Next up is reworking
site-icons.cssso it's inline, to prevent that whole file from needing to be downloaded...edit: For contrast, I'm currently working on a site that totals over 5MB, and includes 5 (five!) separate icon fonts. Tildes is such a breath of fresh air in comparison.
And the CSS files are also delivered gzipped, so it looks like the new one is a 24KB transfer.
If you wanted to squeeze out some extra bytes, you could also offer Brotli compression. There should be a module for nginx.
Why not minify?
I'd rather have readable class names and CSS that people can examine, understand, and override if they want to, as well as not having a complete disconnect between the CSS on the live site and what's written in the source files.
Using gzip gets you most of the way there anyway, since it's good at compressing repeated strings like class names. That's why the gzipped version of the CSS is only about 15% the size of the uncompressed file.
For what it's worth, SASS' minification does maintain the original class names. So it shouldn't look any different in the dev tools.
Of course for reading the actual file, you'd still need to review the original source or use source maps.
Woo, nicely done!
I figured the theme files would be separated with this change, but it looks like it's all still packed into one file. Any plans to split those up? I'd bet the extra network request would be less impactful than the saved data, now that HTTP/2 is a thing.
Splitting it into files would be a little annoying because there's a theme-switcher on every page (in the footer), so you'd have to load in a different file whenever anyone uses that. It's probably not worth worrying about that to save the few lines that will be specific to each theme.
I'd definitely like to do some significant rearrangement of the source files though, since now all the colors can just be put back into the "main" rules for each element, instead of needing to be split out somewhere else to generate all the theme-specific CSS.
Okay, that makes sense. Updating the loaded theme wouldn't be that hard, but it's technical debt for a relatively small pay off (right now). If themes become larger in the future, it would make more sense.
Custom properties are pretty cool. They're not just variables like in SASS, but follow the same inheritance model of other properties. That should allow for some more advanced theming functionality.
Aaahhhh, so that explains why themes suddenly broke on my old Android's version of Opera. Is there any chance that we could manually choose to enable a legacy mode, in like a settings option or such? Even if it never gets any new themes, or if we trim it down to a basic black and a basic white theme, it would be nice on older browsers to have the option to disable the blinding white of the fallback colors.
But at least it's nice to see a move towards modularity and readability! I'm not a web developer or anything, but I gave a quick peak into the Tildes.css file and it does indeed seem to be really easy to modify - just by tweaking the color values for the different elements?
I wouldn't have thought Opera was still seeing much use at all. @Silbern out of curiosity, do you run into a lot of broken websites online?
I suppose this is one of the downsides of not running analytics. It makes it a lot more difficult to know which users you have to support. Websites like CanIUse.com provide averages, but it's your own audience that really matters.
Surprisingly, not very commonly actually. This version of Opera was released after the switch to a Chromium base, so it actually has pretty excellent compatibility with most websites. The thing that usually does me in is with RAM usage - on a 512MB phone, where 372 is available to userspace and only about 80 is available to whatever the foreground app is, a fair number of websites can bring the phone to its knees through nothing more than lots of big pictures. There probably aren't that many people still using it, but if you're using an older version of Android, it's one of the best browsers in terms of speed vs compatibility. The stock Android browser is amazingly lightweight and supports color inversion, but it doesn't work with anything above TLS 1.0 due to an incredibly short sighted decision by Google, and recompiling it is a huge undertaking (I've tried multiple times), so you're unfortunately quite limited in what it'll work with.
Ah, I see. Thanks for the explanation. When I heard Opera I figured it'd probably be Opera Mini, or the older Presto rendering engine.
Themes also broke on my phone today and I support this. Besides the brightness of so much white, there's some transparency wackiness that makes sidebar use/navigation difficult as well.
Yeah, I saw that too! I was wondering if it's because the side panel logic also broke, but nope, you're right - the background's invisible so the text looks like it blends together on one page. Had to practically snipe the settings button... 😅
Hmm, that's not great then if multiple people are having things break on their phones. Are you using Opera as a browser too, or something else?
And what's the transparency issue? Like @Silbern says, is it like the sidebar doesn't have a background? That would definitely be weird but probably fixable without being associated with the CSS custom properties at all.
I'll try to think about some kind of "legacy mode", I wonder if it's possible to keep generating a stylesheet using the old method that people could enable as a setting if they're using an old/incompatible browser.
I figure a picture is worth a thousand words, so I posted two screenshots of what it looks like right now, making sure the black theme is selected (I can also email or host them elsewhere if you'd rather not deal with Imgur). It used to be mostly black and the little side panel was opaque when it opened, but now it's all white and I think the side panel is transparent and that's what's going on, but I don't have the expertise or the tools to confirm. Truth be told, as ugly as it looks, the side panel's manageable, especially because we can still access the settings and profile directly through URLs. The colors are more annoying since it's eyestraining to read for longer than a few minutes, and Tildes doesn't lend itself well to quick glances haha.
Hopefully there's some kind of easy fix or workaround, but if it would significantly complicate the site's design or be troublesome to deal with, it's also fine to drop support, no need to go crazy over it. That being said, if there's anything I can do to help you out (with debugging or whatever), do let me know and I'll do my best to be of assistance!
Thanks, the screenshots are helpful.
Is the layout on the first screenshot what the site usually looks like to you? I guess that's what it would look like in a browser with no CSS Grid support, but that's pretty rough, I'm honestly surprised you use the site like that.
I'll see what I can do about the sidebar issue at least. I'm not sure if I'll be able to test it, so I may just have to ask you to check later once I've implemented something.
Can you and @culturedleftfoot both check to see if the sidebar still has that transparent background?
I put in a very quick test that currently only tries to fix that, but it might be possible to do some more significant fixes if this method works for your browsers.
It works perfectly! Here's how it looks now, and it's exactly the same as to how it worked before the change, just that the background was black :)
Alright, so then it seems like a CSS
@supportsquery for custom property support works in your browser, but unfortunately doesn't work for @culturedleftfoot's too.I'll definitely make sure there's a fix in to prevent that transparent-background sidebar issue, and I might also try putting in some very basic "fallback" themes that could cover the major colors for a theme (but will probably have various issues).
Okay, hopefully it's at a reasonable state for the two of you now, along with anyone else using similar browsers:
@supportsworking, it's not going to be reasonable to keep themes. So I think you're going to be stuck with a white background, but I did try to put in a fix for the transparent sidebar. Let me know if that's fixed, at least.Yes, the sidebar is usable once more, thank you. A little disappointed to give up Dracula but I can't reasonably expect my potato phone to work forever.
Are there perhaps other browsers on Blackberry that might work? Or if BB supports APKs, my version of Opera supports all the way back to at least Android 4.2.2 (since that's what I'm using), and I can link it to you from APKmirror if you'd like.
Thanks, but it's apparently an OS-level issue. It's not the end of the world though, I'll live.
You might be surprised. I don't know exactly how BlackBerry does it, but on Android (and iOS), many browsers are just reskins on the same OS backend. However, there are some like the full versions of Opera (which I'm using), or Firefox, that actually bundle not only their own engine, but an entire network and TLS stack too. It's actually how my Android still works with Tildes at all, since it has extremely strict TLS 1.2 compliance settings, and Google for whatever reason didn't enable TLS 1.2 support by default until 5.0. If you have some spare time, you may wanna poke around - it's very well possible there's one out there, or if not, the compatibility layer should support an old version of Opera or maybe even Firefox, since it's apparently compatible up to API level 18 (Jelly Bean 4.3 iirc).
They you so much Deimos! I really appreciate it. I can confirm that after toggling the theme to a different one and back, I once again have a usable dark mode. There are a few inconsistencies I can spot right away - the most prominent is the top of the site being a shade of gray instead of black - but it doesn't hamper usability in thr slightest. I'll keep an eye out for any breaking changes and let you know. Thanks once again, I know supporting legacy stuff can be kinda a pain, but it's really great to be able to continue reading Tildes even on this old thing. :)
No change here, sadly.
Okay, here are the (visible, technical already noted in text post) changes I've noticed so far (insert is for apparent bugs)
Dotted lines (under 'OP', around 'details' boxes, under many headers in the docs, next to quote blocks) seem to be smaller and more numerous (IMO, neat, I guess.)
Dashed lines (the box shown when clicking preview) are of a different, more contrasting color than before. This color seems to be the color of this text.The 2 lines separating the (opened, mobile only) sidebar from your frontpage have undergone the same shift (RIP that color TBH. IMO, bad.)EDIT: That's fixed.The '×' that appears next to the tags when you edit them has also changed color. (IMO, odd.) (and in the gruvbox themes, the tags seem to have lost their 'boxes'.)
Pressing the 'more actions' button in a post and the 'next' and 'previous' buttons in the pages after the homepage shows different colors. Also applies to voting in a post. (IMO, neat.)
Those buttons now appear at the top and bottom of those pages mentioned above.
The outlines of 'collapse replies' and 'expand all' glow/are colored when you press them. (This also happened with collapsing or expanding individual comments but it didn't work in mobile and was scrapped.)
The horizontal lines of the 'inbox' and 'received messages' in the user menu seem to have all the same color regardless of theme (does not apply to regular tables for some reason. Also the original theme of these lines seems to be the Dracula theme.)EDIT: That's fixed too.Thanks for noticing all of these details. I think a lot of them have the same base cause—each theme has a less-contrasting "border color", and before I was using a way that would use that color by default for most borders. For technical CSS reasons, that way isn't working with the new method, so a lot of borders are now defaulting to using the same color as the text color, which makes them look way more dark/bright.
Oh, is this why the collapse comment button looks different than before? If so, then I might already have an oddity since the left side of the collapse box doesn't light up when I touch it, unlike all the others.
Thanks, yeah, I see what you're talking about. Just the left border of the comment-collapse button, and only on mobile (since it's larger on mobile and goes all the way to the left edge of the comment box).
I'm seeing what looks like a character encoding issue there.
content: "−";edit: Intermittent. Only appeared once or twice.
edit2: Snagged a screenshot. Still occurring intermittently. Would it be better to use
−or−in the CSS?The title of this post on the main page was in a bright orange color that I've not seen before. I don't know whether that was intentional or not. Looks a little weird to me. (I'm using the Gruvbox Light theme, fwiw.)
EDIT: Actually, looking at it, it's the same color as the unread count on an item where you've looked at it before and there are new entries.
Gruvbox Light.
Bauke's comment has a thick blue not the normal yellow comment line. Is this because of mention in topic body?
No, he got an 'exemplary' label in his comment which makes it stand out in blue. If you click on the label button you'll see the text and his label are the same color.
I found another oddity, the "Tildes prioritizes high-quality content and discussions" box in the "new topic" pages seem to have a weird border color too. In solarized dark, the color is somewhere between gray and purple. (I don't think I can get RGB values in mobile.)
Not related to the update, but:
Top-level comments with and Exemplary border and no children have their bottom border misaligned. The bottom border belongs to the
.commentelement, the Exemplary-label border – to its child.comment-itself.