It has never been easier than now to use modern CSS features as an enhancement. When I use a CSS feature that is not fully supported in all major browsers, I tend to have a baseline that works with non-supporting browsers, and an enhanced version for modern browsers.

When a new CSS feature is supported in a specific browser, say Chrome, some replies on Twitter will be like “This isn’t supported in Edge or IE, I can’t use it”. In this article, I will explore some examples where I use CSS features without causing any harm to browsers that don’t support them.

Examples Of Tiny Enhancements

Intrinsic Sizing

In a recent client project, I designed a widget that can be added to the article body. It includes a link to another related article, and we needed to make it obvious and engaging.

The widget width should be equal to its content. We can solve this problem by using different methods:

• An inline-block element.
• Using intrinsic sizing with width: fit-content

I don’t like the inline-block solution that much since it doesn’t feel safe for me. What if another widget is there? They will be beside each other. The widget must be a standalone element.

For that reason, I lean towards using the intrinsic sizing solution.

#article #css