Table of contents
- 1. Overview
- 2. How To
- 2.1. Setup CSS.php
- 2.2. Use CSS Variables
- 3. Closing Remarks
Overview
In order to faciliate skinning Deki Wiki we've introduce CSS variables based on this spec. Another change with the variables is that the css caching has been refactored to require less code duplication.
How To
The easiest way to understand the power of the new CSS variables is to see an example.
Setup CSS.php
If you've created a new template before you know how cumbersome the css.php file is. That has all been streamlined so now the following is all you need to do in order to cache your css files.
<?php
// necessary for LocalSettings.php
define('MEDIAWIKI', true);
// chdir() will attempt to load LocalSettings.php magically;
// if this fails, you will need to explicitly set the path
chdir($_SERVER['DOCUMENT_ROOT']);
require_once('includes/Defines.php');
require_once('LocalSettings.php');
require_once($IP . '/includes/libraries/ui_handlers.php');
$CSS = new CssHandler(__FILE__);
// add a template css file (located in the template directory)
$CSS->addTemplate('common.css');
// add some skin css files (located in the skin directory)
$CSS->addSkin('style.css');
$CSS->addSkin('content.css');
// create the cache file
$CSS->process();
?>
This file can now be saved into your skins folder and be called from HTML:
<link href="/path/to/your/css.php" rel="stylesheet" type="text/css" />
Use CSS Variables
You first need to define a @variables section in your css file. Each css file can have multiple variable declarations however each variable declaration is scoped to that css file. This means you cannot define a variable in FILE_A.css and use it in FILE_B.css.
@variables {
commonBorder1: solid black 2px;
commonPadding: 2px 2px;
groovy: #FFCC00;
}
Now that the variables are defined you can use them in your css as follows. Note that variable names are CaSe SENSITIVE!
.someclass {
border: var(commonBorder1);
padding: var(commonPadding);
color: #000;
}
body a {
color: var(groovy);
}
div {
padding: var(commonPadding);
}
Closing Remarks
The css files are still 100% browser compliant since the css variables are parsed on the server side and then cached. Each @variables block is stripped from the css before it is sent to the client. However, if a variable is used but never declared, it will get pushed to the client.
If the spec is ever approved, we can simply turn off the server side parsing and delegate it to the client. Now go take advantage of this awesome feature.
- Tag page
- What links here
