CSS has changed a lot in the last couple of years. It feels like we're getting new features monthly now. New features are well and all, but it's hard to keep up with what's fully supported or safe to use.
Enter progressive enhancements: code features and syntax that provides you with safe fallbacks in case your users visits your website in a browser that lacks support.
Here are a few simple CSS properties and techniques that are safe to use; enhancing the experience for some users, but provides satisfying fallbacks for others.
Better text with text-wrap: pretty and text-wrap: balance
Not all browsers support the text-wrap values balance and pretty, but they are safe to use.
If you're not familiar with these values they are ways to "fix" your text to look (you've guessed it) prettier or more balanced.
pretty fixes the problem with "orphan" words, when the last word of a paragraph of text wraps to a new line, leaving it all alone at the bottom. pretty ensures that the last word gets accompanied by another, which is great for headings (NOTE: Don't use it for larger portions of body text, as it uses a slower algorithm to calculate the best outcome).
MDN documentation for text-wrap: pretty
balance adjusts your paragraphs so that the text is wrapped in a way that balances the number of characters on each line, enhancing layout quality and legibility. It's useful for paragraphs of a certain length, e.g. leading text or some marketing copy inside a banner. (NOTE: Do not use this on all
tags in your body text. The calculating of the perfect balance based on the number of characters is computationally expensive, so the browsers have a cap on this feature based on lines of text: six or less for Chromium, and ten or less for Firefox)
MDN documentation for text-wrap: balance
Demo
The fallback
The only thing that happens if the browser doesn't support these features is that the text will have orphans or might not be as balanced as you'd prefer. And that's OK; we've lived with this for 30 years of web browsing, so it's not harming the experience of users with not-supported browsers.
Auto-growing form fields with field-sizing: content
Ever been frustrated that