Suppressing OOTB Stylesheets on Public-Facing SharePoint 2010 Sites

My company just launched a new version of our website (www.credera.com) built on the SharePoint 2010 platform.  SharePoint 2010 offers a wealth of new content management capabilities through its “ribbon” UI.  While this is great for managing content as an author or approver, it can create some less than desirable side-effects for anonymous users on public-facing sites.  In this case, it is the inclusion of the OOTB stylesheets which are necessary for the “ribbon” to function properly.  None of which are needed while browsing the site anonymously.  In our implementation, this equates to approximately 230 KB of unnecessary CSS!

The code below is a typical snippet you would find in a Master Page for public-facing SharePoint sites.  The CssLink tag will include OOTB stylesheets needed for authoring and the CssRegistration tag will include our custom branding stylesheet.  Our custom branding stylesheet, style.css, will be loaded after the OOTB stylesheets due to the after attribute.  If we omit the after attribute, the OOTB stylesheets will override our custom branding.

Authenticated vs. Anonymous

If we want to suppress the OOTB stylesheets for anonymous users, we need to be able to conditionally change this snippet.  First, we need to determine if the user that is requesting resources is authenticated or anonymous.  This is where the SPSecurityTrimmedControl comes in.  By setting the AuthenticationRestrictions attribute to “AuthenticatedUsersOnly” the contents of the control will be utilized only if the user is authenticated.  Likewise, if we set the attribute to “AnonymousUsersOnly” then only anonymous users will access the contents.

The Basic Strategy

Now that we know how to determine if the user is authenticated or anonymous, we can define our source to include only the necessary stylesheets.  The illustration below describes the basic strategy.  If the user is authenticated, register the OOTB stylesheets using the CssLink tag and then our custom one with the CssRegistration tag.  Else, if they are anonymous, register only our custom stylesheet with the CssRegistration tag.

The Catch

If implemented as stated above, you will find that everything works as expected when authenticated.  However, when viewing the site anonymously, no styles are applied at all!  What gives?  After an hour or two of frustration, I realized that one of the CssRegistration control validation rules is what is causing this to happen.  The rule is to make sure that only one stylesheet with the same name and path is added to a given page.  Even though the code is in the conditional section, it is still trying to validate this rule.  After understanding what was happening, I was able to resolve the issue easily by replacing the anonymous CssRegistration with an old-fashioned link tag (as shown below).

Final Thoughts

While this code may not feel the most “clean”, it gets the job done.  We are still able to fully utilize the “ribbon” while authoring and approving content.  And just as importantly, we are not stuck with the extra baggage when an anonymous user is browsing the site.  If you would like help implementing this or any other SharePoint solution, please contact us (www.credera.com).

• SharePoint
• Microsoft
• Credera