To make your website viewable on any device you’ll have to be conservative with your CSS

In my last article I encouraged us to make sure our simple blogs were viewable on any device. We can use Firefox’s Responsive Design Mode to emulate screen dimensions and network conditions, but not anything else. The best approach is to therefore test on a real device if we want to get a true idea of how it handles our site.

My Samsung TV has a web browser. Good, I thought, I can see how This day’s portion renders in the wild. The browser looks a bit like Chrome, which is encouraging, but actually using it was… bad.

We can infer this browser doesn’t support: logical properties (e.g. margin-inline), custom properties (e.g. --spacer-3: 1rem), vw, column-gap with flexbox or clamp. This isn’t surprising as it’s hard to see when we can update these browsers – it just about works, but it’s not very readable. Most of these I can work around – perhaps through using grid instead of flexbox – or I can progressively fall back when the CSS declaration value isn’t understood. If the property isn’t understood I’ll have to change tack.

This is a shame. Logical properties make your website language agnostic and therefore more accessible. Shows that however “pure” you’re trying to be, you’ll face tradeoffs.