Constructing targetted CSS

I am working on a page with a responsive design. The page is really two pages, assembled with PHP. This allows the content and functionality to be reduced for smaller mobile devices, and enhanced for tablets and desktops.

In order to provide consistent presentation across all devices, I broke the CSS into several files. All the CSS files are then compressed with the YUI compressor and concatenated into device specific files.

The device specific files are:

  • mobile.css - For devices that are not more than 360px wide
  • desktop_and_tablet.css - For devices that are more than 360px wide. Media queries indicate resolution specific elements.

for F in "$CSSDIR/"*.css; do
        # Compress
        echo -e "\t$F"
        `$YUICOMPRESSOR "$F" > "$TMPDIR/$F"`
done;

echo Concatenating CSS ...
# Construct targeted version
CSSTMPDIR="$TMPDIR/$CSSDIR"
cat "$CSSTMPDIR/reset.css" "$CSSTMPDIR/core.css" "$CSSTMPDIR/mobile.css" > "$MINDIR/mobile.css"
cat "$CSSTMPDIR/reset.css" "$CSSTMPDIR/core.css" "$CSSTMPDIR/color.css" "$CSSTMPDIR/desktop.css" "$CSSTMPDIR/tablet.css" "$CSSTMPDIR/js.css" "$CSSTMPDIR/common.css" > "$MINDIR/desktop_and_tablet.css"

The component CSS files are:

  • color.css - All color definitions
  • common.css - CSS that is common to both tablet and desktop devices
  • core.css - CSS that is common to all devices. Examples include setting the font, some common padding and margins.
  • desktop.css - Styles targeted for desktop browsers
  • js.css - Styles for pages which rely on JavaScript. These styles are applied if the body has the ‘js’ class applied, which indicates the client supports JavaScript.
  • mobile.css - The CSS for the smallest supported browsers
  • reset.css - The reset.css, thanks to: http://meyerweb.com/eric/tools/css/reset/
  • tablet.css - Styles for devices between 361px and 980px wide, inclusive

The advantages of this approach is that the style settings are not duplicated, they need only be maintained in one place. The content delivered to the mobile device includes only the styles and content which will be used, ensuring the leanest pages possible. The tablets and desktops, receive the CSS for tablets and desktops, but display the same content. This allows those pages to adjust dynamically to width changes.

All devices include a small JavaScript file which handles the page reload if the width of the device is modified outside the target bounds of the loaded page.

This is the JavaScript that detects and responds to the width change for mobile devices. It does require JavaScript, the page does not use media queries, since that would require more CSS and content to be loaded to support transitions.

function widthCheck() {
        if ((document.body.scrollWidth && document.body.scrollWidth > 360) ||
                (innerWidth && innerWidth > 360) ||
                (document.body.clientWidth && document.body.clientWidth > 360)) {
                        location.href = "index.php?notmobile";
        } 
}

window.onload = widthCheck;
window.onresize = widthCheck;

The ?notmobile overrides the mobile device detection code.

On the tablets and desktops, jQuery is used and the code to detect and react to width changes is:

        $(window).resize(function() {
                if ($(window).width() < 360) {
                        location.href='mobile.php';
                }
        });

PHP is used on initial page load to identify mobile devices therefore, mobile.php is used for devices which are classified as mobile, index.php is used for all others. A query string parameter is used to override the detection, which allows the viewer to switch between the pages to best suit their needs.