How to add conditional CSS files

TeamSite 7.2.1 - SitePublisher question

When moving a site into SitePublisher, how do you account for the additional style sheets that are loaded for older IE versions? Here is what we use:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/us/_ui/css/ie6.css" media="all" /><script type="text/javascript" src="/us/_ui/js/iepngfix_tilebg.js"></script><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/us/_ui/css/ie7.css" media="all" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="/us_ui/css/ie8.css" media="all" /><![endif]-->

I just wanted to find out what the common way of accounting for this was before moving forward.

Thanks!

Find more posts tagged with

Comments

Migrateduser

Yes, that's pretty typical.

I see you have a mistake on one of your paths. Maybe just a typo when you entered it on the forums.
/us_ui/css/ie8.css
/us/_ui/css/ie8.css

dlsoderberg

Thanks for the response, yes that was a typo!

What I am asking here is how people add those in now using SitePublisher? Do you create a separate component that contains this kind of code? Or do you just add them to another component?

thatfish

I'd put the conditinal logic in the core layout xsl and use pattern matching on the CSS file name to determine logic.

The following should get you going.

[html]

This is an IE Css file

[/html]

As an aside:
Managing CSS across multiple branches, sites, platforms, etc can provide challenges in managing the CSS where you will have a common component library but use different CSS files for different sites and platforms.

It is early days but we're having some success with SASS, a CSS framework. This will allow you to write your stylesheet centrally and allow logic in the writing of the style sheet source (e.g. variables) which gives some flexibilty in spitting out CSS based upon the requirements of the branch/site.

Adam Stoller

For those who may be a tad bit confused about what rendered in the previous post, hopefully this will help (the information was there, but got lost in the rendering):


<xsl:when test="matches($fileName, '.*ie\d+\.css$'">
  <xsl:comment>This is an IE Css file</xsl:comment>
    <xsl:variable name="ieCssVersion"/>

thatfish

many thanks for clarifying my post ...

Bowker

Where can one find the "core layout.xsl" file?

worries

Try to find this in SP dev guide

"Advanced Configurations and Custom Types"

If you not able to understand,reply back to this chain.