When feature queries fail

December 26, 2023

I love feature queries. They give Web developers the ability to test to see if a browser supports a certain feature. I started making use of them when the CSS Grid layout was implemented. I would use them to remove fallbacks that I used in my CSS for less capable browsers and then write my code for using Grid layout.

I also have used them with container queries and other features as they have been implemented in the browser. Feature queries give us the power to create fallbacks and practice progressive enhancement. It is a much better solution than previous attempts. I remember using Modernizr back in the day to test feature support. But that required a third-party script. The feature query solution is much better and integrated into CSS.

But as great as feature queries are, they do have their own personal Kryptonite. I have come across a couple of instances where feature queries were not able to test for browser support. Michelle Barker documented one of these instances this past week. She brought to our attention that we could not test for browser support using align-content on children of a block element. This is a new feature that has already been available to us with child elements on a Flex or Grid container.

The second instance where I encountered the same problem was when I wanted to test for gap support on the children in a Flex container. Michelle briefly mentioned this one in her post.

In both instances, the properties that could not be tested for browser support had already existed with other implementations. Align-content already exists with Flexbox and Grid. The gap property already existed with the Grid layout. So the feature queries would fail because they could pass the conditional test that the property is supported but it is a false positive because the feature is supported in one place and not in another.

I agree with Michelle that it would be nice to see some improvements made in feature queries in the future to address these instances where a property already existed in another place and then is implemented in a new place. I am sure that it is a tricky problem to solve as we want to ensure backward compatibility. But I think we are going to need some improvement in the future because I believe we are going to encounter more instances of this in the future when an already implemented feature gets added to another use case to help evolve the language.

Additional resources

This post is part of my attempt to post something every day for a month. I was inspired by Michelle Barker, who recently participated in National Blog Posting Month.

Comment on this post