I can’t wait to try the app, though I do wish they would have chosen a name that is a bit more pronounceable.

Related posts:

1. Variables from outside PHP Just a quick link to the documentation describing how to access GET, POST and cookie variables from PHP: PHP: Variables from outside PHP – Manual:...
2. Cake on OS X with Headdress As I’ve been testing CakePHP I’ve run into an odd issue on my local OS X development environment. I couldn’t get the system configured to...
3. PHP 4 Error Handling Several days back, S Beam (I don’t know the person’s name) posted a tip to the eVolt list that presented a way to use PHP’s...

So, I decided to go out on a limb and make the change in my local version with the expectation that the file will be overwritten when I upgrade to the latest and greatest. So, I modified one line as indicated in Changeset 6325, commenting out line 269 of wp-settings.php, which contained validate_current_theme();.

I’m not positive that this will fix the issue, but all of the signs point in the right direction. As the fix is simple, and has been made to 2.4, I feel relatively confident that it is a safe move on my part. I’ll keep an eye on my site and post updates as needed.

Many thanks go out to the great folks constantly improving WordPress!

Update: Well, that theory didn’t last too long. When I hit the site this morning my theme had reset. Grrr.

Related posts:

1. Design, Feedback, WordPress and the Community Chris Messina has posted a great entry discussing the problems with open source design, with a focus on the new administrative interface for WordPress 2.4,...
2. WordPress Marketplace Matt, the creator of WordPress, is laying the groundwork for a theme marketplace, the beginning of which he shares in his post Marketplace Idea. The...
3. The New Ma.gnolia WordPress Plugin Barry Price, the creator of the Ma.gnolia plugin for WordPress has set its development aside and has encouraged me to adopt the project. As I...

The issue was my choice of document roots within Headdress. I had chosen the main directory (Dev/MySite/), but what I needed to choose was the webroot directory a couple of levels down (Dev/MySite/app/webroot/). That small change fixed the appearance and redirection issues. Easy as Cake!

Related posts:

1. MacGDBp: A Remote PHP Debugger for OS X Blue Static has released MacGDBp, “a native Cocoa application that allows Web developers to debug their PHP applications.” The tool utilizes the Xdebug PHP extension...
2. Chrome, Futura and Garbled Characters For some reason Chrome on this machine (iMac running 10.6) doesn’t render Futura, which I use for my headlines, replacing it with extended characters. The...
3. IE 5 on the Mac Ahh the joys of cross-browser coding. Truth be told, I actually enjoy the challenges of working through the differences between browsers and platforms. To a...

Related posts:

1. Setup a Local Mirror of your Blog – Mac OSX Setup a Local Mirror of your Blog – Mac OSX – This looks like a great project for me to try, right after I update...
2. Fixing the WordPress Theme Reset Problem As I posted in the WordPress forums I’ve run into an odd problem – WordPress occasionally resets my theme to the default version, which is...
3. Time for South-By South by Southwest officially starts tomorrow, though some of us are kicking things off a bit early, so I wanted to post a quick note...

Also, I have taken to calling this Evolved CSS, as the word “dynamic” is a bit too close to the old days of DHTML (Dynamic HTML) for my liking. Let’s jump right in shall we?

Files

Download this zip file if you would like to see a running example of this project and/or have a foundation for your experimentation.

Reduce Server Calls Without Sacrificing Ease of Maintenance and Organization

Web Developers follow many practices in their organization of style sheets. Some put everything in a single document, while others create separate style sheets for each of their major page types or templates. In addition, most seasoned professionals make use of a style sheet that resets all the browser rules (see Eric Meyer’s version) to make life easier.

And..?

Well, if you’re in the practice of using multiple style sheets, your sites may be taking longer to render than they need to, no matter how compressed your CSS may be. This is due to the fact that the browser needs to communicate with the server to snag each individual document, and most browsers only allow a few connections at a time. As noted on the Yahoo UI Blog, a lot of performance issues are directly related to front-end engineering. That’s actually a big win for those of us on the front-end as we don’t have to shell out for better servers or faster pipes. We can simply improve our code to make life easier for our users.

Their four-part article on reducing HTTP requests is lengthy, and may contain more details than you you’ll care about, so to break it down, here’s the key point in regards to this write-up: “Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.” In the context of Evolved CSS, we can make a large impact by using PHP/ASP/JSP et al to take all of our style sheets and combine them into a single document.

The code

For this example, let’s assume your site has the following set up:

• reset.css – Resets all styles to eliminate browser inconsistencies
• core.php – Includes the global layout rules (navigation, header, content area etc.) and text formatting
• scheme.php – The colors and images used for your site, this could easily be a script that provides the end-user the ability to choose their own colors.
• home.css – Home-page specific layout/formatting rules.
• archive.css – Layout and formatting rules for your archive pages.
• gallery.css – The rules used to display your photo gallery.
• print.css – Defines the layout for the page when it is sent to a printer.

You may have noticed the combination of PHP and CSS for those file types – you can easily use either as Part One demonstrated, but keep in mind that you should use flat CSS files over PHP where you are able to reduce the time required to process and render the final style sheet.

Section-Specific vs. the Kitchen Sink

Evolved CSS works well with the practice of using a single global style sheet to define your general layout and styles and section-specific style sheets to serve up rules that are unique to different areas of your site, as you can pass parameters to your main style sheet in order to define which style sheets to include. The Browser will still cache it. Here’s an example of how you could pass these parameters, in this case pulling in the styles for your gallery and a blue color scheme.

<link href="/css/style.php?include=gallery,blue-scheme" rel="stylesheet"
       type="text/css" media="screen" />

The file styles.php includes this code to take those parameters and pull in the appropriate style sheets:

/* -=-=-= Import Styles =-=-=- */
// Grab the parameters clean them up and add them to an array

$cssToInclude = split(',', makeSafe($_GET['include'])); 

/* -=-=-= Core Styles =-=-=- */
// Core will be included every time

include_once 'core.php';

/* -=-=-= Additional Styles =-=-=- */
// Check the array to determine which style sheets to include

if (in_array('home', $cssToInclude)) {
	include_once 'home.css';
}

if (in_array('gallery', $cssToInclude)) {
	include_once 'gallery.css';
}

if (in_array('archive', $cssToInclude)) {
	include_once 'archive.css';
}

That’s all You Need to Start

Well, this is a pretty short example, but I think it gets the poitn across and sheds some light on the possibilities available to you when you harness the power of server-side scripting languages to serve your CSS.

Note: This code is for example purposes only – it could be a lot cleaner, but at this point I am keeping it simple for explanation’s sake. I’m including the function makeSafe() to clean up the parameters. You can see the code in styles.php, contained in the source file package, if you are curious about it.

A Word on Media Types

This practice can only be used style sheets of the same media type – do not merge your screen style sheets with your print styles or you will get all sorts of ugliness.

What about priority and inheritance?

That’s a damn fine question! At this point, this structure works exactly the same as using multiple style sheets does. Most browsers will use the last rule defined, but you shouldn’t rely on that. As a good developer you should know where your conflicts may be and resolve them intelligently. The !important declaration can be used where needed to resolve specific conflicts.

Conclusion

Well, that about wraps it up for today kids, thanks for reading! Please leave your comments, suggestions and/or questions as I would love to expand the discussion. Also, I would love to hear your thoughts on what I should address next.

Future Evolved CSS Topics

• Let the server do the math – auto-generating widths for your grid
• Using Evolved CSS to improve debugging
• CSS Compression

Related posts:

1. Dynamic CSS A.K.A. CSS Variables Cascading Style Sheets are an amazing tool, having transformed Web Design as an industry and the Web as a communications medium. But in all of...
2. Reset Your Style Eric Meyer has updated his reset style sheet, outlining the reasons for his change in the post Resetting Again. The modifications, while small, are logical...
3. Style Guides Using Sass @extend via @pengwynn. This is a smart use of Sass to define a separate style guide file for key presentation elements like fonts and colors that...

Hello…. JavaScript Can Do That Already!

Yeah, client-side scripting can handle most of these requirements, but I don’t want to rely on a technology for my presentation that can be disabled by the user or their corporate IT department and frankly the JS support of mobile devices is poor at best. Enter server-side languages, which cover all of these bases without impacting the program or device rendering the site.

What I’ll Cover

• The Initial Setup
• Serving a Dynamic (PHP) File as CSS
• Useful Variables and Practices
• Implementing Browser Detection to Avoid CSS Hacks
• Putting it All Together
• Too Much Considered Harmful
• Acknowledgments and Sources
• Your Turn

The Setup

This article assumes that you have a Web server at your disposal that is running one of the aforementioned scripting languages and that you have a basic understanding of scripting in that language and know a bit about CSS. For the purpose of this write up I’ll be using PHP, but I have implemented versions of this system on production sites running JSP, and there’s no reason the same couldn’t be done with Ruby on Rails, Python, ASP or any other server-side solution.

This system can be as detailed or relaxed as you’d like, so I’m going to keep this write-up relatively simple with a few interesting bits thrown in. If it proves to be an interesting subject I’ll write a follow-up showing advanced usage. Let’s hit it!

Serving a Dynamic (PHP) File as CSS

In your editor of choice create a new PHP file. I’m calling mine styles.php. Paste this line at the very top of the document:

	<?php header('Content-type: text/css'); ?>

This tells the server that the page should be sent to the browser as a CSS document, so the file won’t need the .css extension. All of our work will be done in this bad boy. So, on to the next step.

Useful Variables and Practices

So, we have a PHP file that has a serious personality disorder, thinking that it’s a style sheet. What the hell are we going to do with it? Well, we’re going to set a few key variables that will make life much easier. Specifically, we’ll set variables for common measurements (columns, containers and the space between) and some colors from the site’s palette:

$gutter           = '10px';   /* Used to separate visual blocks */
$pageWidth        = '1000px'; /* Width of the Web page */
$pageWidthPadded  = '980px';  /* $pageWidth minus padding ($gutter x 2) */

$col1             = '800px';  /* Width of the main content area */
$col1Padded       = '780px';  /* $col1 minus padding ($gutter x 2) */
$col2             = '180px';  /* Width of the sidebar area */
$col2Padded       = '160px';  /* $col2 minus padding ($gutter x 2) */

$lightGray        = '#e5e5e5';
$charcoal         = '#464646';
$orange           = '#f60';
$darkBlue         = '#0059b2';

The width variables will prove useful in creating a site as they guarantee consistent presentation from page to page and template to template. This model can easily be extended for multiple column widths, so if you want to subdivide Column 1, you only have to set it up once, creating the variables ($col1A, $col1B etc.) and setting their values to the appropriate widths. For you folks who love them grids, this should make life pretty easy.

Setting up color variables simplifies the initial site build-out and future revisions. When you return to the style sheet six months from now, you’ll notice $darkBlue is much easier to remember than #0059b2.

So, now that we have width and colors, it’s simple to use these new variables in the style sheet, all you need to do is use PHP’s echo shortcut (<?= 'print this' ?>):

#Wrapper {
	background-color: <?= $lightGray ?>;
	border 1px dotted <?= $darkBlue ?>;
	margin: <?= $gutter ?>;
	width: <?= $pageWidth ?>;
}

Advanced: I’ve begun to separate the measurement value (px, em, pt) from the actual numerical value so I can harness the power of PHP to do my math for me. That’ll be the subject of a future write-up.

Implementing Browser Detection to Avoid CSS Hacks

I’ve used a couple of different packages in the past; at the moment I use BrowsCap, which covers these needs nicely, but use whatever fits your needs best. Place this code at the top of styles.php, after the PHP header line:

require_once('Browscap/Browscap.php');

// Create a new Browscap object (loads or creates the cache)
$bc = new Browscap('Browscap/cache/');

// Get information about the current browser's user agent
$current_browser = $bc->getBrowser(null,true);
$browser_platform	= $current_browser['Platform'];
$browser_name		= $current_browser['Browser'];
$browser_ver_major	= $current_browser['MajorVer'];
$browser_ver_minor	= $current_browser['MinorVer'];
$browser_ver_full	= $current_browser['Version'];	

$is_ie6 = false;
$is_ie7 = false;
$is_safari = false;
$is_ff = false;

if ($browser_name == 'IE' && $browser_ver_major == 6) {
  $is_ie6 = true;
} elseif ($browser_name == 'IE' && $browser_ver_major == 7) {
  $is_ie7 = true;
} elseif ($browser_name == 'Firefox') {
  $is_ff = true;
} elseif ($browser_name == 'Safari') {
	$is_safari = true;
}

So we now have a few variables that will allow us to quickly determine whether the user’s browser is IE 6, IE 7, Firefox (any version) or Safari (any version). You can extend this model to fit your specific audience and needs.

Putting it All Together

Sweet, now we can rock the styles all dynamic-like! Here are a couple of examples for you to nibble on:

body {
<? if($browser_platform == 'MacOSX') { ?>
  font: .85em/1.4 normal "Lucida Grande", Verdana, sans-serif;
<? } else { ?>
  font: .75em/1.4 normal "Lucida Grande", Verdana, sans-serif;
<? } ?>

That block outputs a larger font size for folks who are on a Mac compared to folks on PCs or other devices.
The next one modifies the value of a top margin, serving up 5px for IE 6, and zero for all other browsers.

#NavWrapper1  {
  display: block;
  height: 18px;
  <? if ($is_ie6) { ?>
    margin-top: 0;
  <? } else { ?>
    margin-top: 5px;
  <? } ?>
  margin: <?= $gutter ?>;
  width: <?= $pageWidthPadded ?>;
}

Advanced: This method can be used to detect alternate browsers as well. So, you could detect a mobile browser and serve up a separate style sheet. Or if you detect a screen reader you could serve up a style sheet with proper aural rules defined.

That’s it, we’re rolling with dynamic CSS, harnessing the power of both PHP and Cascading Style Sheets. There is a lot more that can be done, but I hope this opened a few avenues for experimentation on your future projects.

In Moderation: Too Much Considered Harmful

It would be really easy to overuse this method. Do not try to replace proper use of grouping and the cascade with PHP. You won’t gain anything but frustration and larger style sheets. Take the time to think through the variables that you are going to create to make sure they make sense and are not simply recreating existing CSS functionality.

Acknowledgments

I am by no means the only person to think of this, there are many others who have covered the topic on their sites, but I felt that there were a few components missing, so here we are. I hope I added to your toolbox. It is also very important to note that there are some great folks with whom I’ve worked who have expanded on the concept and helped me flesh it out to be a viable and reusable tool in the Real World ™, most notably the inestimable Leesa of Red Velvet Cafe.

Your Turn

I look forward to your feedback and questions, so please leave a comment.

Related posts:

1. Style Evolution – Dynamic CSS Part 2 Please note that this assumes you have read Part One of the series. Also, I have taken to calling this Evolved CSS, as the word...
2. Variables from outside PHP Just a quick link to the documentation describing how to access GET, POST and cookie variables from PHP: PHP: Variables from outside PHP – Manual:...
3. Reset Your Style Eric Meyer has updated his reset style sheet, outlining the reasons for his change in the post Resetting Again. The modifications, while small, are logical...

Related posts:

1. Libra iTunes library manager Libra iTunes library manager“creates multiple iTunes libraries and switches between them, so many users can maintain their digital music collections on the same computer.” Via...
2. Khan Academy "The Khan Academy is a not-for-profit 501(c)(3) with the mission of providing a world-class education to anyone, anywhere. Despite being the work of one man,...
3. Open Clip Art Library The Open Clip Art Library “aims to create an archive of user contributed clip art that can be freely used.”...

Now, this isn’t to say that this activeCollab a great solution for everyone – hell, it may not even be good for me (I haven’t tested it yet). BaseCamp is great at what it does – the raves from the community, including many people that I highly respect, shore up the reputation of BaseCamp, and its creators at 37Signals – but what I want out of a project management package or service doesn’t match up to what I’m willing to pay at the moment. Now, this could very easily change were I to create a sizable Web app and needed to work in parallel with a team, but I don’t see that in my near future.

I sincerely doubt that activeCollab will redefine the market, or impact BaseCamp. While they share part of a market, BaseCamp’s service model eliminates the need to install and maintain software giving it a very real edge when compared with activeCollab, especially for folks who do not have the time or inclination to fiddle with something that doesn’t directly contribute to the project at hand.

It’s all about the triangle: time vs. money vs. features.

Related posts:

1. Party of One or a Movement? Movements, from my experience, wouldn’t happen without a whole lot of people moving them forward. If there is only one person responsible, it’s not a...
2. Palm Pilot Won’t Sync My Palm m500 stopped syncing yesterday much to my consternation. I tried updating the sync software and Palm Desktop neither of which worked. I tried...
3. Virtual PC set free – further thoughts After my initial post about Virtual PC and subsequent mailings to a couple of Web dev lists that I am subscribed to, I had a...

Related posts:

1. WordPress Database Error I’ve been running into problems ever since I upgraded WordPress to 2.x (not sure if it was 2.0 or 2.1) with new posts. The first...
2. Sixth on Sixth Having been tagged by Ryan (who was tagged by Doug), and being in a participatory mood, here’s the sixth photo from the sixth page of...
3. Dynamic CSS A.K.A. CSS Variables Cascading Style Sheets are an amazing tool, having transformed Web Design as an industry and the Web as a communications medium. But in all of...

Related posts:

1. MySQL MySQL is a technology with which I have dabbled for years but until now I have not had the ability to dive into it. I...
2. An Even Better Way to Build Ruby, Rails, Lighttpd, and MySQL on Tiger An Even Better Way to Build Ruby, Rails, Lighttpd, and MySQL on Tiger | Ruby on Rails for Newbies...
3. Interesting Things to Know about MySQL Interesting Things to Know about MySQL...

Related posts:

1. Software for a Switcher Update I’ve published a new list of software: My OS X Software Setup In the not-so-distant future I’ll pick up I’ve just purchased a MacBook...
2. MySQL MySQL is a technology with which I have dabbled for years but until now I have not had the ability to dive into it. I...
3. Introduction to Databases Introduction to Databases – Digital Web Magazine A great introduction for people who want a big picture view of databases and their purpose on the...

Related posts:

1. An Even Better Way to Build Ruby, Rails, Lighttpd, and MySQL on Tiger An Even Better Way to Build Ruby, Rails, Lighttpd, and MySQL on Tiger | Ruby on Rails for Newbies...
2. Top 12 Ruby on Rails Tutorials Top 12 Ruby on Rails Tutorials...
3. The Enkoder Plugin for Ruby on Rails The Hivelogic Narrative: Articles: The Enkoder Plugin for Ruby on Rails...

Related posts:

1. MIR image replacement Wow, another image replacement method! Malarkey’s image replacement (MIR) looks to be very easy, and effective. It has a simple purpose, and does it well....
2. Photoshop Color Replacement Tool Photoshop Color Replacement Tool – Veerle’s blog...
3. iIR: img Image Replacement iIR: img Image Replacement appears to be a great way to provide images for both the on-screen and print versions of a site, without adding...

Related posts:

1. Modifying DreamWeaver’s Code Coloring Macromedia – Dreamweaver TechNote : Changing and adding file extensions recognized by Dreamweaver MX Adding this to the site to ensure I can easily find...
2. Change File Associations in OS X Update: I’ve revised the directions slightly to show the difference between 10.3 & 10.4, plus I’ve added a screen shot. Just a quick note to...
3. Quickly Open an OS X App from Command Line Quickly open an OS X app from the command line: open -a Application Name...

Related posts:

1. Recent Links: September 07 to September 14 Here are the most recent bookmarks that I have saved to Ma.gnolia. Black Box Voting – America’s Elections Watchdog Group We want citizens out in...
2. centricle : css filters (css hacks) A great resource of information concerning various CSS hacks is the “Will the browser apply the rule(s)?” chart on the css filters (css hacks) page...
3. PHP 4 Error Handling Several days back, S Beam (I don’t know the person’s name) posted a tip to the eVolt list that presented a way to use PHP’s...

Related posts:

1. Favourite Favicons Check out Favourite Favicons from Delta Tango Bravo to see some great examples of the smallest representation of a site. Also, note the use of...
2. Favatars Paul James presents an intriguing, and quite usable idea to provide ubiquitous, decentralized avatars (graphic representations of a person, usually seen in Web forums, chat...
3. Hold ‘Em Tips Jeff Croft provides some great Hold ‘Em Tips for Beginners, which for the most part mesh quite well with what I have learned from the...

Even cooler is the use of a PHP array to provide the flexibility of using different style sheets per page. I’ve needed this functionality in past projects, but hadn’t solved the issue anywhere near as elegantly.

Related posts:

1. Style Evolution – Dynamic CSS Part 2 Please note that this assumes you have read Part One of the series. Also, I have taken to calling this Evolved CSS, as the word...
2. CSS – Auto-height and margin-collapsing Minz Meyer has been kind enough to provide a great article discussing margin-collapsing in CSS. This can be a confusing concept for people learning CSS,...
3. Disabling Google’s Autolink Functionality A recent post by Jeffrey Zeldman alerted me to the fact that Google’s new IE toolbar inserts links into Web sites. While the idea sounds...

Related posts:

1. Privacy, Facebook and 170 Options Facebook’s Privacy Policy is 5,830 words long; the United States Constitution, without any of its amendments, is a concise 4,543 words. Price of Facebook Privacy?...
2. Catching up to INDUCE As I have been slammed with work and personal events, I haven’t kept my site up to date with news of the INDUCE Act. So,...
3. The Excessively Annotated RIAA Letter on the INDUCE Act Ernest Miller has posted The Excessively Annotated RIAA Letter on the INDUCE Act (IICA), a followup to his previous work: The Obsessively Annotated Introduction to...

Related posts:

1. Happy Birthday Mr. Cohen Image from The Leonard Cohen Files Leonard Cohen, one of the best singer/songwriters celebrates his 70th birthday today. Come late October, he will release a...
2. The One True Layout The One True Layout – I’m noting this so I can come back and check it out in full and hopefully leave my notes in...
3. JavaScript says “Moo” moo.fx is a nice, compact JavaScript effects library, which appears to be a great alternative to some of the larger libraries like script.aculo.us. Check out...

ob_end_flush(); // This should be called at start

// Load all data and process it ready for looping

// Do some preliminary calculations, such as:
$totalloops = 38;
$percent_per_loop = 100 / $totalloops;
$prev_percent = 0;

// print html/css for the part above the progress bar
// as well as possible background of the actual progress bar
// in such a way that the images for the progress bar (coming next)
// align themselves nicely
// (This example fits 100 images next to each other, each
// representing 1 percent of progress.

// Start looping:
for($i=1;$i< =$totalloops;$i++) {

    // do stuff
    // echo progress if at least an advance of 1 percent
    // occured since last loop
    $percent_now = round($i * $percent_per_loop);
    if($percent_now != $percent_last) {
        $difference = $percent_now - $percent_last;
        for($j=1;$j<=$difference;$j++) {
            echo '';
            }
       $percent_last = $percent_now;
       flush(); // Push the new data to the browser;
        }
}

// In the end print necessary code to the end of the html.

Juha notes, “on some occasions, the webserver, proxy or the client browser can buffer data no matter what you do, so this will not work 100% for everyone at every situation”. Still, this is a great idea, and one sorely needed for some major PHP apps.

Update: Juha has posted a nice demo of the script (no longer live), which “loops the sleep(1)-command for 14 times”. He also added a counter that displays the percentage that has been completed. Juha mentioned that he hopes to find the time to clean it up and implement the counter as a package for use in other scripts and projects. That would be great to see!

Update 2: Juha has posted a zipped up collection (see update 3 below) of the PHP source files and associated images.

Update 3: It appears that Juha’s site is down. I don’t have a demo to point to, but it appears someone else posted the script, which you can find here.

Related posts:

1. Austin Blogs Wired spreads word (Where The Bloggers Live: Austin?) of a new report from Scarborough Research stating that Austin has the “highest percentage of residents who...
2. Cake on OS X with Headdress As I’ve been testing CakePHP I’ve run into an odd issue on my local OS X development environment. I couldn’t get the system configured to...
3. Progress isn’t made by early risers “Progress isn’t made by early risers. It’s made by lazy men trying to find easier ways to do something.” Robert Heinlein...