Working with any modern Web technology typically requires the developer to provide some JavaScript and CSS code, and SharePoint is no exception to this rule. A new(er) paradigm within the Web development world is the concept of Unobtrusive JavaScript. The main goals of this concept are the separation of behavior and presentation within our websites, and an overall cleaner rendering of the HTML source within a Web page. It will help build smarter and more maintainable JavaScript and CSS code.
Unfortunately, SharePoint poses a set of complications when it comes to incorporating Unobtrusive JavaScript and CSS in developer customizations. The Web Part framework has a tendency to embed content inside of DIV and TABLE tags with obscure client-side ID attributes based on globally unique identifiers that can be dozens of characters long. Working with enhanced JavaScript libraries, such as jQuery, {http://jquery.com/} can help ease some of this pain, but in many cases there will still be a path of least resistance to simply emitting some JavaScript code to the page using the ScriptManager and its various Register methods.
The ScriptManager helps by only registering scripts a single time (if set up to do so) in cases where a control or Web Part shows up multiple times on a single page, but it also renders code inline whenever the server engine gets to the particular control that is emitting it. Developers will end up with JavaScript code all over their rendered HTML; this is pretty much as obtrusive as it can get.
The same goes for attaching custom CSS to controls within SharePoint. One option is to just emit the CSS code (or even to create a link to a CSS style sheet) directly onto the page with the ScriptManager. This would solve the problem of the code being rendered multiple times for the same control over and over again, but it still provides a pretty invasive, obtrusive implementation of the CSS as developers will have <style> tags and CSS code all over their output HTML.
Fortunately, SharePoint provides some APIs that facilitate working around the registration of external CSS and JavaScript files. For JavaScript, we have the ability to register external JavaScript files—found within the _layouts folder—using the static Register methods of the Microsoft.SharePoint.WebControls.ScriptLink class. Using these methods allows us to easily deploy and register localizable, cache-safe JavaScript files from any .NET code executed in our Web page.
For external CSS files, SharePoint provides a similar set of static methods on the Microsoft.SharePoint.WebControls.CSSRegistration class. The static Register methods found on this class will allow cache-safe links to CSS files. These classes’ static Register implementations correspond with the ScriptLink and CSSLink controls found within the SharePoint MasterPage. These controls effectively loop through all their registrations and emit unique cache-safe <script> and <link> tags for each resource registered—so that the same external resource doesn’t get included multiple times.
Using the ScriptLink and CSSRegistration classes to register external resources allows developers to maintain a cleaner render environment for their SharePoint customizations. It also has the added benefit of providing cache-safe and unique links to these resources at the top of our HTML document. These solutions help developers construct cleaner and more maintainable customizations to their SharePoint environments.
Jonathan Mast is a consultant with SharePoint911.
