Comments on: 5d dynamic stylesheets

By: Aaron Peters

Aaron Peters — Tue, 09 Mar 2010 14:42:38 +0000

hi Steve,

I tested the DHTML + setTimeout stylesheet page multiple times in IE7 on Vista with empty cache: the screen is blank until the stylesheet has finished loading.

- Aaron

By: karuna

karuna — Tue, 23 Feb 2010 09:17:02 +0000

@Ruslan – isn’t this expected, because by having setTimeout() we have just delayed the IE to block rendering at a later point of time. So as soon as the node is parsed, IE probably stops the construction of rendering tree or repainting.

And I think your solution works because you are inserting the style into the sheet and not referring to an external stylesheet. Probably if there was a external stylesheet reference in your solution, then IE would block rendering again.

By: Ruslan

Ruslan — Tue, 16 Feb 2010 07:37:49 +0000

@Steve, please open http://lab.fullajax.ru/ie-js-css-bridge/blocking.html in FF and then in IE, and looking for difference.

if you have any problem for determination difference, look at screenshot http://lab.fullajax.ru/ie-js-css-bridge/screenshot.png

By: Steve Souders

Steve Souders — Mon, 15 Feb 2010 23:14:06 +0000

@sunnybear – What’s the URL for Stoyan’s post?

@Ruslan – I’m not seeing the blocking behavior.

@Joris – Yes, loading them after the onload event also works. In some cases (such as widgets) it’s not desirable to wait that long.

By: Joris

Joris — Mon, 15 Feb 2010 22:40:53 +0000

What about adding the unused stylesheets to the HEAD at window.onload event?

Theoretically your HTTP request should not interfere with the other requests.

By: Ruslan

Ruslan — Mon, 15 Feb 2010 22:36:36 +0000

I’m sorry, but I must disappoint you. Blocking continues even when using setTimeout. Take a look at an example that demonstrates the problem
http://lab.fullajax.ru/ie-js-css-bridge/blocking.html

I’ve found so far the only solution that does not block IE, is to use js-css bridge

(function () (
var d = document, style = d.getElementsByTagName ( “head”) [0]. appendChild (d.createElement ( “style”));
style.type = “text/css”;
style.styleSheet.cssText = “body {background: red}”;
))()

Here is an example implementation
http://lab.fullajax.ru/ie-js-css-bridge/nonblocking.html

By: sunnybear

sunnybear — Mon, 15 Feb 2010 06:56:10 +0000

This is a very useful technique (also Stoyan has coverd it recently) – when you have a website with few stylesheets. And on the home page there is used only one of them – you can just download ‘in background’ all others (it’s not related to @media print, but to stylesheets at all). This download can be done with attribute ‘disabled’ – you can cover its behavior in one of the next posts.