【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
Firefoxの開発ツールでprefers-color-schemeをテストする方法
CSSでウェブサイトをダークモードできる@mediaのprefers-color-schemeを、Firefoxでテストする方法がありました。まだ、実験的な機能でUIが微妙ですしabout: configで設定をする必要がありますが、一応、シミュレーションできました。 ちなみに、以下のような記述でダークモードのスタイルを設定できるやつです。 @media (prefers-color-scheme: dark){ body { background: #333; color: #fff; } } 実装が途中の段階で変わってしまうかもしれませんが、現段階での設定方法は以下の通りです。 1. 「高度な設定」で機能を有効にする アドレスバーにabout:configと入力してcolor-schemeを検索します。devtools.inspector.color-scheme-simulation
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
