XHTML and CSS

One of the  great things in 2.0 .NET is that it supports XHTML compliance. For those who don't know XHTML is a newer w3c standard meant to replace HTML and, in a nutshell, is just a stricter version of HTML.

XHTML compliance is really just the first step towards compliance with the w3c Web Content Accessibility Guidelines (WCAG) and the US Government Section 508 guidelines. The big picture goal is to make the web site content accessible to the widest audience of people including those with handicaps that make web browsing difficult by supporting the widest variety of browsers and devices including everything from screen readers to electronic braille pads. The new standards and guidelines are desinged to do just that and I definitely want mojoPortal to comply with these guidelines wherever possible.

The biggest things to be aware of when trying to convert HTML to XHTML are that everything is lower case and eveything must comply with standard xml rules. Some of the HTML tags that did not require formal closing tags now do require them. <BR> for example must be <br /> so that it has and end tag.

The change in 2.0 ASP.NET is that the server controls like TextBox, Calendar, DataGrid, etc render XHTML compliant markup. You still have to make your own markup that wraps these controls compliant.

In mojoPortal I have had the forsight in most places to use <br /> and other XHTML compliant forms even before 2.0 .NET just to be prepared but there are some places where I had non-compliant markup. I am going through all the pages and controls now in the 2.1 branch and fixing these things, its really not that big a job. What is a big job is changing from html table driven layout to using div and span elements with css. This is fairly tedious work for me to go through the whole project and do this and these changes will likely require some effort to convert existing custom skins for those upgrading when I make the next release. if it seems like a lot of work to you just remember I did it for the included skins . When I'm done you should be able to tell what you need to do to upgrade your custom skin by looking at the included layout.Master files and style.css files

At first I thought I would wait and convert to web parts before making this change but I decided to do this first so that I will have cleaner markup when I get to that step. Best to get the skinning and layout really nailed down first. This will be a solid foundation for meeting our compliance goals.

Comments

re: XHTML and CSS

Thursday, February 9, 2006 4:46:30 PM
This is great news Joe! This will be great for mojoPortal!

re: XHTML and CSS

Thursday, February 9, 2006 7:24:21 PM
Since you are switching from table driven to div/span, you might be interested in an article about 3-column layout that was recently mentioned on digg.com.  Be sure to at least skim the digg comments before committing to the exact approach described in the article because some folks mention alternatives and others raise concerns about compatibility.  I haven't done any testing of the various approaches and don't have a preference, I just thought you might find the article and discussion useful.

--Dean

Joe

re: XHTML and CSS

Friday, February 10, 2006 3:00:08 AM
Good article. Similar strategy to the book I've been using

As I work I am testing  in IE6 Firefox and Opera and I can say that IE is the most challenging becuase of the box model bug in IE, the linked article has an example of the problem and a hack to solve it. So far I've been able to avoid the problem without the hack by not using width=100%, changing to width=99% or 98%

Hopefully I'm not breaking things for IE 5.x but I don't have a test nachine with that but in my logs only like 0.3% of requests are using old versions of IE so I'm not too worried about it.

re: XHTML and CSS

Monday, May 21, 2007 7:32:13 AM

thanks

Comments are closed on this post.