To understand how PHP-SmartCSS could help you in you developing work, I will start with an overview, giving you a concrete example of PHP-SmartCSS usage. If you need to have more accurate tecnical information about how to install PHP-SmartCSS, about its requirements, or about the PHP-SmartCSS syntax, please refer to the links below. Don't forget PHP-SmartCSS requires PEAR class Net_UserAgent_Detect (please refer to this HOWTO ) dependency!
Just let me give you an example...
Let's suppose you are a web-developer, and you are trying to set up a marvelous web site for your most important customer ever. Well, it looks like your default browser displays the whole site properly. You made a very good job! PHP back-end and front-end seem to do exactly what they are supposed to do, there's no SQL syntax error, no folder permission problem... You just need to do one thing more: a cross-browsers test.While performing it, you immediately notice there's one big problem: the beautiful pop-up menu you placed in the middle of the page within an hidden <div></div> tag, simply changes it's own position when you try to display it in Firefox, in Internet Explorer, in Opera, in Safari...
Well, don't panic, let's try to fix it. After a considerable amount of time, you realize there's simply no way to fix it at all. Now, you are starting to think there's no way out: you should change the way your beautiful menu looks like, but you think there must be a way to solve this small problem in an easy and reliable way.
Well, you're right! It's the PHP-SmartCSS way!
The PHP-SmartCSS way
What you need to do is simply to install PHP-SmartCSS, and the to replace your previously misunderstood CSS code:#mymenu
{
margin: 10px 0px 0px 20px;
}
with the following
#mymenu
{
margin: 10px 0px 0px 20px;
ie-margin: -10px 0px 0px 20px;
opera-margin: 0px 0px 0px 20px;
}
Et voilà! Now everything looks good!
Going deeper with your cross-browsers test, you realize Internet Explorer 7 and Internet Explorer 6 does not work properly with the ie-specific coding, as they simply need to get the standard attributes. Even Opera 9 does not seems to need a special margin attribute. Safari, on the other hand, needs a specific code for padding attribute. So, you change your style sheet as follows:
#mymenu
{
margin: 10px 0px 0px 20px;
ie:<6-margin: -10px 0px 0px 20px;
opera:<9-margin: 0px 0px 0px 20px;
safari-padding-top: 10px;
}
This should simply be enought, but it seems like you are not a very careful or lucky developer... You decided to use a lot of transparency effects and coloured icons in your back-end, and you obviously used transparent *.png images to realize them. Now, you are starting to worry, again, because you know Internet Explorer do supports transparent 24bits *.png images only in its latest release (version 7). How could you be so uncareful? CSS attributes like the following will not work correctly, for instance, in Internet Explorer 6, showing you an image with a light grey background, instead of a transparent background:
#myicon
{
background: #0000CC url("images/alpha.png");
}
But, when you open Internet Explorer 6, you see everything seems all right with your web site: you are now looking for a light-blue background with a nice transparent icon above it. PERFECT! How is this possile? Well, this is possible because of PHP-SmartCSS: it simply did a so called "pngfix" for you, involving no javascripts at all and requiring no more CSS coding.
Now, I think it's time to learn how to install PHP-SmartCSS, dont' you?