Progressive enhancements

When we're writing CSS, we need to be aware of the browser support of the features we are using.

We also need to be aware of the impact of what happens if that feature doesn't work.

For example, as of the time of writing, @scope has decent, but not fantastic browser support.

It's a feature I'd love to use in production, but I could easily invalidate large blocks of CSS for a lot of people.

There are other features, however, that I'm happy to use, even if browser support is terrible.

One example is text-wrap: pretty, which prevents orphans in long text.

If that line of CSS is ignored by the browser, it doesn't prevent all the other styles from working.

It makes things look slightly better for those who have browsers that support it, but it's an enhancement, not a breaking change.

I bring this up because we're going to be using two features that have limited browser support (as of the time of writing), but that will have no negative impact for unsupported browsers, they just won't see our fancy animations 😊.