Using HTML5 and CSS3 with SharePoint 2010

By Randy Drisgill

November 16, 2011 — (Page 1 of 2)
In one of my previous articles, I talked about how everyone at conferences asks about mobile, but I’d say the second most frequently asked question is about HTML5 and SharePoint. HTML5 is certainly the future of the Web, but as a person that leans toward the design side of things, I really think CSS3 is way more exciting. Here are some of the features that HTML5 adds beyond what we already have with prior versions:
• SVG vector graphics – Support for Scalable Vector Graphics
• Canvas element – The ability to draw on the page in two dimensions
• Video & audio elements – Otherwise known as the Flash killer
• Semantic elements – <header>, <footer>, etc.
• New input element types and form fields – Input types and new form fields
• Geolocation – Identify the physical location of the browser
• Persistent Local Storage – Store content locally with plugins
• Other random additions – Drag & drop, microdata, WebSockets, etc.

CSS3 on the other hand adds all sorts of exciting design concepts, including:
• Border shadows, rounding and images
• Background sizing
• Text shadows and wrapping control
• Better support for Web fonts
• 2D and 3D transformations
• Visual transitions
• Animations
• Support for creating columns on the page

Unfortunately, browser support for CSS3 is hit or miss from a specific functionality point of view. W3Schools.com has a good chart on which browser versions support which things.

Trying it out
I’m sure you are saying, "OK, that’s all fine and dandy, but how does any of this work in SharePoint 2010?" To try out CSS3 in a SharePoint 2010. all you have to is change the line in a typical SP2010 master page that tells IE to render the page in IE8 mode:
<meta http-equiv="X-UA-Compatible" content="IE=8"/>

Change that to IE=9 and you should be in business for testing any CSS3 code that IE9 can display.

For trying out HTML5 content, you should make the same change for the IE version, but you will also want to change the DOCTYPE from:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

To:

<!DOCTYPE HTML>

With those two changes in place, you can start testing HTML5 content in SharePoint 2010.

Related Search Term(s): CSS3, HTML5

Pages 1 2

Share this link: https://sptechweb.com/link/36115

Add comment

Name*
Email*
Country

Compose