252
edits
FireBrick Custom CSS: Difference between revisions
m
→Internal inline CSS - using data URIs
m (→Base64-encoded data: line breaks - wording) |
|||
|
}
</syntaxhighlight>
== Testing - warning ==
There is a danger of making the Firebrick’s web UI completely unusable with mistakes in your custom CSS. To avoid this, if you are using the Firebrick's XML config editor page, use the "Test" button rather than "Save" after making your edit, as this will roll back your change after a time limit if you are stuck.
* In order to be prepared for recovery from a bad modification, first download a good reference copy of the XML config file in advance, and then use an http upload tool - such as <code>curl</code> in Unix-like environments - to upload the good saved config file to the Firebrick. See the Firebrick manual for details on config uploading by http.
* Many web browsers have options that allow a webpage's CSS to be overridden, customised or ignored.
* Alternatively, depending on your chosen configuration options, you may be able to log in to the Firebrick's command line even if you find the web UI unusable.
== Performance degradation with external websites ==
To avoid introducing delays in the responsiveness of the Firebrick's web UI, choose a well-configured web server. If you are the web master of your chosen server, review the cache-friendliness settings. (Topics: 'cacheability', 'cache-control', 'ETags'.) Getting cacheability settings wrong could in theory at least mean that your Firebrick might possibly be compelled to refetch the custom CSS repeatedly. A number of excellent web-based tools are available that will check and diagnose cacheability issues of a website. If you are using the Apache web server, see the <code>https.conf</code> or <code>.htaccess</code> documentation relating to cache control options. Set long timeouts for cacheability of all CSS files and make sure that the Firebrick is not forbidden from caching the downloaded CSS. Using inappropriate short cache lifetimes, even zero, or disabling caching altogether is a fairly common and heinous practice.
== Security implications ==
Pointing your Firebrick to CSS that is stored in a website on the public Internet might, in theory at least, have security implications. Certainly review security of that site in general, who might have access to the site's content, any FTP passwords, 'locking' features on FTP. Also consider attacks on the DNS to redirect requests to a bogus site. Man-in-the-middle attacks and ARP / ND attacks could achieve redirection at a lower level, however this is a much more general problem. Consider using TLS / SSL (i.e. a <code>https:</code> CSS URL) to prevent these possibilities.
== Internal inline CSS - using data URIs ==
To avoid having to use an external website to store your custom CSS, you can employ a
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.
Example, straight inline CSS (exercise caution if adapting):
<syntaxhighlight lang=xml><http css-url="data:text/css,@media screen{div.main,div.sidemenu div.menu a{font-size:x-small}}" />
=== Base64-encoded data ===
You may use base64-encoded <code>data
If you are using any non-ASCII characters in your CSS text, unless you have already CSS backslash-hex-encoded them, which avoids the issue, your CSS should
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.
<syntaxhighlight>css-url="data:text/css;charset=UTF-8;base64,QG1lZGlhIHNjcmVlbntka
XYubWFpbixkaXYuc2lkZW1lbnUgZGl2Lm1lbnUgYXtmb250LXNpemU6eC1zbWFsbH19"
</syntaxhighlight>
If you are absolutely certain that your CSS will contain only ASCII characters (i.e. those below code-point 128), then the <code>;charset=UTF-8</code> declaration can be omitted.
[[Category:FireBrick|Custom]]
| |||