Targeting Internet Explorer: Code Questions

HTML & CSS
1

Hi everyone,
I found this source code on www.paravelinc.com
lt-ie9, lt-ie8, lt-ie7 on the html tag itself is an interesting idea that I have not seen before. Is it the most efficient way to target those browsers?

Also, just curious why no-js (no JavaScript?) would be an included class for all of the IE browsers?

In terms of dir=ltr is that also necessary?

Hmmm, and <meta http-equiv=“X-UA-Compatible” content=“IE=edge” />
Is that Internet Explorer specific?

Thanks for all of the input here lol - I’m not used to seeing this code. I’m liking the website though, with a responsive layout.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" dir="ltr" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" dir="ltr" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" dir="ltr" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" dir="ltr" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2

Perhaps the site is using proper JavaScript and they decided not to bother with the patches needed to also support JScript (which is what IE8 and earlier run instead of JavaScript). Those entries are not targetting IE9 or IE10 at all. There are also quite a large number of newer JavaScript commands where there is no direct equivalent in JScript.

Yes that is an Intrnet Explorer 7+ specific meta tag

3

lt-ie9, lt-ie8, lt-ie7 on the html tag itself is an interesting idea that I have not seen before. Is it the most efficient way to target those browsers?

I dunno if it’s the most efficient, but it’s probably the most easy. You’ll tend to see it on sites using things like Moderniser and other polyfilling libraries who want to set classes and then add/remove stuff using those classes as references.

Also, just curious why no-js (no JavaScript?) would be an included class for all of the IE browsers?

I would assume it was for any browsers with no Javascript at all.

In terms of dir=ltr is that also necessary?

The default, if not stated, is ltr. If you want rtl on any element, or if you will be mixing rtl and ltr, it’s a good idea to add it. Otherwise, it’s superfluous.
Though it’s possible someone is sending out multiple versions of a page (rtl and ltr) and then for the ltr page they could be using the attribute for styling:
html[dir=ltr] someotherelement {styles only seen on ltr pages;}

Hmmm, and <meta http-equiv=“X-UA-Compatible” content=“IE=edge” />

Suppose grandma is running IE8 and discovered her favourite Matlock fan site was “broken”, she might have set her IE8 browser to act like IE7 so that the site would look right, since it was built in the dark ages in DreamWeaver or something. Next, she goes to your site, which wants her IE8 to act like IE8, not IE7. That’s what that tag is supposed to do: make her IE8 act like IE8.

If you built your site to work fine in IE7, you don’t really need that tag. Let IE8 users in “compat mode” get the IE7 version. Big whoop. I don’t use it.

4

If your interested in the idea then you should find all these options interesting. These are all the ways I’m aware of to target ie. http://www.visibilityinherit.com/code/target-ie.php

5

Just realised that no one answered that part of your question yet.

It isn’t just IE where the no-js is specified - the last line applies it to all other browsers as well.

There will be a separate single call inside the attached JavaScript that removes the no-js class in those browsers that have JavaScript enabled so that the no-js will only be applied when the JavaScript doesn’t run.

That’s the way you should work things with regard to HTML and JavaScript. The HTML should be the version that people without JavaScript are expected to work with and any changes for those with JavaScript available should be applied from JavaScript.