Chaining CSS files with @import
Here’s the situation: Sharepoint allows me to specify one single custom stylesheet for a portal site. But I want to modularize my web parts so they are self-contained with a separate css file containing the styles required for it to render properly. A conundrum…
Together with my colleague Keith, we found out that you can chain stylesheets together using @import. So, for a fictional HelloWorld web part, I would have a HelloWorld directory installed in the root of the portal site, and it would contain a file called hello.css. Then I would include instructions to add a single line to the top of the portal site’s custom css file:
@import url("/HelloWorld/hello.css");
Not sure about browser support of this spec, but I know that IE 6/Win, the target for our intranet, handles it correctly.