FireBrick Custom CSS: Difference between revisions

Line 112:

To avoid having to use an external website to store your custom CSS, you can employ a <code>data:</code> URI - see [https://tools.ietf.org/html/rfc2397 RFC 2397]. Be aware that there may be a limit on the length of URIs however, and in any event see RFC 2397 section 2.

I ~~recommend~~ that you should not attempt to include newlines in the inline CSS of your data URI, as this may be forbidden by the URI scheme standard. Be aware of the risk of your inline CSS containing characters that are either prohibited in data URIs, illegal in quoted strings or in XML attributes. See both the RFC for the data URI scheme and also the XML standards. Just some examples of illegal characters are ", %, &, >, newlines and ~~there are probably~~ various others, The simple technique of including literal CSS straight, as below, is only usable if the particular fragment of CSS does not contain any problematic characters, otherwise see the next section for a general method.

It is recommended that you should not attempt to include newlines in the inline CSS of your data URI, as this may be forbidden by the URI scheme standard. Be aware of the risk of your inline CSS containing characters that are either prohibited in data URIs, illegal in quoted strings or in XML attributes. See both the RFC for the data URI scheme and also the XML standards. Just some examples of illegal characters are ", %, &, >, newlines and various others, The simple technique of including literal CSS straight, as below, is only usable if the particular fragment of CSS does not contain any problematic characters, otherwise see the next section for a general method.

Example, straight inline CSS ~~(exercise~~ caution regarding prohibited characters if adapting). In the following example, line-breaks ~~may~~ be included for readability~~. These~~ must be removed and the whole string must be entered as a single line.

Example: straight, inline CSS. Exercise caution regarding prohibited characters if adapting. In the following example, any line-breaks which be included for readability must be removed and the whole string must be entered as a single line.

</syntaxhighlight>

Note the presence of the comma after <code>text/css</code>. This is essential in a data URI.

Note the presence of the comma after <code>text/css</code>. This is essential in a <code>data</data> URI.

=== Base64-encoded data ===