← Home

Some code for a quick start ...

Basically, there is a CssSheet class, that extends Pear::HTML_CSS, but adds CssElement objects for each CSS element to have a object-oriented design from the ground up (in HTML_CSS, the elements are stored as arrays).

The CssElement class should possibly better be named "CssRule", because that's the term defined by W3C.

CssElements hold different types of properties, all of them instances of the (base) class CssProperty or one of its extending classes (like CssUnitProperty, CssBoxProperty, CssBorderProperty, ...). There classes for different property types to distinguish functionality between such properties like border in contrast to border-width or padding-left.

Together, CssSheet, CssElement and CssProperty (and subclasses) should build up the basic representation of the CSS data, we read from a file.

A CSS Sheet can be read and output like this (that's Pear::HTML_CSS stuff so far).

require_once ('HTML/CSS.php');
require_once ('CssParser/CssSheet.php');
$filename = 'test.css';
$css = new CssSheet (array ('filename' => "$dirname/$filename"));
echo "<pre>" . $css->toString () . "</pre>";

Now, there are two more classes.

As a strategy handler CssBoxModelFix can be used to apply different strategies to the CSS Sheet. Currently, there is HtmlBodySelectorStrategy.

We can handle the CSS Sheet to the CssBoxModelFix instance. CssBoxModelFix "inspects" each elements dimension (width/height), wheather there's a box model problem or not. If so, it applies the selected strategies to the element. HtmlBodySelectorStrategy adds padding and border to the width/height property of the element and inserts a new rule (element) with the html>body [class/elementname] to the CssSheet, having the old width/height values.

Thus, the lines:

require_once ('CssFixes/CssBoxModelFix.php');
$fix = new CssBoxModelFix ();
$fix->apply ($css, 'HtmlBodySelector');

... will apply our HtmlBodySelectorStrategy patch to the CssSheet object, that now can be saved and used.

I.e., we could have the following HTML and CSS code:

test.htm

<html>
<head>
	<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
	<div id="box1">Box1</div>
	<div id="box2">Box2</div>
</body>
</html>

and test.css:

#box1 {
	height: 100px;
	width: 100;
	border: 20px solid green;
	background-color: yellow;
}
#box2 {
	height: 100;
	width: 100px;
	padding: 20 20px;
	background-color: yellow;
}
div {
	margin: 10px;
}

This would look in Firefox and IE 6.0 like the following:

Now running the script on test.css would result in the following, hacked CSS code:

test_hacked.css:

#box1 {
	height: 140px;
	width: 140px;
	border: 20px solid green;
	background-color: yellow;
}
#box2 {
	height: 140px;
	width: 140px;
	padding: 20px 20px 20px 20px;
	background-color: yellow;
}
div {
	margin: 10px;
}
html>body #box1 {
	width: 100;
	height: 100;
}
html>body #box2 {
	width: 100;
	height: 100;
}

... looking like this in Firefox / IE 6.0:

Exactly the same. Mission complete! ... errrrm ... for now at least ;)