I would like to utilize boilerplatejs for an upcoming intranet project, however, many of the machines are still WinXP with IE8 (and there's no option in the orginazation for wide-scale Firefox or Chrome deployment).
I've quickly tried incorporating the html5shiv, but that didn't seem to help. It doesn't appear routing or other functionality is working. I'm trying to figure out if this is even worth doing or if someone else has tried to get this working before spending more time on it.
Not really. That's what the code in h5bp is about
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
Those are conditional clauses for graceful degradation of ie < 9.
If this is a project where many people will be on ie<9, it might be better to use xhtml...just an engineering consideration
In fact, the most difficult problems you'll encounter are not about boilerplatejs but external libraries.
Specific tweaks depend on the features you leverage in your application, but for a start all you need to to is to
add html5shim to support HTML5 elements like <section>
include json2 library for missing json serialization support
[optionally] include explorercanvas to enable flot charting
Put this inside your <head> section:
<!--[if lt IE 9]>
<script type="text/javascript" charset="utf-8" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript" charset="utf-8" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
With this snippet you'll get boilerplatejs example page working, with routing, themes and i18n support.
Then, you'll notice that in the Click Counter example you don't win regardless how many times you click on the button. This is because LOTTERY_ACTIVITY event published by clickCounter/clickme component doesn't reach any listeners due to a bug(?) in pubsub.js library (I even submitted an issue some time ago). To resolve it, patch libs\pubsub\pubsub-20120708.js, changing
params = (args.length > 1) ? Array.prototype.splice.call(args, 1) : []
to IE8-compatible call:
params = (args.length > 1) ? Array.prototype.splice.call(args, 1, args.length-1) : []
Congratulations... You WON!!!
I leave fixing remaining issues in the Backbone TODO module up to you, you may use the original code as a guidance.
To summarize, I would say that boilerplatejs is fully IE8-compatible, with any incompatibilities coming from supporting libraries, not the core code.
BoilerplateJS core is not designed with any HTML5 features. Though I haven't tested it in IE8, I believe this is very much possible with some adjustments. For example, if crossroadsJS, the library used for routing is not compatible with IE8, still you may easily replace that with pathJS or something else that is IE8 compatible.
Related
So I'm seeing something quite weird. I'm running Windows 8.1/IE11, not sure if that is important or not.
I've inserted the following html comments. One is pulled straight from the HTML5 boilerplate so I'm sure that's right at least.
When I open up the dev tools, I can see the comments in the DOM in IE11 and with the emulator to IE10. As soon as I go to IE9 or below in the emulator with document mode and user string. All of the conditional IE HTML comments you see below and just the conditional IE comments are for some reason no where to be seen.
Has anyone ever seen anything like that? Have any clue why it might happen? I've searched exhaustively to no avail.
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.PlatformModel.PlatformTitle </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/html5shiv.js"></script>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="~/content/platform/css/ie78.css"/><![endif]-->
<!--[if lt IE 9]>#Styles.Render("~/Content/platform/css/IE78.css")<![endif]-->
<!--// kendo common, kendo theme-->
#Styles.Render("~/Content/kendo-common-styles")
#Styles.Render("~/Content/kendo-theme-styles")
<!--// platform -->
#Styles.Render("~/Content/platform-styles")
<!--// page styles -->
#RenderSection("styles", required: false)
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
You might want to update Windows and install the latest patches. The F12 tools in IE11 at RTM shipped with a bug* where the emulated document modes wouldn't respect conditional comments. That's since been fixed.
* http://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools
I'm publishing my site with Adobe Business Catalyst.
The following code:
<!DOCTYPE html>
<!--[if lt IE 8]> <html class="lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"><!--<![endif]-->
<head>
after publishing it becomes:
<!DOCTYPE html>
<html lang="en">
<head>
Most probably BC doesn't accept anything before the element.
Is there an alternative (code or place)?
Most probably BC doesn't accept anything before the element.
No, more likely because it is stripping out comments, and the <!-- --> conditionals are seen as comments (they're actually called "conditional comments").
BC may have a config option to strip out comments. If it does, switching that config option off should solve the problem. (it will also leave other comments in your code though, which you may or may not want)
Alternatively, you could re-think how you deal with browser compatibility. Detecting the browser version is often not the right approach anyway. You might want to consider using a Javascript library such as Modernizr, which will help you detect support for specific features in the user's browser, rather than just detecting the browser itself.
This would probably allow you to ditch all those variations of your <html> tag entirely, and just use a single standard one regardless of the browser version.
Ok so sorry for being blunt here but I have been developing on IE 8 and IE9 for the past 2 years and can't seem to get this right. I work at abhor company and develop for their website. For some reason IE8 or IE9 defaults to a lower document mode like ie7 or ie8. I have tried everything...
1) put HTML 5 doctype and nothing else. According to Microsoft this should be enough
2) put html5 doctype and put x-ua-compatible meta tag first in the page under title and set to either edge or IE8 or IE9 respectively.
My page looks like this
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt- ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <! [endif]-->
<!--[if gt IE 8]> <html class="no-js"> <! [endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
It's really getting frustrating because everything I read says it should work. Microsoft claims this will work or even just settings HTML 5 doctype will work. I've heard to set a http header to fix but honestly, is Microsoft serious? I find it hard to believe that developers need tot change their apache settings to add a http header to Make page render I'm standards mode
Can someone please help me here? What am I missing??? I'm really beginning to hate Microsoft Even more!!!!!
UPDATE::
I recently discovered that my company has the "show intranet sites in compatibility view" checked off and it looks l like if i uncheck it then it will work fine. However, that is not the solution! Everywhere i read i see that if you see the X-UA-compatible meta tag or http header it should take precedence. Well this is a complete lie. Does anyone else have an answer?? I understand that external users will be fine however my business is testing this and they are asking questions because they are internal and its hard to convince them and to tell them to uncheck the box. It doesnt give them a great feeling. Also, i cant have the desktop engineering team remove that because it was put in place because older applications internally are not written to support IE8,9 so they need this.
Any help is appreciated. thanks!
Thanks
Our intranet is also locked down with Compatibility View being used for all Intranet sites and uses IE 8 as they are all Windows XP.
I found that once IE 8 started processing the standard boiler plate conditional comments (to determine which class to attach to the <html> tag) then it was game over: IE decided at that point it was running in Compatibilty Mode (IE 7) and nothing I could do would recover the situation.
I found that by placing the <meta> tag immediately after the <!DOCTYPE> tag it all worked exactly as expected:
<!DOCTYPE HTML>
<meta http-equiv="x-ua-compatible" content="IE=Edge">
To my eyes this doesn't seem very "standard" but it works. I'd love any alternative methods of doing this where the <meta> tag could be placed into the <head> as I tried for hours to do.
The 5th and 6th line of your code are in error and cause, as #JaredFarrish remarks in a comment, the page to display as blank on IE.
At the end of the 5th line, remove spaces from
<! [endif]-->
At the end of the 6th line, change
<!--<! [endif]-->
to
<![endif]-->
On your actual page, there is probably something in the code later that stops the skipping that the malformed construct causes on IE.
It’s still unclear what puts IE into Quirks Mode. More information is needed to address this issue. It could even depend on the domain in which the page is, so disclosing the URL may help. For generalities, see IE8 and IE9 Complications (in setting browser mode).
Ralph Bacon's answer just solve the issue for me. There is nothing wrong with the html5 boilerplate we are using.
If you're intranet is using compatibility mode, then you should place this
<meta http-equiv="X-UA-Compatible" content="IE=edge">
after the
<!DOCTYPE HTML>
So overall, your header would look like this:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
I have been looking for an explanation of why this part of the html tag conditionals for IE in the HTML5 Boilerplate have this part:
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
I ask just so I have an understanding of how this is working. I understand the conditionals above this one, but why is this one different than those above it? I don't get what this condition is doing compared to those above it.
Thank you in advance for helping me to understand something that I will be using.
Basically, the last part is used for IE versions 9 and up, and all other browsers. However, the syntax is shorter and not as straight-forward as it could be because HTML Boilerplate is heavily concerned with optimization.
I found the article that explains it, I recommend you read the whole thing:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Here's my proposed solution:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
This was actually updated afterwards due to issues you can read about in the article.
Apparently part of the weird syntax has to do with a Dreamweaver(!) bug. Here is an excerpt:
Here is the new recommendation, and the one that's in use in the HTML5
Boilerplate.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
Basically, the last line is saying "Do this if IE9+ or not IE". Some of the bullet points below are not directly related to your question, but I'll include them anyways.
Why?
This fixes a file blocking issue discovered by Stoyan Stefanov and
Markus Leptien.
It avoids an empty comment that also fixes the above
issue.
CMSes like WordPress and Drupal use the body class more
heavily.
This makes integrating there a touch simpler It doesn't
validate in html4 but is fine in html5. Deal with it.
It plays nicely
with a technique to kick off your page-specific javascript based on
your markup.
It uses the same element as Modernizr (and Dojo). That
feels nice.
I left an empty class in there because you'll probably be
putting a no-js in there or something else. If not, delete.
Also if
the extra comments around that last tag look weird to you, blame
Dreamweaver, which chokes on normal !IE conditional comments.
More discussion about this issue here: https://github.com/h5bp/html5-boilerplate/issues/425/#
I am in need to know which is the current browser my website is being viewed on, because that way I know how to execute specific code for Images and CSS, stuff like that...
Check out Modernizer and Selectivizr
As your comments suggest that you only need IE detection, the best way I've seen of detecting IE for CSS purposes is used in the HTML 5 Boilerplate project, which uses a technique by Paul Irish:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
I'd recommend using the HTML5BP version:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
There are both PHP and JavaScript classes/functions for this. All you have to do is google for the respective one and then use it to your liking on a per browser basis. You could even go a step higher and do it based on .htaccess but over all depends on what your doing with what where when why etc..
All in all though generally speaking short of some styling issues, or some specific client side scripting issues almost anything you do with just standard html will work fine cross all browsers.
you can check the browser info with javascript embedded into html.
more details can e.g. be found here:
http://www.alanwood.net/demos/browserinfo.html
example code: (now works for sure)
<!DOCTYPE html>
<html>
<head><title>test</title></head>
<body>
<script>
alert(navigator.userAgent);
</script>
</body>
</html>
You'll want to inspect the navigator.userAgent property. There are a few Javascript libraries that you can download that will do this parsing for you. However, you should know that trying to determine the browser type by parsing the user agent string is incredibly unreliable.
If you're trying to toggle behavior based on browser capabilities you should instead check for those specific features and see if they are enabled in the current browser. You can start by reading this post on QuirksMode.
Someone else mentioned Modernizr which is just a library that does the feature detection for you. This is much more reliable than inspecting the browser's user agent.
Use XPath APIs to determine the browser engine:
//Gecko
var gecko = (!!window.XPathExpression === true) && "gecko";
//Trident
var trident = (!!window.XPathEvaluator === false && !!window.XPathExpression === false) && "trident";
//WebKit
var webkit = (!!window.XPathEvaluator === true && !!window.XPathExpression === false) && "webkit";
var browser = (String(gecko)+String(trident)+String(webkit)).replace(/false/g,"");
Use document.documentMode to detect which mode IE is using as well.
References
Windows Internet Explorer Platform APIs
Mozilla Source Code Directory Structure
MDN: Web API Index
WebKitJS
Planet Webkit
Web specifications support in Opera
Details for Document API - Microsoft Edge Development