SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Targeting Internet Explorer: Code Questions

    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.

    HTML Code:
    <!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" />
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by revlimiter View Post
    Also, just curious why no-js (no JavaScript?) would be an included class for all of the IE browsers?
    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.

    Quote Originally Posted by revlimiter View Post
    Hmmm, and <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    Is that Internet Explorer specific?
    Yes that is an Intrnet Explorer 7+ specific meta tag
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by revlimiter View Post
    Also, just curious why no-js (no JavaScript?) would be an included class for all of the IE browsers?
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •