Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you use HTML5 tags while supporting Progressive Enhancement for no-script clients that don't natively recognize unknown elements?

As I understand Progressive Enhancement, one of the basic tenets is the web site should be functional for everyone, regardless of browser version or settings.

The suggested breakdown I've seen is:

  • HTML content layer using semantic markup
  • CSS Presentation layer
  • Enhancement layer (typically through JavaScript or a JS library like JQuery)

I'm a bit confused over the proper way to handle the HTML content layer, however. In particular, the semantic markup.

I keep seeing that HTML5 tags such as nav, article, footer etc. are the ideal method of maintaining this semantic markup for PE. However, many older browsers do not support HTML5 tags. The easy way to get around this is to use CSS to set default stylings to { display: block; } for the HTML5 tags, but this only works with some browsers. The dreaded IE6, for example, does not recognize HTML5 elements.

The typical workaround for this is to use javascript to dynamically create the missing elements directly into the DOM (such as through an HTML5 shiv).

However... if the client is running an environment that doesn't recognize HTML5 elements, and they do not, for whatever reason, accept javascript, how do you incorporate HTML5 semantic tags in support of Progressive Enhancement, without failing to render properly for scriptless browsers that don't recognize the tags? Is this possible, or do you have to leave those browsers out of your design consideration (which seems counter to the PE ideals)?

like image 632
Beofett Avatar asked Jan 10 '13 19:01

Beofett


2 Answers

According to Yahoo's internal traffic analysis, nearly all users with JavaScript disabled are using HTML5 compliant browsers. Don't worry about not supporting the rare IE8 user with JavaScript disabled.

Your company won't lose any business by not supporting those users. The only real reason to offer this level of support would be as an academic exercise to prove it can be done. There's no bang for your buck.

like image 24
gilly3 Avatar answered Oct 21 '22 17:10

gilly3


If you are hyper-paranoid about supporting GhettoIE, without JS, in this fashion, this might be the time to use if ie comments in the HTML, directing people to get Chrome Frame, or get a better browser, or to click a link to take them to an oldschool, fugly-but-functional version of the page, which adheres to CSS2.1 (just core features) and HTML4.01 strict markup.

The point of Progressive Enhancement IS to provide separation of concerns, and offer features as they're supported... ...but there ARE baseline requirements, here.

You can't expect Mosaic and IE3 to run this stuff, either.

IE6 with JS, or non-IE, modern standard browser, without is sort of the de-facto, here.

like image 148
Norguard Avatar answered Oct 21 '22 16:10

Norguard