Поддержка вложенности CSS и откат для IE11
Как мне получить webp в Firefox и jpg в Safari ~ 13 и Internet Explorer 11?
Это вообще возможно?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>supprts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#island
{
background-repeat: no-repeat;
}
@supports not (background-image: url("https://anjanesh.s3.amazonaws.com/island.avif"))
{
@supports not (background-image: url("https://anjanesh.s3.amazonaws.com/island.webp"))
{
#island
{
background-image: url("https://anjanesh.s3.amazonaws.com/island.jpg")
}
}
@supports (background-image: url("https://anjanesh.s3.amazonaws.com/island.webp"))
{
#island
{
background-image: url("https://anjanesh.s3.amazonaws.com/island.webp")
}
}
}
@supports (background-image: url("https://anjanesh.s3.amazonaws.com/island.avif"))
{
#island
{
background-image: url("https://anjanesh.s3.amazonaws.com/island.avif")
}
}
</style>
</head>
<body>
<h2>CSS supports</h2>
<div id="island" style="width:100%;height:582px">Island</div>
</body>
</html>