Content-DPR

仕様がwhatwg/htmlに移管された 2019/3/11

This PR removes those hints from the IETF draft. This hints are being added to the HTML specification as part of a larger Client Hints related PR.

Conten-DPRの仕様自体に変更はなさそう

以下、HTTP Client Hintsに属していた頃の情報

HTTP Response Headerの1つ

HTTP Client Hintsというグループに属する

dpi awareなimg CustomElementをつくるを完全解決できると期待している daiiz.icon

Blinkではこの値を考慮して画像のNatiralSizeを決定していることを突き止めた

Blinkでの画像のNaturalSizeの導出過程を追う

https://httpwg.org/http-extensions/client-hints.html

Internet-Draft, Intended status: Experimental 2019/1/24

試験実装段階っぽいのでwatchしていきたい daiiz.icon

https://gyakky.herokuapp.com/svgyazo/94207dd2ff26d901835fc7702ccba1c9.svg https://httpwg.org/http-extensions/client-hints.html#iana-content-dpr

Status: standardになってるな

https://gyazo.com/f9481bc6bde770c205d7deea67275367 https://httpwg.org/http-extensions/client-hints.html#content-dpr

Use case

Delivering DPR-aware images

https://github.com/igrigorik/http-client-hints#use-cases

https://gyazo.com/71667b67a4ef86bcca470772e8ad9805

書きかた

https://gyakky.herokuapp.com/svgyazo/ba76e7cf154685b2bff6ebb1c3449702.svg

MDN

https://gyakky.herokuapp.com/svgyazo/6f2d04fcbae01e0343376bde4dec7ee3.svg https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#Content_negotiation

実験マーク付いてる "This is an experimental API that should not be used in production code." 2019/1

Can I use?

https://gyazo.com/185a6e6c63df9a33231bfa218a85fbb9 https://caniuse.com/#search=Content-DPR

Chrome, Operaだけが対応している 2019/1/26

つまりBlink以外に実装がない

https://www.chromestatus.com/feature/5504430086553600 2017/6

サポートの意向アリ

https://gyakky.herokuapp.com/svgyazo/11b8c37de4669e851b10b3ef0c88d740.svg

https://bugzilla.mozilla.org/show_bug.cgi?id=935216

メジャーブラウザが対応完了した暁にはdpi-aware-image不要になる daiiz.icon

Blinkでの実装の話

Native Client-Hints in Blink 2015/7

Client Hintsは、ServiceWorkerでも実装されている

動作未確認 daiiz.icon

試してみる

Client Hints: Content-DPR by daiiz · Pull Request #19 · daiiz/gyakky-js

できてしまった daiiz.icon*5

https://gyakky.herokuapp.com/gyazo/content-dpr/a196681066f27ea6e6247805c908839e#.png

こんな簡単な話だったのか...

当たり前だが、ModalImageでの拡大表示時も問題なし。

https://gyakky.herokuapp.com/gyazo/content-dpr/3221f9b7a16b056d80db62c04e4ddb66#.png

? ウェブブラウザに画像のDPRを伝えるためのHTTPヘッダー

? Content-DPRを付与して、画像を(DPI|DPR)-awareなサイズで描画する