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/#
Related
In modern web pages you often see something like:
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="en-US">
<!--<![endif]-->
The purpose is obviously to apply different html, depending on browser and browser version. I assume this is done server side, as it seems everything except the appropriate parts are commented out.
What software is used on the server to select which part to comment out depending on the visiting browser?
Those are conditional comments. They are parsed (contrary to the HTML spec), client side, by Internet Explorer (versions 5-9). Everything else (including IE 10) treats them as regular comment syntax.
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.
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 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
I'm trying to target the IE browser on Windows Mobile 7.5. Can anyone tell me if the
<!--[if lt IE <mobile browser>]> <include retina display> <[end if]-->
conditional comment syntax style works for targeting Windows Mobile?
EDIT: Thanks to the comment below I was able to find a solution. The <!--[if IEMobile]> <[end if]--> syntax works for Windows mobile 7, but I couldn't get it to work for Windows mobile 7.5. Because I am building a mobile website that isn't required to present well on desktop devices I was able to use a generic <!--[if gt IE 7]> comment that gets around the issue I was having between the two renderings.
If anyone out there has a more elegant solution for when this won't work because of required desktop support, I'd love to hear it.
Just in case anyone experiences this issue. Some points worth knowing:
IE Mobile 7.5 reports false positive for font-face. Therefore, you're out of luck forking that feature with Modernizr.
To confuse matters, it also ignores conditional comments for IE Mobile as suggested above. It actually picks up conditional comments for IE9. The only way I was able to fix was add a conditional comment like this:
<!--[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]-->
<!--[if IE 9]> <html class="no-js ie9 ieMobile75" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
And then prefix relevant styles with the .ieMobile75 class. If you want to avoid those styles hitting desktop IE, I'd suggest combining them inside a media query.
may be this work for you
<!--[if IEMobile]>
...
<![endif]-->
<pre>
<code>
is this help for you by checking device width?
<!-- [if (min-device-width: 481px)]>
<![endif]—>
</code>
</pre>