of interest

Articles
	PPWIZARD

PPWIZARD - Page 2

<-- prev ] [ contents ]

2. Style management with PPWIZARD

Another incredibly valuable application of PPWIZARD is the management of styles (CSS) in html.

2.1. Visual formatting issues in XHTML

Now that XHTML is the 'official' standard for html markup, authors are encouraged to move toward the 'strict' DTD which dictates that all 'layout' markup (i.e. things that control the visual appearance of the page, e.g. the attribute 'bgcolor') be removed and defined only by CSS.

For practical purposes the 'transitional' DTD is available, which allows for some of the old html visual formatting markup to be included in the XHTML. This enables backward compatibility with older browsers that don't understand (or only partially understand) CSS.

So, in theory, eventually all 'html' authoring will be done in a 'strict' flavor of XHTML (XML) which is extremely portable and easy to manage and build, and all the visual formatting of those pages will be controlled by styles which are (at least partially) removed from the code to make them very easy to control.

In reality, however, managing complex style sheets can be quite a burden. Suppose you have web site with a complex (but pleasing) visual model that requires formatting the layout with tables, and many of the seperate elements of the page have colors and styles that need to be linked together: if those elements aren't nested and don't automatically inherit their parent's style attributes then they have to be managed manually (i.e. I want to change one color of my 'theme' and I have to update it for 5 different classes) - or you have to create multiple definitions for your classes, defining identical attributes for groups and then having unique attributes defined elsewhere, which also becomes a logistical burden.

Now add to that the 'transitional' XHTML model, which if done correctly means that same style information is included, html-style, in the attributes for each element. Now managing the look of a visual 'theme' is a logistical nightmare.

2.2. Global control of styles with PPWIZARD

One fairly elegant solution to this problem is to use pre-processing (PPWIZARD) to build the styles and code, and externalize the changeable and linked elements.

For example, here is a PPWIZARD declaration for the 'body' background color which will actually be used by a number of separate elements:

#define BodyBackgroundColor ACACBD ;; light gray-blue

PPWIZARD style variable declaration

This will then be used in my style sheet...

body {background-color: #<$BodyBackgroundColor>; margin: 0; padding: 0; }
td.header-style {border-bottom: 1px solid #<$BodyBackgroundColor>; }
[etc...]

PPWIZARD style variable usage 1 (CSS)

...and in my XHTML 'transitional' code:

<body bgcolor="#<$BodyBackgroundColor>">

PPWIZARD style variable usage 2 (XHTML)

Then, if I need to change this color I only need to do it in the header file which contains the original definition - as opposed to 3 (or 4, 5, and so on) places.

Please note that these are just a few examples that really don't demonstrate the full power of this tool. Please visit the PPWIZARD homepage for more info.

PPWIZARD - Page 2

<-- prev ] [ contents ]

Respond to this article: admin@tarafain.com

[top]