画像による Layout Shift が無くなる Web がやって来る - mizdra's blog

2020/05/31 306 users mizdra's blog web fetch 画像 img

はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (La... 続きを読む

img 要素に pointer-events:none; を指定すると、その画像を囲むリンクが効かなくなる件の回避方法 - Corredor

2018/05/17 13 users pointer-events None 経緯 回避方法 リンク

2017 - 03 - 31 img 要素に pointer-events:none; を指定すると、その画像を囲むリンクが効かなくなる件の回避方法 CSS3 CSS CodePen 経緯 画像をむやみに右クリックで保存されないようにするため、 img 要素に pointer-events:none; を指定した。 この CSS プロパティは、クリックや右クリックによるイベントを発火させなくするプ... 続きを読む

はてなフォトライフの画像を貼り付けるときに、フォトライフ記法でaltとtitleを指定できるようにしました（はてな記法モード、Markdownモード） - はてなブログ開発ブログ

2017/02/24 62 users Alt title Markdownモード NEWS 改善

2017 - 02 - 24 はてなフォトライフの画像を貼り付けるときに、フォトライフ記法でaltとtitleを指定できるようにしました（はてな記法モード、Markdownモード） 機能修正・改善 はてな記法 news はてなブログでは、はてなフォトライフに投稿した画像を表示するはてな記法 （fotolife記法） を拡張し、画像 （ img 要素） の title 属性と alt 属性を指定でき... 続きを読む

SVG のフォールバックは結局 Modernizr に落ち着いた件 | WWW WATCH

2015/02/26 51 users フォールバック jQuery Modernizr SVG 環境

タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替える... 続きを読む

アイコンの実装方法 · terkel.jp

2014/06/24 76 users images terkel ウェブページ CSS アイコン

ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとお... 続きを読む

HTML5 仕様 （WHATWG） に picture 要素が追加される | WWW WATCH

2014/06/18 44 users WHATWG srcset picture Source 属性

Simon Pieters 氏 （Opera Software） のツイート経由ですが、WHATWG 版の HTML5 仕様に、picture 要素が追加されたそうです。 picture 要素は、所謂レスポンシブ・イメージ （Responsive images） を実現するための要素で、picture 要素内に内包された img 要素と source 要素に srcset 属性、media 属性、... 続きを読む

HTML5: img 要素の alt 属性 の仕様 | attosoft.info Blog

2011/11/14 182 users Alt XHTML 置換 省略 属性

概要 alt 属性に指定する代替テキスト 空文字列の代替テキスト alt 属性の省略 関連リンク 概要 HTML5 では img 要素の alt 属性の仕様が大幅に変更され、HTML4/XHTML と比較すると定義がかなり詳細化されている。 HTML5 における alt 属性 の仕様を概略すると次のようになる。 alt 属性には画像を置換可能な詳細な代替テキストを指定する HTML4/XHTML ... 続きを読む