CSS, JQuery, PHP and Caching: Best practices?

August 20, 2008 9:29 AM

CSS, JQuery, PHP and Caching: What are the best practices for creating dynamic CSS with JQuery and PHP? Examples inside.

I'm using PHP to dynamically create links and their associated CSS. I'm doing it dynamically because the number and positioning of these links is dependent on the selected month.

PHP inserts these CSS declarations into the HEAD tag. This seems to work fine on Firefox, but IE apparently caches the HEAD tag. This is a problem when navigating to pages for other months since the number of days will change.

Since I'm also using JQuery for the first time in this project, I wonder if I wouldn't be better off setting the CSS with that, rather than with PHP. The problem with this would be that I'm now mixing math and functions between the PHP sections of the site and the javascript sections. Is there a better way?

An example can be seen here. Source code for the same is available here.

The hover links over each day in each graph are created with a PHP loop based on the number of days in the month. The CSS to position them properly above each day is also created with a PHP loop.

The problem arises if a user selects an old month with a different number of days. Since IE caches the head tag the user only sees 20 day hover links, rather than 30 or 31.

Online documentation, tutorials or book references are very much welcome. Also, if I'm just completely going in the wrong direction please let me know.

posted by odinsdream to computers & internet (7 comments total)

Neither IE nor any other browser I'm aware of caches pages in the piecemeal way you're describing (caching just the contents of the HEAD element). Browsers will cache external resource files (CSS, JavaScript, etc.) in many cases, but as for the contents of the actual HTML page, it's either cached as a whole or not.

So assuming you see the page change, you can be sure the browser also got the changes in the HEAD element. However, if you're doing some Ajax tricks to stick new content on the page without refreshing it as a whole, then you are correct that the browser isn't going to update the HEAD element. I think we may need a little more detail about what you're doing.
posted by letourneau at 10:29 AM on August 20, 2008

You should check out the jquery mailing list. The list is very active, and there was recently a best practices thread.
posted by hooray at 10:35 AM on August 20, 2008

I doubt that it is a best practice, but I've had a similar problem with IE hanging
onto old information a little too tightly and uncritically.
I solved it by tossing in some unique garbage in a harmless or unexamined place,
like a text string representing the current second in the unix epoch.
Naturally, I assigned blame to IE in a comment nearby.
posted by the Real Dan at 10:47 AM on August 20, 2008

I don't know that there's a single "best practice" that answers when to use PHP vs. Javascript. I tackle this issue at work all the time—I'm the frontend (Javascript[jQuery]/CSS/HTML) guy, and I work closely with the backend (PHP/MySQL/server) guy on rich web apps. So we answer the "Who handles X?" question several times a day, and always on a case-by-case basis (though it's rare that we need to give it more than a moment's thought). Here are some of our guiding principles:

1.a. Any page should work well with JS and CSS off (a.k.a. the 10-second accessibility test). So the HTML source (i.e. the output of the PHP script) should contain as much meaningful stuff as possible. This basically means that some things always need to be handled by PHP, period, even if Javascript would be easier or feel "smarter."

1.b. The flipside to the previous rule is that the HTML (as delivered by the server/PHP) should contain as little non-meaningful content as possible. Obviously any realistic webpage will have a bunch of semantically meaningless tags for the sake of design. But if a given element is specific to JS functionality, it probably ought to be created with JS (for purposes of web standards, but also just so you can easily tweak that element or its role if/when you change the way your JS works).

2.a. Some things that PHP probably ought to handle according to rule 1—I'm thinking in particular of sorting database records on the fly—create non-negligible overhead for the server. It's often not enough to really matter, but for a key page on a popular site you don't want to be doing big sorts or complicated queries again and again. So these are places we outsource that overhead to the client by building the functionality in JS instead.

2.b. And the flipside: Sometimes the JS is what creates the overhead—I'm thinking here of complicated conditional DOM transformations and/or things that affect the page in a visually significant way—and your users end up seeing flashes of ugly while they wait for the JS to do its thing on page load. So sometimes in those places where we handle the HTML structure in the PHP even though it's Javascript specific.

All that said, the short answer—and I realize I'm skipping the part of your question about the IE cache (because who ever knows with IE?), but this will solve that problem—is that I would probably handle adding those mouseover divs with jQuery (rule 1.b. applies, rule 2.b. doesn't). Something like:

for(i=1;i<=monthDays;i++) $('#graph'+graphNumber+'_container').append('<a class="daylink" id="'+monthName+i+'"></a>');

posted by rafter at 12:06 PM on August 20, 2008

Neither IE nor any other browser I'm aware of caches pages in the piecemeal way you're describing (caching just the contents of the HEAD element). Browsers will cache external resource files (CSS, JavaScript, etc.) in many cases, but as for the contents of the actual HTML page, it's either cached as a whole or not.

That's exactly what I thought until I tested the page in IE. Perhaps something else is going on, but the scenario was:

Load the page, get 18 hover links because it was the 18th day of this month, so the PHP loop ran 18 times. Each of those 18 links were positioned with CSS, also created with a PHP loop and inserted in the HEAD tag. View source on the generated page to see what I mean, except today you'll see 20 CSS declarations.

Then, I loaded a page with 31 days and when I viewed source I still only saw 18 CSS declarations in IE. Loading the exact same page after closing and opening IE and clearing cache, and I get the proper 31 CSS declarations.
posted by odinsdream at 12:20 PM on August 20, 2008

So this is really what happened?

1. You loaded the 18-day page. Viewing source showed 18 CSS declarations in the HEAD, and 18 links in the BODY.
2. You navigated to the 30-day page. Viewing source showed the 18 CSS declarations from step (1) in the HEAD, but 30 new links in the BODY.
3. You closed the browser, re-opened it, and cleared your cache.
4. You navigated to the same 30-day page as in step (2). Viewing source showed 30 CSS declarations in the HEAD and 30 links in the BODY.

If this is true, I have to say it's pretty astonishing. You're sure your $_SESSION variables are correct throughout all this? Something in the PHP being crossed-up between the part that generates the CSS and the part that generates the graphs is the only explanation I can think of that's at all consistent with this behavior, in my experience. Perhaps the session variables are getting set inconsistently in the navigation between steps (1) and (2), but step (3) resets things back to a good state. Just a shot in the dark...
posted by letourneau at 1:54 PM on August 20, 2008

letourneau; that's the exact scenario. I'll re-examine the SESSION variables since obviously something is going wrong. Thanks!
posted by odinsdream at 6:29 AM on August 21, 2008