API: Script: CSS Handler

ebollens edited this page Oct 4, 2011 · 13 revisions
Clone this wiki locally

Description

The CSS Handler (css.php) is responsible for loading style definitions for the MWF entities. It does this through a dynamic process that considers the classification of the visitor's device and serves out a set of definitions catered to that device. It also allows a content provider (someone using the handler) to specify additional files that should be loaded in and minified at a particular classification level. Though a PHP file, this handler identifies itself as content-type text/css.

Intent

To deliver a set of stylesheets based on the user's browsing device and to deliver additional stylesheets defined by the content provider, all within one requested script file.

Implementation

Loading the CSS Handler

The dynamic CSS handler resides at:

http://{MOBILE_DOMAIN}/assets/css.php

This file can be included through a standard <link> tag as with any other CSS file:

<link rel="stylesheet" href="http://{MOBILE_DOMAIN}/assets/css.php" type="text/css">

Loading and Minifying Custom CSS

In addition to loading in stylesheets for the framework entities, this also supports adding your own CSS (automatically minified) to any classification level through the CSS handler. In specifying a classification (basic, standard or full), the CSS will be fetched, minified and served out to any device of that classification level or higher.

For example, to include a custom CSS file for devices at the standard level and above:

<link rel="stylesheet" href="http://{MOBILE_DOMAIN}/assets/css.php?standard={URL_ENCODED_PATH}" type="text/css">

It is possible to include multiple custom CSS files for devices at the same level as follows:

<link rel="stylesheet" href="http://{MOBILE_DOMAIN}/assets/css.php?standard={URL_ENCODED_PATH}+{URL_ENCODED_PATH_2}" type="text/css">

A prototype that includes files at all classification levels:

<link rel="stylesheet" href="http://{MOBILE_DOMAIN}/assets/css.php?basic={URL_ENCODED_PATH}&standard={URL_ENCODED_PATH_2}&full={URL_ENCODED_PATH_3}" type="text/css">

While the CSS Minifier provides this same sort of minification, for pages using css.php, this method is recommended as it reduces the total number of HTTP requests by doing all the custom minification within a single HTTP request.

Compatibility Note: Minification directly within the CSS Handler has been available since MWF 1.1. Content providers using an instance of MWF 1.0 must instead leverage the CSS Minifier.