Dynamic CSS with PHP - Environment Aware Style Sheets
(Page 3 of 4 )
More than once I've run into situations where I wish style sheets supported simple arithmetic. Suppose I want my style sheet to set the height of a text div 100 pixels less than the viewport's height because of some graphical banner on the page. If I know I have a window of a specific size, I could do the math and hardcode the numbers by hand. However, that isn't always the case.
Previously I would have scrounged the web searching for some JavaScript code to detect the viewport's height and then made my modifications to readjust the element's properties once the page has loaded:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> <head> <title>Sample HTML</title> <link rel="stylesheet" href="styles.css" type="text/css" /> <script language="JavaScript" type="text/javascript"> <!-- function sizeAdjustment() { var myHeight = 0;
The JavaScript calculates the height and constructs a link to the style sheet that passes along the value. The style sheet can read the incoming values and adjust itself before being sent to the browser.
Ingenious... but definitely an ugly hack. Still though it illustrates how JavaScript can communicate back to PHP on the server and how PHP can tailor a unique style sheet to fit a given situation.
/ 57 