画像セットを使用して、JavaScript に依存せずにフォールバック背景画像を実装します。

Question

私はフロントエンドと CSS についてはかなり初心者です。 background-image を追加し、サポートされている場合は .avif ファイルをロードしようとしています。それ以外の場合は、.png ファイルに戻ります。 JavaScript を使用せず、ページ速度に影響を与えずにすべての画像をロードせずにこれを行うことが可能かどうか疑問に思っています。 (ほとんどの)エミュレータで Chrome 107.0.5304.110、ios 16.1 を実行しています (古いバージョンの ios は avif をサポートしていないことは知っていますが、最新のものはサポートしています。ぜひそうしたいです) ) と Firefox 106.0.1 の両方を同時に使用できます。

試行 1 前の回答に従います。 webkit-image-set の使用法に注意してください。これは私のコードです:

リーリー

これは Chrome と Firefox では機能しますが、iOS の Safari では灰色の画像が表示されます。

試行 2 このブログの回答に従ってください。ここでは image-set が使用されていることに注意してください。コード:

リーリー

これは 3 つのブラウザすべてで表示されますが、常に png が表示されます。画像セット内の位置を逆にしても、同じ結果が得られました。常に png です。

試行 3。試行 2 とは少し異なります。最初の行の形式を変更しただけです。

リーリー

これは Chrome/Firefox では正常に動作しますが、iOS では灰色になります。

この問題を解決する方法はありますか?ありがとう！

Answer 1

リーリー