Ancestors

Written by Koos Looijesteijn on 2024-12-16 at 11:06

You're making me buy a new phone! One of my most read blog posts ever is me showing how software developers push users towards buying a new phone. Because they make app and website updates that don't support older systems.

Now I'm one of those developers having to make a choice ... Should I use a relatively new CSS feature in the rewrite of our website?

https://www.kooslooijesteijn.net/blog/you-are-making-me-buy-a-new-phone

=> More informations about this toot | More toots from koos@octodon.social

Toot

Written by Koos Looijesteijn on 2024-12-16 at 11:06

Of last week's visitors, about 99% of visitors have a browser that supports :where(). By the time the project is done, it should be close to 99,9%.

And all people involved in conversions to newsletter signup and donations had a modern enough browser!

So I should have no business reason to even consider this a second longer. Except that our business is sustainability.

=> More informations about this toot | More toots from koos@octodon.social

Descendants

Written by Koos Looijesteijn on 2024-12-16 at 11:06

I think I will actually continue with modern CSS and use :where(). With websites it's pretty easy to add fallbacks to new code features, but in this case, the fallback could be noticeably inferior. But there will be a working fallback and using modern CSS will save me lots of time.

What would you do?

[#]css #webdev #sustainability

=> More informations about this toot | More toots from koos@octodon.social

Written by M. Verdone on 2024-12-16 at 11:35

@koos CSS itself is an optional enhancement. If the HTML is properly structured, degradation in CSS features shouldn't prevent use of the site. It just might be a little more ugly. So I'd try to optimize for HTML that works with no CSS as a proxy for the 1% that might not have the CSS feature you expect.

=> More informations about this toot | More toots from sixohsix@icosahedron.website

Written by Koos Looijesteijn on 2024-12-16 at 13:25

@sixohsix I think that's the best approach in general! But partially unsupported CSS can actually break a page. For example, I once had a position: sticky element somewhere that was supposed to be covered by other elements until scrolled into the view, but because the background color was defined in oklab, older browsers showed layers of superimposed text, rendering the page unusuable. The fallback was pretty easy in this case, but things can get pretty complex. I could add @supports queries to all styles that may contain modern features and add basic values as a fallback, but that kind of defeats the ease-of-use purpose.

=> More informations about this toot | More toots from koos@octodon.social

Written by M. Verdone on 2024-12-17 at 10:50

@koos but like... why did you use oklab? I'm not doing web stuff much these days, so pardon my ignorance, but it seems oklab is new as of 2023, which is much newer than the :where feature you mentioned.

As well, can't an oklab color always be rewritten as RGB? It seems like that is an easy feature to avoid for a couple more years, unlike :where.

=> More informations about this toot | More toots from sixohsix@icosahedron.website

Written by Koos Looijesteijn on 2024-12-17 at 12:30

@sixohsix yeah, you're right, that particular issue happened on my personal site. oklab() and oklch() are super handy for creating color variations! You can generate a whole color palette based on one or two brand color values. There are still some issues with it (like, using only CSS calc() you can create out of gamma values), so for work I'd only use it for enhancements, like for shadows: https://www.kooslooijesteijn.net/blog/shadows-have-colors

Easy enough to provide fallbacks there.

=> More informations about this toot | More toots from koos@octodon.social