ダークモードでHTML画像のURLを変更する方法

CSSを使用すると、システムがダークモードの場合、変更を適用するのは非常に簡単です。prefers-color-schemeメディア機能。

の私のブログ投稿を確認してくださいダークモードあなたがそれについてもっと学びたいなら。

今日、私は問題に遭遇しました-CSSルールではなくHTMLで定義された画像を変更する方法は?

CSSやJavaScriptを使用せずに、それを行うための単純なHTMLの方法があることがわかりました。

使用できますpictureをラップするタグimg鬼ごっこ:

<picture>
  <source 
    srcset="dark.png" 
    media="(prefers-color-scheme: dark)">
  <img src="light.png">
</picture>

ダークモードがサポートされ、有効になっている場合、dark.png画像はのソースとして使用されますimg鬼ごっこ。

タグは非常によくサポートされており、タグを実装していない、またはダークモードを実装していない古いブラウザは、light.png画像。

いずれの場合も、ブラウザは2つの画像をダウンロードしないことに注意してください。ダークモードの場合、この例では、dark.png画像、およびライトモードの場合はダウンロードのみlight.png、したがって帯域幅の無駄はありません。

私の無料ダウンロードHTMLハンドブック


その他のhtmlチュートリアル: