Can you imagine running a website with hundreds of pages off pure, static, html? Without a single bit of server-side code? No PHP, Perl, Ruby, or even SHTML? What about a site with hundreds of thousands of pages? or millions? Of course not. So why do you put up with static CSS files then?!
Not only is Web 2.0 not just about looks, it’s also originally about clean code and putting the power of design in the hands of the coder. We have no idea why it’s taken so long for this to get through, but for some reason, people still aren’t getting it. Dynamic web languages exist for a reason. Use them. Everywhere.
It’s not difficult, as a matter of fact, it’s down-right easy. It let’s you work magic with your stylesheets, makes changing settings and certain aspects down-right simple, and above all, puts you in complete control of how your data display’s on end-user PCs.
The most important thing to realize is, CSS files don’t need to have the .css extension. It’s one of those painfully obvious things that everyone knows but no one seems to get. All your HTML has to do is contain a reference that is defined as a CSS file that links to something. Anything. For instance:
<link media="Screen" href="http://neosmart.net/dynamicCSS.php" type="text/css" rel="Stylesheet" />
At that point, you’re set. The PHP file can contain anything, even plain CSS, but we’ve done that for a reason – obviously we intend to make use of the PHP file. There are many things that you can do, but a (very) good idea is to first declare the content MIME type properly in “dynamicCSS.php”
<?php header("Content-type: text/css"); ?>
It’s that simple. Now you’re set, and you can put whatever you want after that in the PHP file. Here are some ideas/examples to get you started.
- Minimizing Clutter. Minimizing Overhead. Minimizing Headaches.
Shaun Inman’s rather scary-looking site gained attention for it’s 33,306 (366*91) CSS files – one for each day of the year. With each passing “day” file, the page “fades” with text and background hues blending together towards the lighter parts of the spectrum. With PHP CSS files, it couldn’t be easier. Simply pass along the date of the post to the “CSS” file as such from the HTML side:<link media="Screen" href="http://neosmart.net/dynamicCSS.php?date=%date%" type="text/css" rel="Stylesheet" />
Leaving the rest to the php, where something as simple as:<?php function dateDiff($format, $begin, $end) { $p1=explode($format, $begin); $p2=explode($format, $end); $start=gregoriantojd($p1[0], $p1[1], $p1[2]); $stop=gregoriantojd($p2[0], $p2[1], $p2[2]); return $stop - $start; } $days = dateDiff($date, date(m-d-y)); $color = somehexafunc($days); ?>Much easier! - In-Place Browser Identification
No need to resort to JavaScript hacks to get pages to show the same across browsers. It’s unreliable; use PHP instead! This script was intended to be used in a PHP file to call different CSS files depending on what browser was picked. It identifies the browser and let’s you take action accordingly – all Server-Side. But with dynamic CSS, you suddenly can do a lot more. You don’t need a whole different CSS file for a different browser — a one-liner php script will do the trick. - Defining commonly-used elements as variables.
This way you can easily make changes at ease without having to ctrl+h your entire document. Had a mood change? PHP-CSS is the answer! - Randomizing elements of stylesheets.
PHP has long been used to randomize parts of HTML pages, and even randomizing the CSS used. But now you can have randomly-generated colors for headers without breaking the W3C standards (by using HTML for display instead of CSS), and switching background images/patterns without using JavaScript or plain, old <img> tags. - User-Specific elements in PHP.
Imagine a forum or blog where members can create customized themes simply by defining their favorite colors and having it stored in a database. CSS files (with a decent SQL library like ezSQL) can then grab the required info on-the-fly from the database, and apply the settings without resorting to crude HTML bgcolor tags and tables (yuck!). Images too – it’s that easy.
It’s a whole new world waiting to be explored. It’s something so simple yet so overlooked – it’ll make you rethink the design of your entire site. It opens hundreds of possibilities for completely customized user experiences with minimal headache, maximum compliance, cleanest code, and fastest implementation times.
Of course this isn’t limited to PHP. Ruby is the “in” term today, and yes, this would work just as well with Ruby (obviously with the necessary language changes) and with real-coder languages such as C# and Perl too. Anything can be done, it’ll make the simplest of things a lot easier and cleaner (think faster-loading websites!) and the most challenging of jobs (read: 33,306 CSS Files!?) quite a lot more doable. Go for it!
One possible problem with this approach is that it’s mixing the roles of programmer and designer. If you look at the recent effort in programming world, especially web development the idea is to separate the design from code as much as possible.
This might not seem like a problem to anyone right now. But imagine a website that has been coded by a coder/designer and 3 people overtake the project. If we use the dynamic CSS to the point that designers need the help of programmers to modify CSS files that means trouble 🙂
However, when used as described for trivial tasks, this will save a lot of time and bandwith!
That’s hardly fair – if there is a programmer/designer working on it now, then the company/organization/site would be at fault for replacing him with a pure design, pure code team.
The *real* trend at the moment is seperating _display_ from _content_ and this doesn’t violate any of that. This actually takes it to the next level. This PHP code isn’t content, it’s control!
I think if you view this kind of idea as an extension of CSS rather than mixing up of the MVC then it’s nicer. It would be useful if there were some way to limit the functionaity that was availabe to the designers so as to reduce the percived learning curve.
That’s certainly a good idea: some kind of framework/template system with all the PHP work already done – just need to fill in the blanks (or use a wizard).
😀
This idea is fairly old. The only reason most people dont use it is that CSS has great degree of flexibility already.
One of my pet peeves with CSS has been that it doesn’t allow variables or true inheritence. Of course these can be achieved as you described, by using PHP. But why don’t we just update the CSS standards? Let’s turn CSS into it’s own language!!!
Without a doubt it’s the way to go.
I setup all my php apps to to output all the neccesary js and css for the website. I use the MVC design pattern and the app gets all the files in the css and javascipt folders and combine them into one css file and one js file which are called using an html tag.
These single files and the web page are then minimized by YUI compressor, obfuscated by YUI and gzipped before being sent out.
Both returned files get page specific css and JavaScript by getting all the views in the folder css/pageName or js/pageName.
As you can see this solves the problem of designers having problems adding their js and styles because they just have to know to drop them in the appropriate folder.
The only js and css that is in the page is dynamically generated css/js for js/css/php interaction.
Being able to do it this way it increases page load time, organization of files, and decreases file requests on the server. Finally the output pages are cached for even more performance!
Now why would anyone not want to do this?
How can i get it to use?