Closed RoelN closed 1 week ago
Ah. You're right. I thought they would build upon each other, not overwrite each other. How annoying. Don't really want to go down the route of CSS custom properties for this too. Maybe just make it clear that one utility would overwrite the other if used together?
Because the same will apply to other font-variant-*
properties.
An alternative could be to account for all combinations...
.tnum { font-variant-numeric: tabular-nums; }
.zero { font-variant-numeric: slashed-zero; }
.tnum.zero { font-variant-numeric: tabular-nums slashed-zero; }
or maybe. seeing as I'm using classes anyway, I can set up custom properties for the possible values within each font-variant-*
property.
Or... remove the utilities altogether as they are not necessarily in the spirit of applying middle opinionated typographic styles...?
I suppose anyone using it could just remove them if they see fit.
Couldn't get the custom properties route to work fully for some reason. However I have kept the utilities there and just added some combination classes per Roel's suggestion.
Currently the following wouldn't work:
As the latter would overwrite the former: