05 December, 2012

Enable CSS3 / HTML5 in SharePoint 2010

Ok i guess everyone that works with SharePoint 2010 has been hunting the holy grail of Sharepoint:
How to enable CSS3 / HTML5.

Or maybe not, but i have, and all the answers i have found so far has failed..

I really can't understand why SharePoint is so bound to IE8.

Latest version of Chrome / FireFox, they all work like a "charm" in SharePoint with CSS3 support.
But IE9 made by Microsoft ?? Nope.

Well it works but in IE8 mode only with no CSS3 support, the document mode is forced by the following meta tag in the master page:

<meta http-equiv='X-UA-Compatible' content='IE=8'/>

If you remove the tag, it renders CSS3 "perfectly" in IE9.
But unfortunately a lot of system functionality starts to fail.
Like saving a page, cancel out of a save, Peoplepicker starts failing etc.

I found one javascript fix for fixing the people picker.
But that was really huge and ugly.
Several other issues still exists, even if you fix that one.

Anyway so far i have noticed that the problems only happens when in edit mode.
So i decided to switch the IE8 document mode on / off dependant of the page mode.
Getting everything to work in IE9 mode seems to be impossible for now.

So when in View mode, then remove the IE8 meta tag and render CSS3.
If not then render the meta tag which will remove CSS3 and make the standard system functionality work.
There is also a second condition we need to check, we need to check if the page is in web part edit mode.
If we don't include the IE8 meta tag in this mode, you are not able to move the webparts within the zones.

Well basically the same situation, both are edits but needs to be handled separately.

I also included a "emergency" fallback, just add ?ie8=1 to the current url if you still need to turn
off IE9 mode in a page.
Or ?ie8=0 to turn on IE9 mode in a edit page or whatever for testing.

somesite.com?ie8=1

UPDATE 21.01.2012
Had to do some changes to the rendering.
Because if you remove the tag completely then the IE compability mode button is displayed.
And some users tends to click on it and disable the css3 rendering.
Which of course causes a lot of problems.
The solution is to always render the tag, but with IE=edge.
Which basically means the latest version of IE.
I also rewrote the fallback so that you can decide which IE mode to use:
somesite.com?IE=8
somesite.com?IE=9
somesite.com?IE=edge

So how can we do this (Updated code):

1. Create a new assembly, sign it, add this class:
namespace MyAssembly.UI.WebControls
{
    using System.Web.UI;
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.WebControls;
    using System.Web.UI.WebControls.WebParts;

    public class LegacyDocumentModeFix : LiteralControl
    {
        protected override void Render(HtmlTextWriter output)
        {
            const string documentMode = "<meta http-equiv='X-UA-Compatible' content='{0}'/>";
            string ieMode = "IE=edge";
            string queryMode = Page.Request.QueryString["IE"];
            if (!string.IsNullOrEmpty(queryMode))
            {
                ieMode = "IE=" + queryMode;
            }
            else
            {
                System.Web.HttpBrowserCapabilities browser = Page.Request.Browser;
                if (browser.Browser == "IE")
                {
                    SPControlMode mode = SPContext.Current.FormContext.FormMode;
                    if (mode != SPControlMode.Display)
                    {
                        ieMode = "IE=8";
                    }
                    else
                    {
                        WebPartManager manager = WebPartManager.GetCurrentWebPartManager(Page);
                        if (manager != null)
                        {
                            if (manager.DisplayMode != WebPartManager.BrowseDisplayMode)
                            {
                                ieMode = "IE=8";
                            }
                        }
                    }
                }
            }

            output.Write(documentMode, ieMode);
            base.Render(output);
        }
    }
}

2. Include the assembly in your sharepoint project:

Package, Advanced, Add, Add assembly from project output.
And make it a safe control.

3. Add a reference in the master page:
<%@ Register Tagprefix="Fix" Namespace="MyAssembly.UI.WebControls" Assembly="MyAssembly.UI, Version=1.0.0.0, Culture=neutral, PublicKeyToken=yourassemblykeytoken" %>

4. Replace the meta tag inside the <head> tags in your master page:
Replace:
<meta http-equiv='X-UA-Compatible' content='IE=8'/>

With:
<Fix:LegacyDocumentModeFix runat="server"/>

Thats it, deploy.
CSS3 renders nicely in view mode, and degrades to IE8 mode in edit / new mode
which is ok for now.

Until SharePoint 2013 comes along ;)

I haven't tested every functionality in SharePoint with this fix, only the publishing part that i use.
Some of the site settings functionality, all site actions etc.
Haven't found any problems yet..

And i use this control both in my custom masterpage and in my v4 system masterpage.

If you still find something that fails, Please let me know.

3 comments:

  1. Hi,
    I followed your steps for create the assembly and I registered the assembly in my custom masterpage.

    <%@ Register Tagprefix="Fix" Namespace="BrowserCompatiability.LegacyDocumentModeFix" Assembly="BrowserCompatiability, Version=1.0.0.0, Culture=neutral, PublicKeyToken=aacb387a4b76e30a" %>

    and replaced with

    When I try to my sharepoint site after these changes. getting the following Error.

    Parser Error Message: Unknown server tag 'Fix:LegacyDocumentModeFix'.

    Please can you suggest me, how to fix this?
    This is urgent for me

    -Ravi

    ReplyDelete
    Replies
    1. Well some Things you need to check:

      Make sure your assembly is signed.

      Make sure the namespace and the Assembly name is spelled correctly in Your master page.

      Make sure you Reference the Assembly in Your SharePoint Project (under References).

      Make sure you add the Assembly to the additional assemblies under package / Advanced. And make sure safe is checked, i also have safe against scripts checked..

      Should work :)

      If still not working make sure the dll is deployed to the gac..

      Delete
  2. Thanks for providing this informative information…..
    You may also refer-
    http://www.s4techno.com/blog/category/html-css/

    ReplyDelete