In web development it’s useful when we can say “if the browser supports X, then we know it also supports Y”.
There was a small lightbulb moment at work earlier this year when we worked out that:
if the user’s browser supports CSS Grid, then you know you it also supports custom properties.
Knowing this means that if you wrap some CSS in an
@supports(display:grid) then you can also safely use custom properties within that block.
I love this rule of thumb! It saves you looking up caniuse.com for each feature and comparing the browser support.
This weekend I did some unplanned rabbit-holing on the current state of (and best practices for using) ES modules in the browser, as-is and untranspiled. That revealed another interesting rule of thumb:
any browser that supports
<script type="module">also supports
async/await, the spread operator, etc.
I might make a little page or microsite for these rules of thumb. They’re pretty handy!