Selectivizr with CSS on a sub-domain

Updating a WordPress starter theme recently (among other things I was porting it to HTML5), I needed to decide which shims and/or polyfills to use. I starterd with Remy Sharp’s HTML5 enabling script but another to consider was Selectivizr to improve IE‘s support of CSS3 selectors.

One of the disadvantages of using Selectivizr is it rules out using a CDN for one’s style sheets. To quote their site:

Style sheets MUST be hosted on the same domain as the page due to browser security restrictions. Likewise, style sheets loaded using the file: protocol will not work.

After umming and ahhing for a couple of days, the following solution involving conditional comments, occurred to me:

<!--[if gte IE 9]><!-->
<link rel="stylesheet" href="http://cdn.example.com/styles.css" type="text/css">
<!--<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" href="/styles.css" type="text/css">
<![endif]-->

With a few lines of conditional comments, browsers supporting the relevant selectors natively can take advantage of the performance boost from a CDN while developers can take advantage of the advanced selector support provided by Selectivizr for IE<9 users.

I’ve set up a quick demonstration in which three paragraphs have different ARIA roles – featured, unfeatured and neverfeatured – different styles are applied to each paragraph using [role=something]. The demo renders fully in: IE 6-9beta, Firefox (Win & Mac), Chrome (Mac), Safari (Mac), and Opera (Mac).

By Peter Wilson

Peter has worked on the web for twenty years on everything from table based layouts in the 90s to enterprise grade CMS development. Peter’s a big fan of musical theatre and often encourages his industry colleagues to join him for a show or two in New York or in the West End.

5 comments

  1. Appears a similar restriction happens on WordPress sub-domain multisite (haven’t tested sub-directory). Know of a way to get Selectivizr working with multisite when not using a CDN?

    1. I assume you mean the site is on sub.example.com & selectivizr is at example.com/…/selectivizr.js or sub2.example…., is this correct?

      I’ve not had this use case but I guess it would be treated as different domains. It would need to be treated as such to allow for domains under a CCtld, eg example.com.au & exampletwo.com.au.

  2. One solution is to use javascript to rewrite the stylesheet domains to be relative to the page.

    This can be added in the after the stylesheet have been loaded (amend regex as required)

    <!--[if (gte IE 6)&(lte IE 8)]>-->

    $('link[rel=stylesheet]').each(function() {
    var new_href = $(this).attr('href').replace(/http://.*cdn..*.com//,'/');
    $(this).attr('href', new_href);
    });

Comments are closed.