Some code for a quick start ...
posted: August 13th, 2004 · by: Sven
So, here are some classes. Looks like it works. “Somebody” should probably add some unit tests though ;)
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: 4656e1088a7f230fd7aeaa64855fffe7
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 ;)
chat said March 31st, 2011 at 08:29 PM ¶
This fixed the issue on my code:
div { margin: 10px; } html>body #box1 { width: 100; height: 100; } html>body #box2 { width: 100; height: 100;
Okey oyunu said May 12th, 2011 at 04:35 PM ¶
This is nice post. Thanks. Tüm dünya artik okey oyunu oynuyor. Yillardir bir çok oyun programi olmasina ragmen, içlerinden en güzeli olarak nitelendirebilecegimiz tek bir site göze çarpmaktadir. Diger tüm okey oyunu programlarinin aksine ücretsiz olmasi ve 3 boyutlu olarak hizmet vermesi mükemmel bir gelismedir. Sizlerde www.okey-oyunu.com adresinden bu essiz okey oyununu indirebilirsiniz. Kullanimi çok basit ve Türkçe dil seçenegi ile kolaylikla oyuna baslayabilirsiniz. Ister kendi ülkenizden, isterseniz dünyanin tüm farkli bölgelerinden dilediginiz oyun odalarini seçerek, oyuna hemen baslayabilirsiniz. Okey oyunu oynamak için artik arkadas bile aramaniza gerek kalmadan, bilgisayarinizdan 100 binlerce üye ile online olarak okey oyununu oynamanin zevkine varabilirsiniz.