252
edits
FireBrick Custom CSS: Difference between revisions
m
→Internal inline CSS - using data URIs
m (→Testing - warning: link added) |
|||
| (10 intermediate revisions by 2 users not shown) | |||
|
div.main, div.sidemenu div.menu a, div.topmenu, textarea
{
font-size: x
}
div.footer
{
div.footer *
{
vertical-align: top
}
}
</syntaxhighlight>
Note that there is no space after the dot in <code>div.main</code> etc. This is essential; adding white space at this point would alter the meaning - see [https://www.w3.org/TR/CSS22/selector.html CSS selectors].▼
At the time of writing, the shipping CSS in the Firebrick FB2500 was v1.45.001 Ximenes, and the standard <code>font-size:</code> value in use was keyword <code>small</code>.▼
'''Note:''' The above brief example is known to currently produce certain '''defects''' in the webpages’ layout: A known minor issue is that the vertical layout of the objects within the footer is slightly off.
To ''increase'' the text size, this example would require a rewrite and lots of testing trial and error. Unfortunately changing text sizes can have a lot of nasty knock-on effects on layout, which cascade out of control in ways that are hard to predict. Hacks such as the above are likely to fall apart if the base CSS changes or if other aspects of the design cause the layout to change. This is in part because this is an override on parts of the base CSS, so effectively a patch, and so has intimate dependencies on its precise content. Also there are dependencies between the (X)HTML and the CSS, so changes to the pages’ content or structure can possibly cause problems.▼
▲At the time of writing, the shipping CSS in the Firebrick FB2500 was v1.45.001 Ximenes, and the standard <code>font-size:</code> value in use was keyword <code>small</code>. This could possibly change in future.
▲To ''increase'' the text size, this example would require a rewrite and lots of testing trial and error. Unfortunately changing text sizes can have a lot of nasty knock-on effects on layout, which cascade out of control in ways that are hard to predict. Hacks such as the above are likely to fall apart if the base CSS changes or if other aspects of the design cause the layout to change. This is in part because this is an override on parts of the base CSS,
▲Note that there is no space after the dot in <code>div.main</code> etc. This is essential; adding white space at this point would alter the meaning - see [https://www.w3.org/TR/CSS22/selector.html CSS selectors].
=== CSS debugging tips ===
=== Using CSS @import ===
Completely separate 'print'- and 'screen' stylesheets can be maintained in separate .css files and these files can be conditionally included by reference in a master .css file using the CSS <code>@import</code> directive at the top of the file with a media-type qualifier within the directive
=== Pulling in multiple .css files ===
* 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 ==
If your custom CSS is located on an external web server, try to ensure that the web server of your choice is well-configured and has excellent availability in order to avoid the possibility of introducing unpleasant delays in the responsiveness of the Firebrick's web UI. (Perhaps consider testing what effect unavailability has on the behaviour of your Firebrick's UI - your Firebrick firmware release could exhibit a delay in response before a timeout if the link to the web server is broken, and as regards visual appearance if the custom CSS can not be fetched, then it could use previously cached CSS or defaults.)
== Security implications ==
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.
Example
<syntaxhighlight lang=xml><http css-url="data:text/css,@media screen{div.main,div.sidemenu div.menu a,div.topmenu,textarea{font-size:x-small}div.footer
</syntaxhighlight>
Note the presence of the comma after <code>text/css</code>. This is essential in a <code>data</data> URI.
=== Base64-encoded data ===
You may use base64-encoded <code>data</code> URIs for safety and complete flexibility as shown in the example below. Using base64-encoding removes any risks and problems with illegal characters completely. Note again the presence of the comma, now after the keyword '
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 be Unicode text and you must first UTF-8-encode your CSS into a byte stream, before then base64-encoding those bytes. You ''must'' then also declare that your original CSS text was UTF-8 as in the example below.
<syntaxhighlight>
css-url="data:text/css;charset=UTF-8;base64,
bnUgZGl2Lm1lbnUgYSxkaXYudG9wbWVudSx0ZXh0YXJlYXtmb250LXNpemU6eC1zbWFsbH1kaXYuZm9vdGVye3
BhZGRpbmc6MnB4IDEwcHggMXB4fWRpdi5mb290ZXIgKnt2ZXJ0aWNhbC1hbGlnbjp0b3B9fQ=="
</syntaxhighlight>
| |||