I believe you can also address incompatibility of old versions of IE by using IE-specific conditional-on-IE-version HTML comments (thus avoiding the need for JavaScript).
What issues with IE I can fix with HTML comments, I did. Here is the head element of one of the two design templates I am working on. This head example has all the IE comment support stripped out. As you can see it is very short and to the point. Now lets look at a head with IE support included, it is longer and more complex. Here is just the IE fixing code:
<!--[if lt IE 7 ]> <html lang="en-us" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en-us" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en-us" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]--> + <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--< +![endif]--> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0 +, maximum-scale=1.0" /> <!-- Fixes for IE --> <!--[if lt IE 9]> <link rel="stylesheet" href="css/ie.css" type="text/css" media +="screen" /> <![endif]--> <!-- use "fixed-984px-ie.css" or "fixed-960px-ie.css for a 984px or 96 +0px fixed width for IE6 and 7 --> <!--[if lte IE 7]> <link rel="stylesheet" href="css/fixed-984px-ie.css" type="tex +t/css" media="screen" /> <![endif]--> <!-- Fixes for IE6, only needed if IE 6 will be supported - width must + match 984px or 960px of css file used above --> <!-- Use .imagescale to fix IE6 issues with full-column width images ( +class must be added to any image wider than the column it is placed i +nto) --> <!--[if lte IE 6]> <link rel="stylesheet" href="css/ie6-984px.css" type="text/css +" media="screen" /> <![endif]--> <!-- End fixes for IE --> <!--[if lte IE 9]> <script src="js/modernizr_shiv.js"></script> <![endif]--> </head>
That fixes a whole mess of trouble for us concerning IE. To get HTML5 semantic elements and CSS3 Media queries is more complicated. The Story of the HTML5 Shiv does a great job explaining the development landscape that lead to html5 shiv. Of note is the following:
Fast forward to 2008, HTML5 is gaining momentum. New elements have been specified, however in practice, Internet Explorer 6-8 pose a problem as they do not recognize unknown elements; the new elements cannot hold children and are unaffected by CSS. This sad fact was posing quite a big hinderance to HTML5 adoption.
John Resig wrote a nice post on HTML5 Shiv that walks through an example of IE's behavior and how a simple javascript call can fix this problem. This is the only known method to get IE to recognize new elements, like HTML5. If there is another method that does not require javascript please let me know.
The linked screen shots show very little to have much opinion on unless you are trying to design a layout for use only on "mobile". They don't even appear to cover what it looks like to read a thread even just on "mobile".
I get what you are saying. I updated my post with more refined questions of what I am asking for.
The "before" screen shots on small devices don't use any of the pre-existing features for supporting small geometries.
Do you mean preexisting features in the PerlMonks design? Those screens are just after the page loaded. Do I need to append data to the url to get a different design or something else?
In reply to Re^2: PM redesign: status update (compare)
by kimmel
in thread PM redesign: status update
by kimmel
| For: | Use: | ||
| & | & | ||
| < | < | ||
| > | > | ||
| [ | [ | ||
| ] | ] |