- Source:
Methods
createCssRequest(url, optionsopt, nullable, useNativeopt, strictopt, nullable) → {Requests.CssFetchRequest}
This method creates a special version of a FetchRequest specifically designed to retrieve Cascading Stylesheets.
Usually you'll want to retrieve CSS to include it into a page and thereby style something on the page currently open, so the default mode of this method is to resolve to a directly usable style tag, you may insert into the DOM wherever you please. However, you may also specify to retrieve the raw CSS source.
If you plan on inserting the result into DOM anyway you'll like the fact that this is also directly possible, by defining an insert target. In case you decide to insert the result directly, the default is an inline style, but you may also choose to insert a sourced link tag, loading a stylesheet on insertion and adding the included styles on load. This is not strictly a programmatic "request" anymore, but very handy. If you are inserting a sourced link, the Deferred resolves on load by default (and rejects on error), thereby keeping the general idea of working with a request. But you may also define a parameter on execute to force resolve immediately on insert.
BTW: Inserting does not automatically change the resolve value, those are separate concerns.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
url |
String | the complete URL to query |
||
options |
Object |
<optional> <nullable> |
null | the request options (see: createFetchRequests for details) |
useNative |
Boolean | String |
<optional> |
false | determines if the native Fetch implementation of the browser should be used, true forces usage, "auto" uses it only if available |
strict |
Boolean |
<optional> <nullable> |
true | if true, enforces "text/css" as accept header as well as response mime type, if false, accept header is not set and different mime type only results in warning |
- Source:
- See:
Throws:
error in strict mode if response content type is not "text/css"
Returns:
Example
createCssRequest('/css/test.css')
.execute()
.then(cssElement => { document.head.appendChild(cssElement); })
;
createCssRequest('/css/test.css')
.execute(null, injectTarget, 'request-2')
.then(cssElement => { alert(`has been injected: "${cssElement.textContent}"`); })
;
createCssRequest('/css/test.css')
.execute('raw', {element : injectTarget, position : 'beforebegin'}, 'request-3', 'screen')
.then(rawCss => { alert(`has been injected: "${rawCss}"`); })
;
createCssRequest('/css/test.css')
.execute('sourced-element', {element : injectTarget, position : 'prepend'}, 'request-4', 'screen')
.then(cssElement => { alert(`has been injected: "${cssElement.getAttribute('data-id')+}"`); })
;