search

createdotnet / wdk

The Create.net Web Designer's Kit Documentation.
http://developers.create.net/wdk/
0 stars 0 forks source link

<html> conditional classes tag request #50

Closed benjaminparry closed 7 years ago

benjaminparry commented 9 years ago

It would be great to have one tag that would output the conditional classes we are currently using on the templates for both us and the wdk users.

The conditional classes method is different to conditional stylesheets in that the <html> gets classes added based on which IE version it is (or not at all) enabling cross-browser styling hooks.

Example from our templates

<!--[if lt IE 7]> <html lang="en" class="no-js ie lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html lang="en" class="no-js ie ie7 lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html lang="en" class="no-js ie ie8 lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>    <html lang="en" class="no-js ie ie9 lt-ie10"> <![endif]-->
<!--[if gt IE 9]> <html lang="en" class="no-js ie not-ie-legacy"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js not-ie"> <!--<![endif]-->

So as an IE8 user the html tag would be <html lang="en" class="no-js ie ie8 lt-ie10 lt-ie9">

This enables the following styling hooks

As an Opera user the html tag would be <html lang="en" class="no-js not-ie">

Enabling the styling hooks

Additionally the no-js class is included here for progressive enhancement. We use modernizr.js with our templates which, along with other feature detection tests, removes this class and replaces it with js if javascript is enabled.

It might be worth abstracting this no-js/js class swapping functionality out and including as part of this tag.