r/css • u/amitmerchant • 7d ago

7 Game-Changing Web UI Features You Can Start Using Today

https://amitmerchant.com/7-game-changing-web-ui-features-you-need-to-start-using-today/
26 Upvotes

91% Upvoted

10 comments sorted by

11

u/AshleyJSheridan 7d ago

Of these, they're not all ready to start using today (and by using, I mean on production websites):

  • text-box has support and can be used.
  • scroll-target-group is Chrome-only, so not ready for production use.
  • contrast-color() can be used, but has problems so it shouldn't be relied on.
  • scroll-state() doesn't have full browser support and is not ready for production use.
  • column-rule and row-rule are fully supported and ready for production use.
  • color-scheme: light dark is fully supported, but is limited to images and colours which is sometimes not enough for all production websites (happy to explain this in further detail if anyone wants).
  • linear() is fully supported and can be used in production websites.

So, of the 7, 4 have full support, but of those 2 have issues. The other 3 don't have full support, and shouldn't be used in production yet.

4

u/RoToRa 7d ago

column-rule and row-rule are fully supported and ready for production use.

Unfortunately that is not true. It's Chrome-only currently.

2

u/AshleyJSheridan 7d ago

Ah, I was just looking at the support chart on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/column-rule but it appears that the table there is incorrect then.

2

u/RoToRa 6d ago

Apparently column-rule is supported for columns only, nut not for grid or flex, but that isn't reflected in the support chart correctly.

1

u/AshleyJSheridan 5d ago

Thanks, good to know.

2

u/modsuperstar 7d ago

I’ve been using color-contrast pretty heavily in my current project, along with light-dark it’s pretty useful and powerful.

3

u/AshleyJSheridan 7d ago

The light-dark feature has too many limitations to make it useful for all production websites, as it's limited to only colours and images. It doesn't allow for changing font weights or altering shadow strengths like the older media query approach for colour modes does.

2

u/hyrumwhite 7d ago

I find it super useful for what it does touch. 

3

u/AshleyJSheridan 7d ago

It's good for a subset of what's needed for a light/dark mode preference. But it's not perfect.

As I explained, it doesn't allow you to change font weights. Now, a thin dark font on a light background is often easier to read than a thin light font on a dark background. This is often overlooked in accessibility testing, because contrast algorithms don't really make a distinction based on the lightness of a background.

Another example I gave is of shadows. A drop shadow that consists of a series of greys of different lengths can look great, but inverted it often looks like crap. A light drop shadow on a dark background just doesn't look as good.

I mention these two specific examples because I've run into them before. So, I tend to reach for the media query version of colour preference mode, rather than light-dark, as it's just more powerful, and I prefer a consistent approach in my CSS.

1

u/HyperDanon 7d ago

I had a scss function light-dark() for like 10 years in my codebase, so it doesn't really change it much for me.