Siolon

SharePoint 2010 and XHTML Validation

I’m writ­ing this and another post about doing devel­op­ment on the Share­Point user inter­face and the over­all user expe­ri­ences to dis­play some of my dis­ap­point­ment with issues I thought would’ve been resolved in this upcom­ing version.

Microsoft has said on record they are sup­port­ing browsers that are XHTML 1.0 com­pli­ant, and they haven’t said offi­cially (at least where I can find and val­i­dated by oth­ers) that it will val­i­date as XHTML 1.0. Regard­less, we have a new default mas­ter page that uses both the strict XHTML 1.0 DOCTYPE as well as it uses the IE 8 X-UA-Compatible META tag that puts the ren­der­ing mode in the strictest ren­der­ing avail­able in IE 8. By those two inclu­sions Microsoft is say­ing that not only are they cod­ing a page against the XHTML 1.0 strict stan­dard, but by using the META tag they are telling IE 8 that they “really know” what they’re doing. Here is the val­i­da­tion result from a default mas­ter page of a team site collection.

The Prob­lem

The prob­lem of the default mas­ter page is more than just an inabil­ity to val­i­date. When using this par­tic­u­lar DOCTYPE you are com­mit­ting to not using dep­re­cated ele­ments and attrib­utes and also that your HTML moves closer to XML by abstract­ing the pre­sen­ta­tion (CSS), struc­ture (XHTML), and behav­ior (JavaScript).

There are ele­ments used inside the default ren­der­ing of the mas­ter page that have been dep­re­cated.

• valign
• align
• width
• bor­der
• font
• color

Along with dep­re­cated attrib­utes and ele­ments the ren­der­ing includes a bevy of inline JavaScript and CSS. I was hop­ing with all the empha­sis on using jQuery in Share­Point recently that the prin­ci­ple of “unob­tru­sive JavaScript” would make its way into Share­Point. Unfor­tu­nately, it con­tin­ues to uses attrib­utes such as onlick and onload as well as tons of JavaScript inline. It con­tin­ues to have no rhyme or rea­son why it comes out where it does.

Then you get stuff like this:

<p> </p>
<p> </p>
<p> </p>

And here’s another exam­ple. Notice that a HTML ele­ment comes after the HTML ends. (There are even spans in the head of the doc­u­ment for some reason.)

</html>
<span></span><span></span><span>

Inline styles were a big prob­lem in 2007, and it doesn’t seem to be any bet­ter in 2010. They might as well have just used the cen­ter and font tags.

<p class="ms-rteThemeForeColor-5-5" style="text-align:left;font-size:10pt">
<img alt="People collaborating" src="/_layouts/images/homepageSamplePhoto.jpg" style="margin-top:5px;margin-right:5px;margin-bottom:5px;margin-left:5px">
</p>

You would hope that when they do use an exter­nal stylesheet that it would be a well com­mented and laid out file. Unfor­tu­nately that is not the case. It still doesn’t have com­ments, sim­i­lar code for­mat­ting, and it has odd “Replace­Color” text which I assume changes depend­ing on the Share­Point theme you have selected. We know that this CSS will also not val­i­date against any CSS specification.

Instead of com­bin­ing the two selec­tors that use the bor­der: none; they con­tinue from 2007 mak­ing them sep­a­rate selec­tors which increases the size of the file and decreases the read­abil­ity of it. This file needs to be clearly doc­u­mented, for­mat­ted con­sis­tently, and use of best prac­tices such as CSS short­hand to increase the util­ity for devel­op­ers, gain val­i­da­tion, and make the file smaller as a result.

Are There Improvements?

It’s not all bad news. Cer­tainly the inclu­sion of a DOCTYPE is a step in the right direc­tion. I’m also sur­prised that the strict IE 8 META tag was used to force IE 8 stan­dards mode. Cer­tainly there are less tables, and class names are clearer then they were in 2007.

These are some pos­i­tive changes how­ever with such a mon­u­men­tal new ver­sion I was hop­ing that many of the afore­men­tioned issues would not be an issue in 2010. Maybe in 2014…