Will CSS3PIE .htc file load for other browsers eve

问题:

I'm using CSS3Pie to make round corners in IE which uses invalid CSS property

behavior: url(/PIE.htc);

If i keep this declarition in my main CSS will other browsers load this .htc file even they don't need this or only IE will load this file?

Is there any benefit to keep behavior: url(/PIE.htc);is seperate IE conditional stylesheet in terms of performance?

<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

The whole code is like this

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(/PIE.htc);

回答1:

The spec says that browsers are to completely ignore declarations whose property names they don't recognize. This means, theoretically, that since behavior is an IE-only property, the url() should not be parsed, and the file not be downloaded by browsers other than IE.

I ran a test on IE9 and Firefox 4, loading the CSS3 PIE tabs demo, and here's what F12 Developer Tools and Firebug show respectively in their network tabs. Notice that Firebug reports no attempt to request the /PIE.htc file. That means Firefox didn't load the file even though it was declared in your stylesheet, because it doesn't recognize the behavior property.

IE9 (F12 Developer Tools)

Firefox 4 (Firebug)

The only reason I'd move that property to an IE-only stylesheet with conditional comments is if I don't want to pollute my main stylesheet with non-standard properties and/or hacks.

回答2:

Not necessary. The behavior property is as invalid to all the other browsers as -moz-border-radius is to IE. You may want to use the latter method to prevent IE9 from loading the behavior though, but the market share is not sufficient to care right now.

回答3:

An updated answer (February 2014) since it seems a rather unclear topic.

The way it works is that you trigger the load of the HTC library via the "behavior" property.

"behavior" is an IE6-9 property only, see MS official website "Support for element behaviors and HTML components (HTCs) has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5."

Hence, the "behavior" property could only trigger the load of anything when used on IE6-9.

The library should never be loaded for IE10+ NOR for other browsers (ie. Chrome, Firefox, Safari, & so on)

I have tested in the same way as @BoltClock & found that nor the htc, nor the js was loaded when I was not on an IE6-9 browser, as expected. I tested on IE8, IE9, Chrome 32, IE11, & Firefox 27 (see screenshots below).

I'll try to spend some more time testing this further, maybe I missed something. In the meantime, anyone can test using the official demo page css3pie.com/demos/ & browserstack.com (they have a free trial) for instance.

Chrome, Firefox & IE11 are not loading the css3pie js library, as expected:

Note: the "dynamisch skripts" directory list the javascript added directly inside the page (not referenced to a separated js file)

IE9 loads a css3pie js library, as expected:

IE8 loads a css3pie js library, as expected:

Note 1: note that the lib loaded for IE8 or for IE9 is different.

Note 2: chrome, firefox & IE11 do not load any css3pie library but may load some css3pie CSS, this might need further testing.