54 votes

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.

44 comments

  1. [4]
    ThatFanficGuy
    Link
    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...

    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.

    9 votes
    1. [3]
      Wes
      Link Parent
      There's @supports, but that's not fully supported yet. :p

      How to determine which to use in a natural way is beyond me.

      There's @supports, but that's not fully supported yet. :p

      7 votes
      1. [2]
        ThatFanficGuy
        Link Parent
        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...

        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.

        1 vote
        1. Wes
          Link Parent
          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...

          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 @supports is a well-supported feature.

          8 votes
  2. [10]
    Wes
    (edited )
    Link
    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...

    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.css so 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.

    9 votes
    1. [9]
      Bauke
      Link Parent
      :D In my merge request for this I included the size changes, it may not be 100% correct anymore but should be close enough.
      • Exemplary

      :D

      In my merge request for this I included the size changes, it may not be 100% correct anymore but should be close enough.

      tildes.css file size changes:

      10 votes
      1. [5]
        Deimos
        Link Parent
        And the CSS files are also delivered gzipped, so it looks like the new one is a 24KB transfer.

        And the CSS files are also delivered gzipped, so it looks like the new one is a 24KB transfer.

        4 votes
        1. Wes
          Link Parent
          If you wanted to squeeze out some extra bytes, you could also offer Brotli compression. There should be a module for nginx.

          If you wanted to squeeze out some extra bytes, you could also offer Brotli compression. There should be a module for nginx.

          3 votes
        2. [3]
          ThatFanficGuy
          Link Parent
          Why not minify?

          Why not minify?

          1. [2]
            Deimos
            Link Parent
            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...

            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.

            12 votes
            1. Wes
              Link Parent
              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...

              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.

              3 votes
      2. [3]
        Wes
        Link Parent
        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...

        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.

        3 votes
        1. [2]
          Deimos
          Link Parent
          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...

          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.

          4 votes
          1. Wes
            Link Parent
            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...

            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.

            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.

            5 votes
  3. [19]
    Silbern
    Link
    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...

    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?

    5 votes
    1. [3]
      Wes
      (edited )
      Link Parent
      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...

      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.

      4 votes
      1. [2]
        Silbern
        Link Parent
        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...

        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.

        4 votes
        1. Wes
          Link Parent
          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.

          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.

          1 vote
    2. [15]
      culturedleftfoot
      Link Parent
      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.

      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.

      2 votes
      1. Silbern
        Link Parent
        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....

        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... 😅

        1 vote
      2. [13]
        Deimos
        Link Parent
        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...

        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.

        1 vote
        1. [12]
          Silbern
          Link Parent
          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...

          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!

          3 votes
          1. Deimos
            (edited )
            Link Parent
            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,...

            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.

            4 votes
          2. [10]
            Deimos
            Link Parent
            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...

            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.

            3 votes
            1. [8]
              Silbern
              Link Parent
              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 :)

              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 :)

              2 votes
              1. Deimos
                Link Parent
                Alright, so then it seems like a CSS @supports query for custom property support works in your browser, but unfortunately doesn't work for @culturedleftfoot's too. I'll definitely make sure...

                Alright, so then it seems like a CSS @supports query 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).

                2 votes
              2. [6]
                Deimos
                (edited )
                Link Parent
                Okay, hopefully it's at a reasonable state for the two of you now, along with anyone else using similar browsers: @Silbern - You should have basic themes available again. The basics should work...

                Okay, hopefully it's at a reasonable state for the two of you now, along with anyone else using similar browsers:

                • @Silbern - You should have basic themes available again. The basics should work (e.g. the colors of the background, text, links), but there will probably be some scattered issues. Please let me know if you notice major issues—to the level of "it will be unusable like this" (unreadable text somewhere or something like a large bright element on a dark theme could rise to this level). I'm not going to be able to make the themes stay equivalent for old browsers, but I'd like them to be usable.
                • @culturedleftfoot - Unfortunately, without at least @supports working, 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.
                2 votes
                1. [4]
                  culturedleftfoot
                  Link Parent
                  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.

                  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.

                  3 votes
                  1. [3]
                    Silbern
                    Link Parent
                    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...

                    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.

                    2 votes
                    1. [2]
                      culturedleftfoot
                      Link Parent
                      Thanks, but it's apparently an OS-level issue. It's not the end of the world though, I'll live.

                      Thanks, but it's apparently an OS-level issue. It's not the end of the world though, I'll live.

                      1 vote
                      1. Silbern
                        Link Parent
                        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...

                        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).

                2. Silbern
                  Link Parent
                  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...

                  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. :)

                  3 votes
  4. [2]
    Kuromantis
    (edited )
    Link
    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...

    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.

    4 votes
    1. Deimos
      Link Parent
      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...

      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.

      3 votes
  5. [3]
    Kuromantis
    Link
    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...

    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.

    2 votes
    1. [2]
      Deimos
      Link Parent
      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...

      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).

      4 votes
      1. Wes
        (edited )
        Link Parent
        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...

        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?

        1 vote
  6. [2]
    joplin
    Link
    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...

    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.

    2 votes
    1. Bauke
      Link Parent
      That's intentional, "official" posts (almost always from ~tildes.official) are highlighted with that orange color. It may be that it's using a different color than it used before this change, though.

      That's intentional, "official" posts (almost always from ~tildes.official) are highlighted with that orange color.

      It may be that it's using a different color than it used before this change, though.

      7 votes
  7. [2]
    rish
    Link
    Gruvbox Light. Bauke's comment has a thick blue not the normal yellow comment line. Is this because of mention in topic body?

    Gruvbox Light.

    Bauke's comment has a thick blue not the normal yellow comment line. Is this because of mention in topic body?

    1. Kuromantis
      (edited )
      Link Parent
      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.

      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.

      3 votes
  8. Kuromantis
    Link
    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...

    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.)

  9. ThatFanficGuy
    Link
    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 .comment element, the...

    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 .comment element, the Exemplary-label border – to its child .comment-itself.

    2 votes