Forums
View unanswered posts | View active topics It is currently Fri Jul 25, 2014 2:40 pm



Reply to topic  [ 4 posts ] 
 Conditional Loading 
Author Message

Joined: Tue Sep 28, 2010 8:25 am
Posts: 1
Post Conditional Loading
Is it possible to have it so only the IE8 and lower users download the htc file? Like can we use the IE only <!-- tags?


Tue Sep 28, 2010 8:26 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Conditional Loading
Since non-IE browsers never download the .htc file, I assume you're speaking specifically about excluding PIE for IE9 and up. This is something I'm still trying to figure out how to approach... it seems clear at this point that PIE will still be needed in IE9 for some features (border-image and linear-gradient for instance) which IE9 will not support natively, but I don't want to make IE9 users download all the extra unneeded code if I can help it. Ideally this solution should require no extra code on the part of the CSS author.

In the meantime, you are of course able to use any of the common techniques for delivering the behavior:url(PIE.htc) CSS property to only IE8 and below (conditional comments etc.)


Tue Sep 28, 2010 10:04 am
Profile

Joined: Thu Mar 17, 2011 1:45 am
Posts: 1
Post Re: Conditional Loading
Modernizr is a great solution to this problem (it is especially nifty if you have already loaded the library for other purposes, but the file is only 8 kb either way).

Modernizr, if you are not familiar with it, detects support for most css3 features, and automatically adds classes to your <html> tag based on whether those features are present or not. (example:
Code:
<html class="csscolumns borderradius">
)

The result is simple: the ability to do if statements in your css based on naming conventions, example:

Code:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}



So, for pie, it would look something like this:

Code:

#divname
{
        border-radius: 10px;
}
.no-borderradius #divname
{
   border-radius: 10px;
   behavior: url(../css/PIE.htc);
}



The second class only affects (and therefore only loads the htc file) for users who do not have the border-radius feature available.

My question when I started this post was whether or not a browser will load a file into cache for css classes that are NOT used in your html file. It turns out (thankfully) that the answer is no. (see http://stackoverflow.com/questions/1299478/does-every-image-in-a-css-file-load-when-the-file-is-loaded). The htc file will not be loaded into cache unless (in this case) the border-radius feature does not exist for that browser. I did some additional testing with IE developer tools to confirm this, and, indeed, the HTC file is not loaded unless that class is specifically called in the html file.

So, this should be a useful solution to many out there, and it only adds an additional overhead of about 8 kb. Modernizr can then also be used as a very convenient (and cross browser) alternative to other methods of accounting for browsers with lacking capabilities. The nice thing about modernizr, is that if the browser does not support a feature, it will apply the alternate class no matter what browser it is (as opposed to conditional comments for IE). And it does not require a separate css file, simply a separate class for each modern feature that you want to use.



------
joe edgar
http://www.myhatwebstudio.com


Last edited by jfedgar on Sat Mar 19, 2011 9:12 pm, edited 1 time in total.



Thu Mar 17, 2011 2:21 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Conditional Loading
Thank you jfedgar for the great tip. This is a great recommendation for preventing unneeded htc downloads.


Thu Mar 17, 2011 10:22 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: No registered users and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.