ccSiteStyle

A Browser-Compensated Dynamic Style Sheet by Chip Chapin

Chip's Home > WebTools > OtherTools > ccSiteStyle    

Page Revision History

  • 2002-11-14 (1.1.1) Fix bug in tmlistbox class.
  • 2002-11-09 (1.1) Added some ClassBase styles, made a few adjustments.
  • 2002-11-08 Initial Release (1.0)

Contents

ccSiteStyle Info Page
Why ccSiteStyle?
How ccSiteStyle Works)
Using ccSiteStyle
Using ccSiteStyle With Dreamweaver
ccSiteStyle Reference
Things To Do
ccSiteStyle Source Code

What's Here?

ccSiteStyle is a dynamic stylesheet for PHP documents that compensates for browser differences in order to render a set of standard CSS styles as consistently as possible.

Why ccSiteStyle?

Since the inception of the World-Wide Web, one of the underlying concepts in HTML and in web browsers was to separate the logical content of a document from the format of its display. The author's responsibility was to mark up a <p>paragraph</p> or <blockquote>quoted passage</blockquote>. It was left it to the browser, or user agent, to determine how to render such content for the reader. In principle, this empowers the reader to use whatever fonts and font sizes are most pleasing to him or her. For many documents this approach is both sufficient and desirable.

But as web pages became more complicated, their designers required and demanded control over all sorts of layout and design issues, including fonts and font sizes. It soon became apparent that even using CSS to define font sizes by points, pixels or percents will lead to substantially different results across browsers for some fonts and sizes.

After trying a variety of solutions, I finally decided to use PHP to dynamically generate a custom style sheet for each page request based on the browser being employed. The result is ccSiteStyle. I have been using preliminary versions of ccSiteStyle since the end of 2001.

Is ccSiteStyle necessary? I sincerely wish there were a simpler solution. If anyone has a better answer, please let me know!

How ccSiteStyle Works

Browsers, or user agents, make HTTP requests to your server for a particular page. Part of the request is a user agent string that is intended to identify the user agent to the server. Server-side programs can use the user agent string to determine, for example, whether the browser is Internet Explorer 5.5 or Netscape Navigator 4.7.

I have a separate package called ccBrowserInfo that handles this browser identification. You will need to install it in order to use ccSiteStyle.

ccSiteStyle is a PHP file that one includes in their PHP document in place of a style sheet. Using ccBrowserInfo, ccSiteStyle dynamically generates an in-line style sheet that is appropriate for the requesting browser.

ccSiteStyle defines font families, sizes and some other attributes of many standard HTML tags, such as p, h1, etc. ccSiteStyle also defines a number of classes such as smalltext, xsmalltext and smallitalic for convenience in marking up your pages and documents.

Using ccSiteStyle

Here is the basic PHP code which I typically use to include ccSiteStyle:

<?php
  
// Include dynamic style sheet.
  
echo '<style type="text/css">'."\n  <!--\n";
  include( 
$_SERVER['DOCUMENT_ROOT'] . '/ccSiteStyle.css.php' );
  echo 
"\n  -->\n</style>\n";
?>

The PHP include() function uses file-system paths, not web-server document root paths. Hence the use of $_SERVER['DOCUMENT_ROOT'].

A better version first checks the local directory, then checks at the document root. This allows one to override the site-wide style sheet with a local version:

<?php
  
// Include dynamic style sheet.
  
echo '<style type="text/css">'."\n  <!--\n";
  if (
file_exists'ccSiteStyle.css.php' )) {
    include_once( 
'ccSiteStyle.css.php' );
  } 
  else {
    include_once( 
$_SERVER['DOCUMENT_ROOT'] . '/ccSiteStyle.css.php' );
  }
  echo 
"\n  -->\n</style>\n";
?>

Using ccSiteStyle With Dreamweaver

Dreamweaver includes a WYSIWYG HTML editor. The following tip may apply to other WYSIWYG editors as well.

Dreamweaver will display your document in accordance with the appropriate style sheet rules if it can find the style sheet. But it cannot interpret the PHP include() function. In order to get around this, I place a dummy style sheet link in my documents. This link is surrounded by conditional PHP code so that it will not appear in the final document. Note that it requires the presence of a static CSS version of ccSiteStyle.

<?php
  
// Include dynamic style sheet.
  
echo '<style type="text/css">'."\n  <!--\n";
  if (
file_exists'ccSiteStyle.css.php' )) {
    include_once( 
'ccSiteStyle.css.php' );
  } 
  else {
    include_once( 
$_SERVER['DOCUMENT_ROOT'] . '/ccSiteStyle.css.php' );
  }
  echo 
"\n  -->\n</style>\n";
  if (
false) {
?>
<link href="/ccSiteStyle.css" rel="stylesheet" type="text/css">
<?php ?>

ccSiteStyle Reference

The following section illustrates ccSiteStyle behavior for standard HTML tags and for the new classes that it defines.


H1 Heading: Basic Text Styles

<span class=".largetext">
This is a block of largetext.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
0123456789
</span>

<span class=".normaltext">
This is a block of normaltext, it should be the same as a regular paragraph.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
0123456789
</span>

<p>
This is a regular paragraph, it should be identical to normaltext.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
0123456789
</p>

<span class=".smalltext">
This is a block of smalltext. It should use the same font as normaltext, only 1 size smaller (on Windows NN 4, it uses a different font).
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
0123456789
</span>

<span class=".smallitalic">
This is a block of smallitalic text. It should be the same size as smalltext.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
0123456789
</span>

<span class=".smallertext">
This is a block of smallertext. It should be just a little smaller than smalltext. It should use the same font as normal text.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
0123456789
</span>

<span class=".smallerertext">
This is a block of smallerertext. It should use the same font as normal text.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
0123456789
</span>

<span class=".xsmalltext">
This is a block of xsmalltext. It should be smaller than smalltext, possibly using a different font.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
0123456789
</span>

<span class=".xxsmalltext">
This is a block of xxsmalltext. It should be the very smallest readable font.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
0123456789
</span>

H2 Heading: Bullet List

Paragraph text

More text.

H3 Heading: Numbered List

Paragraph text

  1. Numbered list <ol><li>...</li></ol>
  2. Numbered list
  3. Numbered list

More text

H4 Heading: Definition List

Paragraph text

<dl>
<dt>Definition list</dt>
<dd>Here is a definition.</dd>
Another item
Here is a definition

More text.

H5 Heading: Standard HTML Styles

Paragraph text

<kbd>This is a section of keyboard text</kbd>.

<code>here is a section of code text</code>.

<tt>Teletype text here</tt>.

<pre>Preformatted text here</pre>.

<var>A section of var text.</var>

<samp>A section of samp text</samp>

H6 Heading

Paragraph text.


Things To Do

What needs to be done to improve ccSiteStyle?

ccSiteStyle Source Code

Click here to see the source code for ccSiteStyle (ccSiteStyle.css.php) in a new window:

  

Use copy and paste to save the file as ccSiteStyle.css.php. You will also need ccBrowserInfo.

 

.

Valid HTML 4.0! Valid CSS! Chip's Home Page

Updated Friday November 15, 2002 07:46:12 PST