Make CSS as document work with IE : Solved !

I know many things are cooking right now and this might not be a high ranking priority, but I thought I’d ask anyway... I have been investigating the problem with using CSS as document with IE, to finally enjoy the benefits of CSS MODx documents instead of classic CSS files... much easier to chunk down your css and use modular design, plus the benefits of using [(site_url)] for image path.

Anyway, the root of the problem is (again) an IE bug, which has been documented on Expression Engine Knowledge blog :

While Internet Explorer does support gzip compression, it has a bug that leads to a problem if the compressed file is smaller than 4k in size; something that can often happen.

I don’t know about you, but most of my css files are around 8-12kb, I imagine some could get below the 4kb treshold after compression and cause trouble like it does for me.

Of course, turning off gzip is not a nice option, since it can save bandwith... unless you can selectively turn off gzip only for CSS. I had found a way to selectively turn off compression for .css files via httpd.conf :



But the problem is, CSS documents get the same default suffix as any document (more often than not, .html). And anyway, not everyone will have access to Apache’s configuration files. I looked at .htaccess but only found the mod_gzip_on Off directive which turns compression for all content...

Having different suffix for different content types in MODx document would be ideal, but I don’t know how hard it would be to implement.

Can this issue be solved ?

It’s too bad not being able to enjoy the benefits of CSS MODx documents

Of course I could call it a day and just put a conditionnal CSS for IE and benefit from dynamic stylesheets with other browser, but that’s not satisfying... don’t you think ?

Plus it would be a great thing to advertise the unique dynamic stylesheet capabilities of MODx !

I don’t think this will make it into the currently planned next release horizon which is measured in weeks, not months. But it definitely should make the next one after that (1.0).

Believe it or not, you can create a CSS document that allows for a .css extension. Simply create a document in MODx and add a .css to the end of the alias name. Also, under Page Settings, uncheck the Rich Text checkbox and change the Content Type to text/css. I also uncheck the Searchable and Cachable checkboxes just to be safe...but the Cachable checkbox is pretty safe to leave checked. So long as you have friendly URL’s turned on and working you should be able to view the page without a .html at the end and a .css instead. Works like a charm for me!

The neat part about this is that you can use all the fun stuff within your CSS document even going so far as to create a snippet to drive parts of the CSS file dynamically. The main thing to remember is to link any images in the CSS file correctly. One of the things I do is use some MODx parameters to ensure that images are linked correctly no matter what server they’re on. This is great if you are using a temporary URL and plan to move the site to a different domain. I usually use the [(site_url)] or [(base_url)] parameter followed by the path to the image.

Once you’ve gotten used to using CSS in this fashion you’ll probably never use static CSS files again. This beats the hell out of jacking with a stand-alone CSS file by far! Plus, since friendly URL’s work fine with this Internet Explorer won’t complain since it thinks it’s a legitimate .css file. Groovy!

Jeff

I get

@import "file.css.html";

Do you use the [~xx~] syntax in your template, or use the alias name directly?

--answered that myself! Use the alias name directly, not the MODx tag syntax.

@import "file.css";

Yep, for the moment you have to use the alias name directly. In the future, I would like to see a way to get it to where the extension is based on the Content Type selected. This way you could use the [~xx~] way of assigning a link and MODx would automatically assign the correct extension (.css, .html, .js, etc.). Definitely something we should put in the pipeline.

Waow I just used [~xx~] without wondering if doing it another way would work, it’s just awesome then ! (you have to use @import ?)

Cool

I’ll go and try that !


@Jeff : we’re on the same page here, I don’t want to be forced to use static CSS !!! I enjoy chunking down my CSS and then re-using CSS content in different stylesheets But so far when I moved to production, I had to drop the dynamic stylesheet stuff because of the IE problem..

Just to confirm, 1.0 will feature configurable extensions by content type, as well as quick loading of CSS documents and other content types that do not require the full capability of the MODx parsing engine, but without sacrificing access to those services if needed. In other words, one of the problems currently with getting CSS from MODx is the huge overhead of loading and executing the full MODx document.parser and related scripts.

Okay guys, it seems to work indeed, but only with @import rule with IE, not with the traditionnal link method... I am not sure to understand why ?

I have another problem now, which makes no sense to me at all : IE does indeed load the stylesheet and I have no more unstyled pages. But in IE, after a first successful load (of any pages) when I click any internal link, the browser hangs for a while and then renders a blank page...

???

I have cleared MODx cache and IE’s cache but to no avail... would anyone have an explanation about this behavior ?

You can check this here :
http://amadom.gerondicap.com/

I’ve encountered this problem with IE 6.0.2800.1106, Window XP SP1
My site is running MODx 0.9.2.1 (rev 1005) and has been updated from 0.9.1

Edit : Funny... it seems I suffer from the Blank Page problem but only with IE..

Well, I just tried the site in IE (6.0.2900.2180 - SP2) and it is working fine for me. I clicked all over and couldn’t get the blank page problem to occur.

What a curious problem ...

It’s a weird bug in IE. I’ve seen similar behavior before...but in my case it was just a flash of a blank screen before the page rendered. Try this and see if it fixes the problem...put a blank script tage before your CSS declaration like so:



This should fix the flashing problem...not sure about hanging though.

Jeff