CSS fetch integration

Draft Community Group Report,

This version:
Issue Tracking:
Inline In Spec
Jonathan Kingston (Mozilla)


This specification integrates fetch with CSS

Status of this document

This specification was published by the Web Platform Incubator Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups.

1. Introduction

1.1. Request URL fetch integration

This specification changes the behaviour type <url> so that it uses the fetch API terminology.

Note: Older specifications may reference the <uri> type, these should be considered to be using the <url> type.

Note: This extends from the following places: https://drafts.csswg.org/css-values/#urls, https://drafts.csswg.org/css-values-3/#urls and https://drafts.csswg.org/css-shapes/#propdef-shape-outside wich define a relationship with Fetch

2. Requesting context

When a user agent is required to make a request to a resource using <url> it must exclusively pick from one of the request contexts. This document doesn’t cover the usage of <url> to reference elements within the same document.

3. 'Embedding context'

The embedding context is the stylesheet or the containing document if the styles are loaded within a document.

4. Default url request setup

Perform the following steps:
  1. Perform steps in any specified URL modifiers.
  2. Create a potential-CORS request given:
  3. Let host be the domain of the containing document.
  4. Optionally the UA can choose to let origin be the origin of the containing document.
  5. Let referrer be the URL of the 'embedding context'.
  6. Let 'referrer policy' be the policy of the 'embedding context'.
  7. If present set integrity metadata of the request to request-integrity-metadata.
Chrome implements setting the origin however other UA’s such as Firefox don’t.
The 'referrer policy' currently isn’t observed in UA implementations.

4.1. Color profile context

4.1.1. When the Color profile context applies

The @color-profile src descriptor uses the Color profile context.

Note: this adds a new row to the table in: https://fetch.spec.whatwg.org/#concept-request-initiator

4.1.2. Request setup

4.2. Font context

4.2.1. When the Font context applies

This context applies when @font-face is requesting a 'url()' as per Font fetching requirements

4.2.2. Request setup

4.3. Image context

4.3.1. When the Image context applies

This context applies to any property that uses the <image> type and also properties including but not exclusively:

urls with a fragment suffer from the following issue: https://github.com/w3c/csswg-drafts/issues/383

4.3.2. Request setup

4.3.3. Response

4.4. Import context

4.4.1. When the Import context applies

The @import-rule uses the Import Context

4.4.2. Request setup

5. URL Modifiers

URL modifiers are taken into acount after the 'requesting context' steps have taken place.

5.1. integrity() function

integrity( <integrity-metadata> )

If present set request-integrity-metadata to <integrity-metadata>.

Fix bikeshed to: https://www.w3.org/TR/SRI/#dfn-integrity-metadata

5.2. crossorigin() function

<crossorigin> = crossorigin( <cors-setting> )


<cors-setting> = [ anonymous | use-credentials ]

If present set 'HTML/infrastructure#request-cors-setting' to the State column matching <cors-setting> in the CORS settings attribute table.

Fix bikeshed to: https://html.spec.whatwg.org/multipage/infrastructure.html#cors-settings-attribute

The following is an example to show the integrity matching of a border image:
border-image: url('example.png'
  ) 30 round;

The following example shows the use of custom properties to improve readability.

.selector {
  --image-sha384: sha384-dOTZf16X8p34q2/kYyEFm0jh89uTjikhnzjeLeF0FHsEaYKb1A1cv+Lyv4Hk8vHd;
  --image-sha512: sha512-Q2bFTOhEALkN8hOms2FKTDLy7eugP2zFZ1T8LCvX42Fp3WoNr3bjZSAHeOsHrbV1Fu9/A0EzCinRE7Af1ofPrw==;
  border-image: url('example.png' integrity(var(--image-sha384) var(--image-sha512)) crossorigin(anonymous)) 30 round;


Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.


Terms defined by this specification

Terms defined by reference


Normative References

CSS Backgrounds and Borders Module Level 3 URL: https://drafts.csswg.org/css-backgrounds-3/
Tab Atkins Jr.; Chris Lilley. CSS Color Module Level 4. 5 July 2016. WD. URL: https://drafts.csswg.org/css-color/
CSS Containment Module Level 3 URL: https://drafts.csswg.org/css-containment-3/
Elika Etemad; Dave Cramer. CSS Generated Content Module Level 3. 2 June 2016. WD. URL: https://drafts.csswg.org/css-content/
John Daggett. CSS Fonts Module Level 3. 3 October 2013. CR. URL: http://dev.w3.org/csswg/css-fonts/
CSS Image Values and Replaced Content Module Level 3 URL: https://drafts.csswg.org/css-images-3/
Tab Atkins Jr.. CSS Lists and Counters Module Level 3. 20 March 2014. WD. URL: http://dev.w3.org/csswg/css3-lists/
Dirk Schulze; Brian Birtles; Tab Atkins Jr.. CSS Masking Module Level 1. 26 August 2014. CR. URL: http://dev.w3.org/fxtf/css-masking-1/
Vincent Hardy; Rossen Atanassov; Alan Stearns. CSS Shapes Module Level 1. 20 March 2014. CR. URL: http://dev.w3.org/csswg/css-shapes/
Tantek Çelik; Florian Rivoal. CSS Basic User Interface Module Level 3 (CSS3 UI). 7 July 2015. CR. URL: http://dev.w3.org/csswg/css-ui/
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 11 June 2015. CR. URL: http://dev.w3.org/csswg/css-values/
Filter Effects Level 1 URL: https://drafts.fxtf.org/filters-1/
Filter Effects Level 2 URL: https://drafts.fxtf.org/filters-2/
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119

Informative References

Tab Atkins Jr.. CSS Custom Properties for Cascading Variables Module Level 1. 3 December 2015. CR. URL: http://dev.w3.org/csswg/css-variables/
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: https://www.w3.org/TR/CSS2

Issues Index

Chrome implements setting the origin however other UA’s such as Firefox don’t.
The 'referrer policy' currently isn’t observed in UA implementations.
urls with a fragment suffer from the following issue: https://github.com/w3c/csswg-drafts/issues/383
Fix bikeshed to: https://www.w3.org/TR/SRI/#dfn-integrity-metadata
Fix bikeshed to: https://html.spec.whatwg.org/multipage/infrastructure.html#cors-settings-attribute