Menu
I want to use Paul Irish's Conditional comments from the Boilerplate HTML template:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
in a SharePoint 2010 masterpage. I have read 'conditional comments don’t always work so well in SP2010'. (not sure what that means!) The advice is to use:
<SharePoint:CSSRegistration Name="foo.css" ConditionalExpression="gte IE 7" runat="server" />
This allows me to use a conditional to load a specific stylesheet but not to use the Conditional html tag in the way Paul Irish suggests. Is there a way to do this or can I just simply paste the code from Biolerplate into the Sharepoint masterpage?
516
I assume that the SharePoint masterpages equal the ones in ASP.NET (MVC). Therefore this shouln't be a problem at all.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
All the preceding code does is setting the HTML tag with a different CSS class on the HTML tag depending which browser is accessing the site. So that you are able to override some style sheets for any given browser (IE).
site.css
.coloredBackground
{
background-color: #FF0000; //red
}
.ie6 .coloredBackground
{
background-color: #00FF00; //green
}
.ie8 .coloredBackground
{
background-color: #0000FF; //blue
}
In this example users browsing with Firefox, Opera, Safari, IE7,9,10 will see a red background. For IE6 the background color gets overridden with green and in IE8 with blue.
Your CSS registration would look like the following:
<SharePoint:CSSRegistration Name="site.css" runat="server" />
As you can see there is no need to set the ConditionalExpression anymore in the CSS registration, because you are already switching the used style sheet by setting a specific class on the HTML element.
Update:
Another possibility would be to include another style sheet file depending on the browser version using the ConditionalExpression property on the SharePoint aspx control.
<SharePoint:CSSRegistration Name="ie6.css" ConditionalExpression="lt IE 7" runat="server" />
<SharePoint:CSSRegistration Name="ie7.css" ConditionalExpression="IE 7" runat="server" />
<SharePoint:CSSRegistration Name="ie8.css" ConditionalExpression="IE 8" runat="server" />
<SharePoint:CSSRegistration Name="ie9.css" ConditionalExpression="IE 9" runat="server" />
The downside is that you may get css priority issues because the .ie* class is missing on the html element and therefore doesn't overrule the .class-to-override-if-specific-ie-version. You could solve this by using the !important rule in the ie specific style sheet files.
95
I am very new to SharePoint branding and was coming across the same problem. I am not a ASP developer so understanding some of the solutions were a little tough.
What I did was take Paul's conditional statements with the HTML tag and moved them to the BODY tag and it seemed to work just perfect with out having to mess with and SP code.
<!--[if lt IE 7]> <body class="no-js lt-ie9 lt-ie8 lt-ie7" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if IE 7]> <body class="no-js lt-ie9 lt-ie8" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if IE 8]> <body class="no-js lt-ie9" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if gt IE 8]><!--> <body class="no-js" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <!--<![endif]-->
Hope that helps.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
