diff --git a/files/en-us/web/http/guides/content_negotiation/index.md b/files/en-us/web/http/guides/content_negotiation/index.md index f488a8550e7601d..f2f2198d6e2d125 100644 --- a/files/en-us/web/http/guides/content_negotiation/index.md +++ b/files/en-us/web/http/guides/content_negotiation/index.md @@ -50,13 +50,13 @@ The `Accept` header is defined by the browser, or any other user agent, and can > [!NOTE] > This is part of an **experimental** technology called _Client Hints_. Initial support comes in Chrome 46 or later. The Device-Memory value is in Chrome 61 or later. -The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that the server can use to select an appropriate response. Valid values are: +The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that the server can use to select an appropriate response. Example valid values include: -| Value | Meaning | -| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `Device-Memory` | Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as `0.5`. | -| `Viewport-Width` | Indicates the layout viewport width in CSS pixels. | -| `Width` | Indicates the resource width in physical pixels (in other words the intrinsic size of an image). | +| Value | Meaning | +| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `Sec-CH-Device-Memory` | Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as `0.5`. | +| `Sec-CH-Viewport-Width` | Indicates the layout viewport width in CSS pixels. | +| `Sec-CH-Width` | Indicates the resource width in physical pixels (in other words the intrinsic size of an image). | ### The `Accept-Encoding` header diff --git a/files/en-us/web/http/reference/headers/accept-ch/index.md b/files/en-us/web/http/reference/headers/accept-ch/index.md index 1a21178d5be9aa3..a9384371c0c2a03 100644 --- a/files/en-us/web/http/reference/headers/accept-ch/index.md +++ b/files/en-us/web/http/reference/headers/accept-ch/index.md @@ -40,12 +40,12 @@ Accept-CH: , ### Client hint response headers -The following response headers indicate that the server accepts `Viewport-Width` and `Width` [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) in subsequent requests. +The following response headers indicate that the server accepts `Sec-CH-Viewport-Width` and `Sec-CH-Width` [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) in subsequent requests. The {{HTTPHeader("Vary")}} header indicates which values were used to [vary the response](/en-US/docs/Web/HTTP/Guides/Client_hints#caching_and_client_hints) based on the accepted client hints. ```http -Accept-CH: Viewport-Width, Width -Vary: Viewport-Width, Width +Accept-CH: Sec-CH-Viewport-Width, Sec-CH-Width +Vary: Sec-CH-Viewport-Width, Sec-CH-Width ``` ## Specifications diff --git a/files/en-us/web/http/reference/headers/content-dpr/index.md b/files/en-us/web/http/reference/headers/content-dpr/index.md index e864d59d13a3565..3c00f955550f0a0 100644 --- a/files/en-us/web/http/reference/headers/content-dpr/index.md +++ b/files/en-us/web/http/reference/headers/content-dpr/index.md @@ -67,7 +67,7 @@ See the [`DPR`](/en-US/docs/Web/HTTP/Reference/Headers/DPR#examples) header exam ## See also -- Device client hints +- Device and responsive image client hints - {{HTTPHeader("Sec-CH-Device-Memory")}} - {{HTTPHeader("Sec-CH-DPR")}} - {{HTTPHeader("Sec-CH-Viewport-Height")}} diff --git a/files/en-us/web/http/reference/headers/device-memory/index.md b/files/en-us/web/http/reference/headers/device-memory/index.md index d89d0806a00b01d..699dc61ecdf9a8b 100644 --- a/files/en-us/web/http/reference/headers/device-memory/index.md +++ b/files/en-us/web/http/reference/headers/device-memory/index.md @@ -13,7 +13,7 @@ sidebar: http {{Deprecated_Header}}{{SecureContext_Header}}{{Non-standard_Header}} > [!WARNING] -> The `Device-Memory` header was renamed to {{HTTPHeader("Sec-CH-Device-Memory")}} and the new name is now preferred. +> The `Device-Memory` header was standardized as {{HTTPHeader("Sec-CH-Device-Memory")}} and the new name is now preferred. The HTTP **`Device-Memory`** {{Glossary("request header")}} is used in [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) to indicate the approximate amount of available RAM on the client device, in gigabytes. The header is part of the {{DOMxRef("Device Memory API", "Device Memory API", "", "nocode")}}. @@ -78,11 +78,12 @@ Device-Memory: 1 - {{DOMxRef("Device Memory API", "Device Memory API", "", "nocode")}} - {{DOMxRef("Navigator.deviceMemory")}} - {{DOMxRef("WorkerNavigator.deviceMemory")}} -- Device client hints +- Device and responsive image client hints - {{HTTPHeader("Sec-CH-Device-Memory")}} - {{HTTPHeader("Sec-CH-DPR")}} - {{HTTPHeader("Sec-CH-Viewport-Height")}} - {{HTTPHeader("Sec-CH-Viewport-Width")}} + - {{HTTPHeader("Sec-CH-Width")}} - {{HTTPHeader("DPR")}} {{deprecated_inline}} - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}} - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} diff --git a/files/en-us/web/http/reference/headers/dpr/index.md b/files/en-us/web/http/reference/headers/dpr/index.md index 386e36b67a70527..6ec6cb68bd58a0c 100644 --- a/files/en-us/web/http/reference/headers/dpr/index.md +++ b/files/en-us/web/http/reference/headers/dpr/index.md @@ -13,7 +13,7 @@ sidebar: http {{Deprecated_Header}}{{SecureContext_Header}}{{Non-standard_Header}} > [!WARNING] -> The `DPR` header was renamed to {{HTTPHeader("Sec-CH-DPR")}} and the new name is now preferred. +> The `DPR` header was standardized as {{HTTPHeader("Sec-CH-DPR")}} and the new name is now preferred. The HTTP **`DPR`** {{Glossary("request header")}} provides [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints) about the client device pixel ratio (DPR). This ratio is the number of physical device pixels corresponding to every {{Glossary("CSS pixel")}}. @@ -81,11 +81,12 @@ Content-DPR: 2.0 ## See also -- Device client hints +- Device and responsive image client hints - {{HTTPHeader("Sec-CH-DPR")}} - {{HTTPHeader("Sec-CH-Device-Memory")}} - {{HTTPHeader("Sec-CH-Viewport-Height")}} - {{HTTPHeader("Sec-CH-Viewport-Width")}} + - {{HTTPHeader("Sec-CH-Width")}} - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}} - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} diff --git a/files/en-us/web/http/reference/headers/index.md b/files/en-us/web/http/reference/headers/index.md index 5d43b5467f1c887..d40e29c7c96757b 100644 --- a/files/en-us/web/http/reference/headers/index.md +++ b/files/en-us/web/http/reference/headers/index.md @@ -419,7 +419,7 @@ The [UA client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#user_agent_client > [!NOTE] > User-agent client hints are not available inside [fenced frames](/en-US/docs/Web/API/Fenced_frame_API) because they rely on [permissions policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy) delegation, which could be used to leak data. -#### Device client hints +#### Device and responsive image client hints - {{HTTPHeader("Sec-CH-Device-Memory")}} {{experimental_inline}} - : Approximate amount of available client RAM memory. This is part of the [Device Memory API](/en-US/docs/Web/API/Device_Memory_API). @@ -429,17 +429,19 @@ The [UA client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#user_agent_client - : Request header provides the client's layout viewport height in {{Glossary("CSS pixel","CSS pixels")}}. - {{HTTPHeader("Sec-CH-Viewport-Width")}} {{experimental_inline}} - : Request header provides the client's layout viewport width in {{Glossary("CSS pixel","CSS pixels")}}. +- {{HTTPHeader("Sec-CH-Width")}} {{experimental_inline}} + - : Request header provides the image's width in {{Glossary("CSS pixel","CSS pixels")}}. -##### Deprecated device client hints +##### Deprecated device and responsive image client hints - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} {{non-standard_inline}} - - : Renamed to {{HTTPHeader("Sec-CH-Device-Memory")}} + - : Standardized as {{HTTPHeader("Sec-CH-Device-Memory")}} - {{HTTPHeader("DPR")}} {{deprecated_inline}} {{non-standard_inline}} - - : Renamed to {{HTTPHeader("Sec-CH-DPR")}} + - : Standardized as {{HTTPHeader("Sec-CH-DPR")}} - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} {{non-standard_inline}} - - : Renamed to {{HTTPHeader("Sec-CH-Viewport-Width")}} + - : Standardized as {{HTTPHeader("Sec-CH-Viewport-Width")}} - {{HTTPHeader("Width")}} {{deprecated_inline}} {{non-standard_inline}} - - : Renamed to `Sec-CH-Width` + - : Standardized as {{HTTPHeader("Sec-CH-Width")}} #### Network client hints diff --git a/files/en-us/web/http/reference/headers/sec-ch-device-memory/index.md b/files/en-us/web/http/reference/headers/sec-ch-device-memory/index.md index cde942a83487ba8..4e7e5363d9365fa 100644 --- a/files/en-us/web/http/reference/headers/sec-ch-device-memory/index.md +++ b/files/en-us/web/http/reference/headers/sec-ch-device-memory/index.md @@ -74,7 +74,7 @@ Sec-CH-Device-Memory: 1 - {{DOMxRef("Device Memory API", "Device Memory API", "", "nocode")}} - {{DOMxRef("Navigator.deviceMemory")}} - {{DOMxRef("WorkerNavigator.deviceMemory")}} -- Device client hints +- Device and responsive image client hints - {{HTTPHeader("Sec-CH-DPR")}} - {{HTTPHeader("Sec-CH-Viewport-Height")}} - {{HTTPHeader("Sec-CH-Viewport-Width")}} diff --git a/files/en-us/web/http/reference/headers/sec-ch-dpr/index.md b/files/en-us/web/http/reference/headers/sec-ch-dpr/index.md index 46adbaf8eefe9cd..4c8abbcedbbfacb 100644 --- a/files/en-us/web/http/reference/headers/sec-ch-dpr/index.md +++ b/files/en-us/web/http/reference/headers/sec-ch-dpr/index.md @@ -68,7 +68,7 @@ Sec-CH-DPR: 2.0 ## See also -- Device client hints +- Device and responsive image client hints - {{HTTPHeader("Sec-CH-Device-Memory")}} - {{HTTPHeader("Sec-CH-Viewport-Height")}} - {{HTTPHeader("Sec-CH-Viewport-Width")}} diff --git a/files/en-us/web/http/reference/headers/sec-ch-viewport-height/index.md b/files/en-us/web/http/reference/headers/sec-ch-viewport-height/index.md index bf4bf2aeb4cc6fe..19a2d0b18591c1d 100644 --- a/files/en-us/web/http/reference/headers/sec-ch-viewport-height/index.md +++ b/files/en-us/web/http/reference/headers/sec-ch-viewport-height/index.md @@ -70,7 +70,7 @@ Sec-CH-Viewport-Height: 480 ## See also - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com) -- Device client hints +- Device and responsive image client hints - {{HTTPHeader("Sec-CH-Device-Memory")}} - {{HTTPHeader("Sec-CH-DPR")}} - {{HTTPHeader("Sec-CH-Viewport-Width")}} diff --git a/files/en-us/web/http/reference/headers/sec-ch-viewport-width/index.md b/files/en-us/web/http/reference/headers/sec-ch-viewport-width/index.md index 40252c70feced55..600f64f81b8dd40 100644 --- a/files/en-us/web/http/reference/headers/sec-ch-viewport-width/index.md +++ b/files/en-us/web/http/reference/headers/sec-ch-viewport-width/index.md @@ -70,7 +70,7 @@ Sec-CH-Viewport-Width: 320 ## See also - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com) -- Device client hints +- Device and responsive image client hints - {{HTTPHeader("Sec-CH-Device-Memory")}} - {{HTTPHeader("Sec-CH-DPR")}} - {{HTTPHeader("Sec-CH-Viewport-Height")}} diff --git a/files/en-us/web/http/reference/headers/sec-ch-width/index.md b/files/en-us/web/http/reference/headers/sec-ch-width/index.md new file mode 100644 index 000000000000000..45fd05bfc6bcebf --- /dev/null +++ b/files/en-us/web/http/reference/headers/sec-ch-width/index.md @@ -0,0 +1,76 @@ +--- +title: Sec-CH-Width header +short-title: Sec-CH-Width +slug: Web/HTTP/Reference/Headers/Sec-CH-Width +page-type: http-header +browser-compat: http.headers.Sec-CH-Width +sidebar: http +--- + +{{SecureContext_header}} + +The HTTP **`Sec-CH-Width`** {{Glossary("request header")}} is a [device client hint](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) which indicates the desired resource width in physical pixels — the intrinsic size of an image. The provided pixel value is a number rounded to the smallest following integer (i.e., ceiling value). + +The hint is only sent on image requests. + +The hint allows the client to request a resource that is optimal for both the screen and the layout: taking into account both the density-corrected width of the screen and the image's extrinsic size within the layout. + +If the desired resource width is not known at the time of the request or the resource does not have a display width, the `Sec-CH-Width` header field can be omitted. +If the `Sec-CH-Width` header appears more than once in a message the last occurrence is used. + + + + + + + + + + + + +
Header type + {{Glossary("Request header")}}, + Client hint +
{{Glossary("Forbidden request header")}}No
+ +## Syntax + +```http +Width: +``` + +## Directives + +- `` + - : The width of the resource in physical pixels, rounded up to the nearest integer. + +## Examples + +The server first needs to opt in to receive the `Sec-CH-Width` header by sending the response headers {{HTTPHeader("Accept-CH")}} containing `Sec-CH-Width`. + +```http +Accept-CH: Sec-CH-Width +``` + +Then on subsequent image requests the client might send `Sec-CH-Width` header back: + +```http +Width: 1920 +``` + +## Browser compatibility + +{{Compat}} + +## See also + +- Device and responsive image client hints + - {{HTTPHeader("Width")}} {{deprecated_inline}} + - {{HTTPHeader("Sec-CH-Viewport-Width")}} + - {{HTTPHeader("Sec-CH-Viewport-Height")}} + - {{HTTPHeader("Sec-CH-Device-Memory")}} + - {{HTTPHeader("Sec-CH-DPR")}} +- {{HTTPHeader("Accept-CH")}} +- [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} header +- [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com) diff --git a/files/en-us/web/http/reference/headers/viewport-width/index.md b/files/en-us/web/http/reference/headers/viewport-width/index.md index b49cffae28ca334..d7d507f1b112947 100644 --- a/files/en-us/web/http/reference/headers/viewport-width/index.md +++ b/files/en-us/web/http/reference/headers/viewport-width/index.md @@ -13,7 +13,7 @@ sidebar: http {{Deprecated_Header}}{{SecureContext_Header}}{{Non-standard_Header}} > [!WARNING] -> The `Viewport-Width` header was renamed to {{HTTPHeader("Sec-CH-Viewport-Width")}} and the new name is now preferred. +> The `Viewport-Width` header was standardized as {{HTTPHeader("Sec-CH-Viewport-Width")}} and the new name is now preferred. The HTTP **`Viewport-Width`** {{Glossary("request header")}} is a [device client hint](/en-US/docs/Web/HTTP/Guides/Client_hints) which 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). @@ -74,11 +74,12 @@ Viewport-Width: 320 ## See also - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com) -- Device client hints +- Device and responsive image client hints - {{HTTPHeader("Sec-CH-Viewport-Width")}} - {{HTTPHeader("Sec-CH-Viewport-Height")}} - {{HTTPHeader("Sec-CH-Device-Memory")}} - {{HTTPHeader("Sec-CH-DPR")}} + - {{HTTPHeader("Sec-CH-Width")}} - {{HTTPHeader("DPR")}} {{deprecated_inline}} - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}} - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} diff --git a/files/en-us/web/http/reference/headers/width/index.md b/files/en-us/web/http/reference/headers/width/index.md index 09374b047caf4d0..400901f68951de6 100644 --- a/files/en-us/web/http/reference/headers/width/index.md +++ b/files/en-us/web/http/reference/headers/width/index.md @@ -13,10 +13,12 @@ sidebar: http {{Deprecated_Header}}{{SecureContext_header}}{{Non-standard_Header}} > [!WARNING] -> The `Width` header was removed from the client hints specification in [draft-ietf-httpbis-client-hints-07](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-client-hints-07). The proposed replacement is [`Sec-CH-Width`](https://wicg.github.io/responsive-image-client-hints/#sec-ch-width) (Responsive Image Client Hints). +> The `Width` header was standardized as {{HTTPHeader("Sec-CH-Width")}} and the new name is now preferred. The HTTP **`Width`** {{Glossary("request header")}} is a [device client hint](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) which indicates the desired resource width in physical pixels — the intrinsic size of an image. The provided pixel value is a number rounded to the smallest following integer (i.e., ceiling value). +The hint is only sent on image requests. + The hint allows the client to request a resource that is optimal for both the screen and the layout: taking into account both the density-corrected width of the screen and the image's extrinsic size within the layout. If the desired resource width is not known at the time of the request or the resource does not have a display width, the `Width` header field can be omitted. @@ -57,7 +59,7 @@ The server first needs to opt in to receive the `Width` header by sending the re Accept-CH: Width ``` -Then on subsequent requests the client might send `Width` header back: +Then on subsequent image requests the client might send `Width` header back: ```http Width: 1920 @@ -69,16 +71,12 @@ Width: 1920 ## See also -- Device client hints +- Device and responsive image client hints + - {{HTTPHeader("Sec-CH-Width")}} - {{HTTPHeader("Sec-CH-Viewport-Width")}} - {{HTTPHeader("Sec-CH-Viewport-Height")}} - {{HTTPHeader("Sec-CH-Device-Memory")}} - {{HTTPHeader("Sec-CH-DPR")}} - - {{HTTPHeader("DPR")}} {{deprecated_inline}} - - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}} - - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} - - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} - - {{HTTPHeader("Width")}} {{deprecated_inline}} - {{HTTPHeader("Accept-CH")}} - [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} header - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com)