PROWAREtech
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>
Comment
