Use Conditional Server Side Includes – conditional css style sheets xssi

You can minimize HTTP requests by combining external CSS and JavaScript files. You can go even further by server-side including the remaining external files (with restrictions for XHTML due to its XML nature). One additional technique is to make those SSI work harder for you by serving up conditional content. Conditional server-side includes let you deliver different content based on environment variables sent by browsers to servers.

Conditional CSS

In an ideal world we’d write our (X)HTML and CSS once and it would work perfectly for all browsers. In the real world different browsers and platforms render our creations slightly or drastically different, depending on how adventurous we get with our (X)HTML and CSS. To combat these browser peculiarities developers have adopted a number of coping strategies, including:

• @import to hide more advanced styles from older browsers (Netscape 4.x etc.)
• CSS hacks (voice-family, escapes, “Tantek hacks,” and other techniques)
• Conditional CSS

While the @import method works fine, it introduces another HTTP request for modern browsers in the performance-sensitive head section. CSS hacks are useful when applying small snippets of styles to different browsers. But for the most flexibility and speed, conditional CSS rules. Conditional CSS uses the if-else branching logic built into XSSI to deliver different CSS based on browser environment strings.

Conditional XSSI Example

Here’s a simplified example of XSSI.

<!--#if expr="((${HTTP_USER_AGENT} = /Mozilla\/4/) && (${HTTP_USER_AGENT} != /compatible/))"-->
<style type="text/css">
<!--
Netscape 4.x styles go here (no :hover, link padding, or other unsupported or buggy styles)
-->
</style>
<!--#else -->
<style type="text/css">
<!--
Non-Netscape 4.x styles go here
-->
</style>
<!--#endif -->

If the above code snippet sniffs a Netscape 4.x browser it delivers Netscape 4.x-friendly CSS, otherwise it delivers non-Netscape 4.x CSS. Using variations of this technique (limited only by the parsing of the user agent string) you can deliver conditional content based on environment variables passed from browser to server (HTTP_USER_AGENT being the most popular). This way you can create one (X)HTML page and different style sheets, without requiring extra HTTP requests. Of course, this embedded style technique is only legal for HTML documents.

Conditional CSS and XHTML

XHTML documents take a different approach. Being XML, XHTML documents are fussy about some special characters (like < and &). XML parsers are allowed to strip out all comments when processing a document, which means that enclosing your CSS in comments to hide it from older browsers won’t work consistently in XHTML (<-- ... -->).

Special characters continue to have their special meanings unless the block is enclosed in a CDATA directive. For example, the “>” in the selector below would cause an XHTML document to not be well-formed:

<style type="text/css">
h1 > p {color:red;}
</style>

This can be resolved by placing it in a CDATA block:

<style type="text/css">
<![CDATA[
h1 > p {color:red;}
]]>
</style>

But older browsers ignore CDATA sections. In order for older browsers not to choke on the CDATA section while keeping the document valid and well-formed you’d have to expand the above code into this convolution:

<style type="text/css">
<!--/*--><![CDATA[<!--*/
h1 > p {color:red;}
/*]]>*/-->
</style>

Due to these limitations, most authors have adopted external CSS and JavaScript files for XHTML. But you can still provide conditional CSS through a linked style sheet, like this:

<link rel="stylesheet" type="text/css" href="style.shtml" media="screen" />

Note the suffix of “.shtml” on the linked style sheet. With the right server settings, Apache and other servers will parse .shtml files for XSSI commands. By putting your conditional CSS within an external file you can have XHTML compliant external style sheets that deliver customized CSS.

Conclusion

Conditional server-side includes let you deliver customized content to different browsers and platforms without requiring additional HTTP requests. With conditional CSS, you can include additional styles for modern browsers, without upsetting older ones. Best used for high-traffic pages, conditional CSS offers an alternative method to the @import method and CSS hacks in common use today.

Further Reading

Apache Module mod_include

This module adds a filter that processes files before they are delivered to the client. It looks for specially formatting SGML comments that signify server-side includes. Shows how flow control and environment variables work.

Box Model Hack

Tantek Celik shows how to use the voice-family workaround.

Minimize HTTP Requests

By combining external files and embedding CSS and JavaScript within your HTML you can minimize the number of HTTP requests required to render your page.

Properly Using CSS and JavaScript in XHTML Documents

Explores the issues involved with embedding CSS and JavaScript in XHTML documents, by Bob Clary of Netscape’s DevEdge.

Server-Side Techniques

Summary of chapter on server-side includes, browser sniffing, mod_include, and mod_rewrite, from Speed Up Your Site: Web Site Optimization. Shows how to set up your server for efficient XSSI.