PROWAREtech

articles » current » css » feature-queries

CSS: Feature Queries

Use @supports to know which CSS features are supported.

This article is about using a relatively new feature of CSS called Feature Queries.

Feature queries are a way to check if a browser supports a CSS property and value. If it does then everything in the @supports block will be applied.

One newer CSS property is background-clip which is not supported by Internet Explorer 11. In this example, IE will cause problems. It may look OK in Edge or Chrome, but in IE the text is made transparent and only the background is left visible without an any clipping of the background.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		/* THIS DOES NOT WORK IN IE 11 */
		h1 {
			display: inline-block;
			background-image: url(https://picsum.photos/id/1057/1000/200);
			background-size: cover;
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
		}
	</style>
</head>
<body>
	<h1>HELP!</h1>
</body>
</html>

The remedy is a simple one: @supports. IE will still not display the text's background with an image, but at least the text can be seen.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		/* THIS WORKS IN ALL BROWSERS THOUGH THE RESULTS VARY */
		@supports (background-clip: text) or (-webkit-background-clip: text) {
			h1 {
				display: inline-block;
				background-image: url(https://picsum.photos/id/1057/1000/200);
				background-size: cover;
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}
		}
	</style>
</head>
<body>
	<h1>HELP!</h1>
</body>
</html>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE