Some 6 months or so ago I downloaded this demo
MasterPage v5 zip, i.e. a package containing a MasterPage done in HTML5 format, CSS3 used for styling and some JavaScript to make the UI responsive and adapt to different devices and size of screens. I have been so wrapped up in other stuff, that I tried it out first time only this week, to demo it in the seminar on Tuesday.
The example is quite cool, featuring most of the general branding scenarios, and triggered the onClick in me, starting the learning-by-doing process. In a sense, I have long known how to go about it, but never have really taken it to my core line of work, to implement the stuff in SharePoint. So off to work I was, and as for here and now, welcome yourself to some notes on how to make it happen.
As for the MasterPage, you can build it more or less the way you always have, for HTML5 understands all of the old fluently. But, if you really want to use HTML5, you might want to rethink the normal DIV repertoire and replace some divs with the new elements, e.g. HEADER, HGROUP, SECTION, FOOTER, NAV, to mention the most probably needed ones. One thing to keep in mind though, is that section != div. You still need the divs. Sections are more general semantic element.
My basic structure for the MasterPage looks like this (after the basic workspace and bodycontainer divs, and discarding all the rest of the SharePoint stuff like page editing status bar etc.):
<header>
<hgroup> <!-- in my case this is a bit unnecessary though, since my top nav is outside the header -->
<!-- several divs for sitelogo, search etc. -->
</hgroup>
</header>
<nav id="topnavi">
<!-- global navigation -->
</nav>
<section id="contentwrap">
<nav id="lefnavi">
<!-- left navigation -->
</nav>
<div class="s4-ca with-leftnav" id="MSO_ContentTable">
<!-- mso_contentdiv required, helps SharePoint put the web part editing pane in the main body on the right -->
<div id="MSO_ContentDiv" runat="server">
<!-- page content loads from the pages and pages layout -->
<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server" />
</div>
</div>
</section>
<footer>
<!-- divs for footer content -->
</footer>
Oh, and note the HTML5 Doctype and HTML tag (for MasterPage), simply with no schema declarations:
<!DOCTYPE html>
<html lang="<%$Resources:wss,language_value%>" dir="<%$Resources:wss,multipages_direction_dir_value%>" runat="server" __expr-val-dir="ltr">
As for the CSS, many things are just the same as with XHTML. But then there's a lot more you can do. Plus things to do to maintain the backwards browser compatibility! Without any regard to this, this is what you might get
in IE9 and any other current browser:
and this is how it looks like in IE7 (IE8 isn't much different but at least it understands floats!):
So how to go about it? I will point out some of the things I did with this UI of mine, and how to make them work in the older browsers as well:
- The general older browser fix is to set the SECTION, HEADER etc. to display:block by default in your CSS
- In my styling the trickiest parts are the drop shadow of the header and the selected link, the rounded corners, the opacity used in almost all backgrounds and the gradient background of the whole workspace. They currently require several different targeted rules in order to fly in all browsers.
- Let's start with the gradient background. "Simply" apply CSS rules for all different browsers, using the ms filter fix to make it happen also in IE7/8 (already implemented in the picture above):
background: #fff;
background: -moz-linear-gradient(top, #7e8598 0%, #fff 75%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7e8598), color-stop(75%,#fff));
background: -webkit-linear-gradient(top, #7e8598 0%,#fff 75%);
background: -o-linear-gradient(top, #7e8598 0%,#fff 75%);
background: -ms-linear-gradient(top, #7e8598 0%,#fff 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e8598', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #7e8598 0%,#fff 75%);
- Then there are the rounded corners. As for most browsers, they can be done in a combo way of several rules, e.g. my header corners:
border-radius: 10px;
-webkit-border-radius: 10px
-moz-border-radius: 10px;
-o-border-radius: 10px;
As for IE7/IE8, they won't be round unless you want to use e.g. the htc fix or some code, such as CurvyCorners - see this pretty good article on rounded corners.
- The header also has a drop shadow. For most browsers, you need a similar set of rules as the corners:
-webkit-box-shadow: -1px -5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: -1px -5px 5px rgba(0, 0, 0, 0.5);
-o-box-shadow: -1px -5px 5px rgba(0, 0, 0, 0.5);
box-shadow: -1px -5px 5px rgba(0, 0, 0, 0.5);
and then the filters for IE7 and IE8 - they don't make as fancy a shadow though, so I simply left it out of the final UI:
/* for IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=45, Color='#333333')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=45, Color='#333333');
The IE8 version of a shadow:
- Then there is the transparent background color. As for the CSS3 compatible browsers, this is quite simple:
background: rgba(255, 255, 255, 0.95);
the last decimal number being the opacity value.
As for IE7 and 8, there's ways of doing this, some of them work, some of them didn't seem to. I decided to make things easy for me and go with solid colors for older browsers.
Add some multiple backgrounds and stuff, and there's more to do, this was just the basics for this site. I suppose we're getting there, but (ok, I know I'm repeating myself now) until we're done with IE8 and older + the other browsers start to all implement the standard CSS3... unh...
For more information and HTML5 + CSS3 tutorials, see e.g.
w3Schools tutorials. And besides these, there are many other good ones for HTML5 and CSS3. I myself found e.g. the
Impressive Webs quite cool, not a conventional tutorial really, but having many cool tips and info in edible bits.
