Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update device client hint information #6097

Merged
merged 15 commits into from
Jun 25, 2021
Merged

Update device client hint information #6097

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
822f059
Update DPR header with more information
hamishwillee Jun 18, 2021
dac2b52
Remove spec table, add note about removal:
hamishwillee Jun 21, 2021
6782563
Add better see also cross links
hamishwillee Jun 21, 2021
0af161c
Fix typo
hamishwillee Jun 21, 2021
cc9cae4
Add link to Content-DPR
hamishwillee Jun 21, 2021
8346c59
Improve wording
hamishwillee Jun 21, 2021
0071f6c
Improve linking
hamishwillee Jun 21, 2021
d41b4e1
Add Content-DPR, Viewport-Width, Width
hamishwillee Jun 21, 2021
3a7f3fe
Minor consistency changes to all device headers + parent doc
hamishwillee Jun 22, 2021
8bc5984
Update files/en-us/web/http/headers/content-dpr/index.html
hamishwillee Jun 25, 2021
018ac41
Update files/en-us/web/http/headers/device-memory/index.html
hamishwillee Jun 25, 2021
3580d71
Update files/en-us/web/http/headers/index.html
hamishwillee Jun 25, 2021
c4e0263
Update files/en-us/web/http/headers/index.html
hamishwillee Jun 25, 2021
844571f
Update files/en-us/web/http/headers/width/index.html
hamishwillee Jun 25, 2021
5eca3e5
Content-DPR exmaple and cross linking. Device memory fix
hamishwillee Jun 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions files/en-us/web/http/headers/content-dpr/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
title: Content-DPR
slug: Web/HTTP/Headers/Content-DPR
tags:
- Content-DPR
- Client hints
- HTTP
- HTTP Header
- Response header
- Deprecated
- Non-standard
- Exerimental
browser-compat: http.headers.Content-DPR
---
<div>{{HTTPSidebar}} {{deprecated_header}}{{securecontext_header}}</div>

<p>The <strong><code>Content-DPR</code></strong> response header is used to confirm the <em>image</em> device to pixel ratio in requests where the screen {{HTTPHeader("DPR")}} <a href="/en-US/docs/Glossary/Client_hints">client hint</a> was used to select an image resource.</p>


<table class="properties">
<tbody>
<tr>
<th scope="row">Header type</th>
<td>{{Glossary("Response header")}}, {{Glossary("Client hints","Client hint")}}</td>
</tr>
<tr>
<th scope="row">{{Glossary("Forbidden header name")}}</th>
<td>no</td>
</tr>
<tr>
<th scope="row">{{Glossary("CORS-safelisted response header")}}</th>
<td>no</td>
</tr>
</tbody>
</table>

<p>If the {{HTTPHeader("DPR")}} client hint is used to select an image the server must specify <code>Content-DPR</code> in the response. If the value in <code>Content-DPR</code> is different from the {{HTTPHeader("DPR")}} value in the request (i.e. image DPR is not the same as screen DPR) then the client must use the <code>Content-DPR</code> for determining intrinsic image size and scaling the image.</p>

<p>If the <code>Content-DPR</code> header appears more than once in a message the last occurrence is used.</p>

<div class="notecard note">
<p><strong>Note:</strong></p>
<ul>
<li><code>Content-DPR</code> was removed from the client hints specification in <a href="https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-client-hints-07">draft-ietf-httpbis-client-hints-07</a>. The <a href="https://wicg.github.io/responsive-image-client-hints">Responsive Image Client Hints</a> spec proposes to replace this header by specifying intrinsic resolution/dimensions in EXIF metadata.</li>
Elchi3 marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: http">Content-DPR: &lt;number&gt;</pre>

<h2 id="Directives">Directives</h2>

<dl>
<dt><code> &lt;number&gt;</code></dt>
<dd>The image device pixel ratio, calculated according to the following formula:
<pre>Content-DPR = [Selected image resource size] / ([Width] / [DPR])</pre>
hamishwillee marked this conversation as resolved.
Show resolved Hide resolved
</dd>
</dl>

hamishwillee marked this conversation as resolved.
Show resolved Hide resolved

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
<li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints">Adapting to Users with Client Hints</a> (developer.google.com)</li>
<li>Device client hints
<ul>
<li>{{HTTPHeader("Device-Memory")}}</li>
<li>{{HTTPHeader("DPR")}}</li>
<li>{{HTTPHeader("Viewport-Width")}}</li>
<li>{{HTTPHeader("Width")}}</li>
</ul>
</li>
<li>{{HTTPHeader("Accept-CH")}}</li>
<li><a href="/en-US/docs/Web/HTTP/Caching#varying_responses">HTTP Caching > Varying responses</a> and {{HTTPHeader("Vary")}}</li>
</ul>
48 changes: 31 additions & 17 deletions files/en-us/web/http/headers/device-memory/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
- Experimental
browser-compat: http.headers.Device-Memory
---
<div>{{HTTPSidebar}} {{SeeCompatTable}}</div>
<div>{{HTTPSidebar}} {{SeeCompatTable}} {{securecontext_header}}</div>

<p>The <strong><code>Device-Memory</code></strong> header is a <a href="/en-US/docs/Web/API/Device_Memory_API">Device Memory API</a> header that works like <a href="/en-US/docs/Glossary/Client_hints">Client Hints</a> header which represents the approximate amount of RAM client device has.</p>
<p>The <strong><code>Device-Memory</code></strong> {{Glossary("Client hints","device client hint")}} request header field indicates the approximate amount of available RAM on the client device. The header is part of the <a href="/en-US/docs/Web/API/Device_Memory_API">Device Memory API</a>.</p>

<table class="properties">
<tbody>
Expand All @@ -25,31 +25,37 @@
<th scope="row">{{Glossary("Forbidden header name")}}</th>
<td>no</td>
</tr>
<tr>
<th scope="row">{{Glossary("CORS-safelisted response header")}}</th>
<td>no</td>
</tr>
</tbody>
</table>

<div>{{securecontext_header}}</div>
<p>The amount of device RAM can be used as a fingerprinting variable, so values for the header are intentionally coarse to reduce the potential for its misuse.</p>
hamishwillee marked this conversation as resolved.
Show resolved Hide resolved

<div class="notecard note">
<p><strong>Note:</strong> Client Hints are accessible only on secure origins (via TLS). Server has to opt in to receive <code>Device-Memory</code> header from the client by sending {{HTTPHeader("Accept-CH")}} and {{HTTPHeader("Accept-CH-Lifetime")}} response headers.</p>
<p><strong>Note:</strong></p>
<ul>
<li>Client Hints are accessible only on secure origins (via TLS).</li>
<li>A server has to opt in to receive the <code>Device-Memory</code> header from the client, by sending the {{HTTPHeader("Accept-CH")}} response header.</li>
<li>Servers that opt in to the <code>Device-Memory</code> client hint will typically also specify it in the {{HTTPHeader("Vary")}} header. This informs caches that the server may send different responses based on the header value in a request.</li>
</ul>
</div>

<h2 id="Syntax">Syntax</h2>

<p>The amount of device RAM can be used as a fingerprinting variable, so values for the header are intentionally coarse to reduce the potential for its misuse. The header takes on the following values: <code>0.25</code>, <code>0.5</code>, <code>1</code>, <code>2</code>, <code>4</code>, <code>8</code>.</p>

<pre class="brush: http">Device-Memory: &lt;number&gt;</pre>

<h2 id="Directives">Directives</h2>

<dl>
<dt><code> &lt;number&gt;</code></dt>
<dd>The approximate amount of device RAM. Possible values are: <code>0.25</code>, <code>0.5</code>, <code>1</code>, <code>2</code>, <code>4</code>, <code>8</code>.</dd>
</dl>


<h2 id="Examples">Examples</h2>

<p>Server first needs to opt in to receive <code>Device-Memory</code> header by sending the response headers {{HTTPHeader("Accept-CH")}} containing <code>Device-Memory</code> and {{HTTPHeader("Accept-CH-Lifetime")}}.</p>
<p>Server first needs to opt in to receive <code>Device-Memory</code> header by sending the response headers {{HTTPHeader("Accept-CH")}} containing <code>Device-Memory</code>.</p>
hamishwillee marked this conversation as resolved.
Show resolved Hide resolved

<pre class="brush: http">Accept-CH: Device-Memory
Accept-CH-Lifetime: 86400
</pre>

<p>Then on subsequent requests the client might send <code>Device-Memory</code> header back:</p>
Expand All @@ -67,9 +73,17 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
<h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/API/Device_Memory_API">Device Memory API</a></li>
<li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints">Adapting to Users with Client Hints</a> (developer.google.com)</li>
<li><a href="/en-US/docs/Web/API/Device_Memory_API">Device Memory API</a></li>
<li>{{DOMxRef("Navigator.deviceMemory")}}</li>
<li>Device client hints
<ul>
<li>{{HTTPHeader("Content-DPR")}}</li>
<li>{{HTTPHeader("DPR")}}</li>
<li>{{HTTPHeader("Viewport-Width")}}</li>
<li>{{HTTPHeader("Width")}}</li>
</ul>
</li>
<li>{{HTTPHeader("Accept-CH")}}</li>
<li>{{HTTPHeader("Accept-CH-Lifetime")}}</li>
<li>{{HTTPHeader("Vary")}}</li>
<li>{{DOMxRef("Navigator.deviceMemory")}}</li>
</ul>
<li><a href="/en-US/docs/Web/HTTP/Caching#varying_responses">HTTP Caching > Varying responses</a> and {{HTTPHeader("Vary")}}</li>
</ul>
54 changes: 37 additions & 17 deletions files/en-us/web/http/headers/dpr/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
---
<div>{{HTTPSidebar}} {{deprecated_header}}{{securecontext_header}}</div>

<p>The <strong><code>DPR</code></strong> header is a <a href="/en-US/docs/Glossary/Client_hints">Client Hints</a> header which represents the client device pixel ratio, which is the number of physical device pixels corresponding to every CSS pixel.</p>
<p>The <strong><code>DPR</code></strong> <a href="/en-US/docs/Glossary/Client_hints">device client hint</a> request header provides the client device pixel ratio. This ratio is the number of physical device pixels corresponding to every {{Glossary("CSS pixel")}}.</p>

<table class="properties">
<tbody>
Expand All @@ -26,45 +26,65 @@
<th scope="row">{{Glossary("Forbidden header name")}}</th>
<td>no</td>
</tr>
<tr>
<th scope="row">{{Glossary("CORS-safelisted response header")}}</th>
<td>no</td>
</tr>
</tbody>
</table>

<p>The hint is useful when selecting image sources that best correspond to a screen's pixel density. This is similar to the role played by <code>x</code> descriptors in the <code>&lt;img&gt;</code> <a href="/en-US/docs/Web/HTML/Element/img#attr-srcset"><code>srcset</code></a> attribute to allow user agents to select a preferred image.</p>

<p>If a server uses the <code>DPR</code> hint to choose which resource is sent in a response, the response must include the {{HTTPHeader("Content-DPR")}} header. The client must use the value in <code>Content-DPR</code> for layout if it differs from the value in the request's <code>DPR</code> header.</p>

<p>If the <code>DPR</code> header appears more than once in a message the last occurrence is used.</p>

<div class="notecard note">
<p><strong>Note:</strong> Client Hints are accessible only on secure origins (via TLS). Server has to opt in to receive <code>DPR</code> header from the client by sending {{HTTPHeader("Accept-CH")}} and {{HTTPHeader("Accept-CH-Lifetime")}} response headers.</p>
<p><strong>Note:</strong></p>
<ul>
<li>Client Hints are accessible only on secure origins (via TLS).</li>
<li>A server has to opt in to receive the <code>DPR</code> header from the client, by sending the {{HTTPHeader("Accept-CH")}} response header.</li>
<li>Servers that opt in to the <code>DPR</code> client hint will typically also specify it in the {{HTTPHeader("Vary")}} header. This informs caches that the server may send different responses based on the header value in a request.</li>
<li><code>DPR</code> was removed from the client hints specification in <a href="https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-client-hints-07">draft-ietf-httpbis-client-hints-07</a>. The proposed replacement is <a href="https://wicg.github.io/responsive-image-client-hints/#sec-ch-dpr"><code>Sec-CH-DPR</code></a> (Responsive Image Client Hints).</li>
</ul>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: http">DPR: &lt;number&gt;</pre>

<h2 id="Examples">Examples</h2>
<h2 id="Directives">Directives</h2>

<p>Server first needs to opt in to receive <code>DPR</code> header by sending the response headers {{HTTPHeader("Accept-CH")}} containing <code>DPR</code> and {{HTTPHeader("Accept-CH-Lifetime")}}.</p>
<dl>
<dt><code> &lt;number&gt;</code></dt>
<dd>The client device pixel ratio.</dd>
</dl>

<pre class="brush: http">Accept-CH: DPR
Accept-CH-Lifetime: 86400
</pre>
<h2 id="Examples">Examples</h2>
hamishwillee marked this conversation as resolved.
Show resolved Hide resolved

<p>Then on subsequent requests the client might send <code>DPR</code> header back:</p>
<p>A server must first opt in to receive the <code>DPR</code> header by sending the response header {{HTTPHeader("Accept-CH")}} containing the directive <code>DPR</code>.</p>

<pre class="brush: http">DPR: 1.0</pre>
<pre class="brush: http">Accept-CH: DPR</pre>

<h2 id="Specifications">Specifications</h2>
<p>Then on subsequent requests the client might send <code>DPR</code> header back:</p>

<p>{{Specifications}}</p>
<pre class="brush: http">DPR: 2.0</pre>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat}}</p>


<h2 id="See_also">See also</h2>

<ul>
<li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints">Adapting to Users with Client Hints</a> (developer.google.com)</li>
<li>Device client hints
<ul>
<li>{{HTTPHeader("Content-DPR")}}</li>
<li>{{HTTPHeader("Device-Memory")}}</li>
<li>{{HTTPHeader("Viewport-Width")}}</li>
<li>{{HTTPHeader("Width")}}</li>
</ul>
</li>
<li>{{HTTPHeader("Accept-CH")}}</li>
<li>{{HTTPHeader("Accept-CH-Lifetime")}}</li>
<li>{{HTTPHeader("Vary")}}</li>
<li><a href="/en-US/docs/Web/HTTP/Caching#varying_responses">HTTP Caching > Varying responses</a> and {{HTTPHeader("Vary")}}</li>
</ul>


16 changes: 9 additions & 7 deletions files/en-us/web/http/headers/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,16 @@ <h2 id="Client_hints">Client hints</h2>
<h3 id="device_client_hints">Device client hints</h3>

<dl>
<dt>{{HTTPHeader("Device-Memory")}} {{experimental_inline}}</dt>
<dd>Approximate amount of available client RAM memory. Technically a part of <a href="/en-US/docs/Web/API/Device_Memory_API">Device Memory API</a>.</dd>
<dt>{{HTTPHeader("DPR")}} {{deprecated_inline}}</dt>
<dt>{{HTTPHeader("Content-DPR")}} {{deprecated_inline}}{{experimental_inline}}</dt>
<dd>Response header used to confirm the image device to pixel ratio in requests where{{HTTPHeader("DPR")}} was used to select an image resource.</dd>
hamishwillee marked this conversation as resolved.
Show resolved Hide resolved
<dt>{{HTTPHeader("Device-Memory")}} {{deprecated_inline}}{{experimental_inline}}</dt>
<dd>Approximate amount of available client RAM memory. This is part of <a href="/en-US/docs/Web/API/Device_Memory_API">Device Memory API</a>.</dd>
hamishwillee marked this conversation as resolved.
Show resolved Hide resolved
<dt>{{HTTPHeader("DPR")}} {{deprecated_inline}}{{experimental_inline}}</dt>
<dd>Client device pixel ratio (DPR), which is the number of physical device pixels corresponding to every CSS pixel.</dd>
<dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt>
<dd>A number that indicates the layout viewport width in CSS pixels. The provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value). If <code>Viewport-Width</code> occurs in a message more than once, the last value overrides all previous occurrences.</dd>
<dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt>
<dd>The <code>Width</code> request header field is a number that indicates the desired resource width in physical pixels (i.e. intrinsic size of an image). The provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value). The <code>Width</code> header field can be omitted if the desired resource width is not known at the time of the request or the resource does not have a display width. If <code>Width</code> occurs in a message more than once, the last value overrides all previous occurrences.</dd>
<dt>{{HTTPHeader("Viewport-Width")}} {{deprecated_inline}}{{experimental_inline}}</dt>
<dd>A number that indicates the layout viewport width in CSS pixels. The provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value).</dd>
<dt>{{HTTPHeader("Width")}} {{deprecated_inline}}{{experimental_inline}}</dt>
<dd>The <code>Width</code> request header field is a number that indicates the desired resource width in physical pixels (i.e. intrinsic size of an image).</dd>
</dl>


Expand Down
85 changes: 85 additions & 0 deletions files/en-us/web/http/headers/viewport-width/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
---
title: Viewport-Width
slug: Web/HTTP/Headers/Viewport-Width
tags:
- Viewport-Width
- Client hints
- HTTP
- HTTP Header
- Request header
- Deprecated
- Non-standard
- Exerimental
browser-compat: http.headers.Viewport-Width
---
<div>{{HTTPSidebar}} {{deprecated_header}}{{securecontext_header}}</div>

<p>The <strong><code>Viewport-Width</code></strong> <a href="/en-US/docs/Glossary/Client_hints">device client hint</a> request header provides the client's layout viewport width in {{Glossary("CSS pixel","CSS pixels")}}. The value is rounded up to the smallest following integer (i.e. ceiling value).</p>

<table class="properties">
<tbody>
<tr>
<th scope="row">Header type</th>
<td>{{Glossary("Request header")}}, {{Glossary("Client hints","Client hint")}}</td>
</tr>
<tr>
<th scope="row">{{Glossary("Forbidden header name")}}</th>
<td>no</td>
</tr>
</tbody>
</table>

<p>The hint can be used with other screen-specific hints to deliver images optimized for a specific screen size, or to omit resources that are not needed for a particular screen width.</p>

<p>If the <code>Viewport-Width</code> header appears more than once in a message the last occurrence is used.</p>

<div class="notecard note">
<p><strong>Note:</strong></p>
<ul>
<li>Client Hints are accessible only on secure origins (via TLS).</li>
<li>A server has to opt in to receive the <code>Viewport-Width</code> header from the client, by sending the {{HTTPHeader("Accept-CH")}} response header.</li>
<li>Servers that opt in to the <code>Viewport-Width</code> client hint will typically also specify it in the {{HTTPHeader("Vary")}} header. This informs caches that the server may send different responses based on the header value in a request.</li>
<li><code>Viewport-Width</code> was removed from the original client hints specification in <a href="https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-client-hints-07">draft-ietf-httpbis-client-hints-07</a>. The proposed replacement is <a href="https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-width"><code>Sec-CH-Viewport-Width</code></a> (Responsive Image Client Hints).</li>
</ul>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: http">Viewport-Width: &lt;number&gt;</pre>

<h2 id="Directives">Directives</h2>

<dl>
<dt><code> &lt;number&gt;</code></dt>
<dd>The width of the user's viewport in {{Glossary("CSS pixel","CSS pixels")}}, rounded up to the nearest integer.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>A server must first opt in to receive the <code>Viewport-Width</code> header by sending the response header {{HTTPHeader("Accept-CH")}} containing the directive <code>Viewport-Width</code>.</p>

<pre class="brush: http">Accept-CH: Viewport-Width</pre>

<p>Then on subsequent requests the client might send <code>Viewport-Width</code> header back:</p>

<pre class="brush: http">Viewport-Width: 320</pre>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
<li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints">Adapting to Users with Client Hints</a> (developer.google.com)</li>
<li>Device client hints
<ul>
<li>{{HTTPHeader("Content-DPR")}}</li>
<li>{{HTTPHeader("Device-Memory")}}</li>
<li>{{HTTPHeader("DPR")}}</li>
<li>{{HTTPHeader("Width")}}</li>
</ul>
</li>
<li>{{HTTPHeader("Accept-CH")}}</li>
<li><a href="/en-US/docs/Web/HTTP/Caching#varying_responses">HTTP Caching > Varying responses</a> and {{HTTPHeader("Vary")}}</li>
</ul>
Loading