Using CSS3 for IE6 and higher in SharePoint

One common problem with modern web development is displaying a consistent look of your site cross platform. CSS3 provides developers some pretty incredible design tools, but without a modern web browser many users will not see them. Suddenly your polished modern looking website looks like a middle school kid hacked html together. Luckily there are some tools out there which provide CSS3 functionality to IE6,7,8 users.

There are a couple tools out there which work well, but the one i chose to use is PIE. The steps to using it are simple:

  1. Download PIE.zip from the getting started page and unpack the contents.
  2. Upload the PIE.htc file somewhere on your server.
  3. Reference it somewhere in your CSS rule with the following line:  behavior: url(path/to/pie_files/PIE.htc);

A complete guide can be found on their site under Documentation -> Getting Started.

Unfortunately SharePoint developers will require a few more steps. By default SharePoint 2010 blocks the .htc file from running on the site. This is a security measure to prevent malicious scripts from being run through the UI. There are two options to allow access to PIE.htc. The first is to disable the security which prevents the file from running or to install the file in _layouts.

If you are only allowed to deploy a sandbox solution you will not be able to deploy PIE.htc to _layouts. So the next option is to reference it from the style library. To get this to work you must either be in permissive file mode or add the MIME type “text/x-component” to the “AllowedInlineDownloadedMimeTypes” list for each web application using PIE. To enable Permissive File Mode go to Central Administration -> Application management –> Manage Webapplications –> General settings. Find the option called “File Browser Handling” and change this to “permissive”. Additionally this will allow PDF files to open in browser on your site.

The second option is to add the MIME type to the Web Application using PowerShell using the following code:

<code>$webapp = Get-SPWebApplication &lt;name or URL of web app&gt;
$webapp.AllowedInlineDownloadedMimeTypes.Add("text/x-component")
$webapp.Update()</code>

This will add functionality to each Web Application which will be running PIE. Making this change will also let you store the PIE.htc inside a document library.

 

References:

http://stackoverflow.com/questions/4255930/sharepoint-2010-css3pie-isnt-working-because-off-behavior-and-specified-url

http://sharepointsoldiers.wordpress.com/2011/11/03/permissive-mode-in-browser-file-handling/

 

(Views: 3114)

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.