Over the weekend I blogged about checking whether your website renders well on all devices, using a Nokia 8110 as a baseline. The thinking being: if your website displays decently on the smallest possible device, the likelihood is it will work on anything your reader throws at it.
I think this is a useful approach, but I encounterd a problem when I tested this site on my Samsung TV. Obviously, screen width isn’t a problem, but CSS support definitely is.
You’ll no doubt be very relieved to hear that I’ve got the site looking OK on the TV:
The Samsung presents three CSS problems, not recognising:
- custom properties
- logical properties
column-gapwhen used with flexbox
To get round these problems, you can do a few things:
Write a traditional CSS declaration then use a custom property
color: black; color: var(--dark);
The browser will adopt the traditional value (
black) then override it with the custom property value (
var(--dark)) only if it understands custom properties.
Declare traditional spacing and then use logical properties
This was a trickier one. The problem here is that logical properties don’t simply replace a traditional CSS declaration. For example, this will only work in left-to-right languages:
margin-right: 1.5rem; margin-block-end: 1.5rem;
In a right-to-left-language, the
block-end margin corresponds to
margin-left, so this would give you both left and right margins of
This solution works if your browser doesn’t understand both custom and logical properties:
--zero: 0; margin-right: 1.5rem margin-right: var(--zero); margin-block-end: 1.5rem;
In this CSS the browser:
- Applies a right margin of
- Applies a right margin of the custom property of
0) only if it recognises custom properties
- Applies a
1.5remonly if it recognises logical properties
Of course, we still have a problem if the browser does recognise custom properties but not logical properties.
Use a similar technique to add margins to inline list items
So your CSS could look like this:
/* Parent element CSS */ display: flex; column-gap: 1rem; /* Item CSS */ padding-right: 1.375rem; padding-right: var(--zero);
C’est compliqué and you might need to compromise
So the site now displays more or less correctly on my TV, but the solution isn’t entirely resilient. If a browser recognises custom properties but not logical properties you’ll still see a page with lots of collapsed margins between elements.
Other approaches might be to use the
@supports rule and/or write a separate, very basic stylesheet for browsers that don’t recognise, say, logical proprties, just like we did when we were supporting older versions of Internet Explorer.
Altrnatively, you could adopt a “defensive” approach to CSS and not use logical properties at all. I’d be really loath to do this as logical properties help your site render in other languages with minimum work.
Or you could just aim to provide good enough coverage for the weirder browsers. Of course, that raises the question what’s good enough? I dunno.