Cross-Browser Scripting

Discussion in 'HTML' started by Star Dot Star, Aug 12, 2009.

  1. Somewhere, I picked up a little code snippet
    to branch the CSS choice to two seperate files,
    depending on whether the browser was IE or
    "non-IE".

    ==============================
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="style_IE.css" />
    <![endif]-->

    <![if !IE]>
    <link rel="stylesheet" type="text/css" href="style_NON-IE.css">
    <![endif]>
    =================================


    I have found this particularly helpful for design
    considerations where seperate tweaks are needed
    for IE vs non-IE code rendering.

    However, the W3C validator doesn't like the code;
    in fact, I'm not even sure what language the code
    is written in, but it does work admirably.

    Can anyone suggest a better (hopefully simple)
    way of branching CSS for different browsers?
    Or is this script ok to use, despite W3C's apparent
    disdain for it?

    thanks for any comments ...

    *.*
     
    Star Dot Star, Aug 12, 2009
    #1
    1. Advertising

  2. Star Dot Star

    C A Upsdell Guest

    Star Dot Star wrote:
    > Somewhere, I picked up a little code snippet
    > to branch the CSS choice to two seperate files,
    > depending on whether the browser was IE or
    > "non-IE".
    >
    > ==============================
    > <!--[if IE]>
    > <link rel="stylesheet" type="text/css" href="style_IE.css" />
    > <![endif]-->
    >
    > <![if !IE]>
    > <link rel="stylesheet" type="text/css" href="style_NON-IE.css">
    > <![endif]>
    > =================================
    >
    >
    > I have found this particularly helpful for design
    > considerations where seperate tweaks are needed
    > for IE vs non-IE code rendering.
    >
    > However, the W3C validator doesn't like the code;
    > in fact, I'm not even sure what language the code
    > is written in, but it does work admirably.
    >
    > Can anyone suggest a better (hopefully simple)
    > way of branching CSS for different browsers?
    > Or is this script ok to use, despite W3C's apparent
    > disdain for it?
    >
    > thanks for any comments ...


    Google "Internet Explorer Conditional Comments".

    Done right, the W3C validator has no problems with them.
     
    C A Upsdell, Aug 12, 2009
    #2
    1. Advertising

  3. Star Dot Star

    dorayme Guest

    In article <w9pgm.104953$>,
    "Star Dot Star" <> wrote:

    > Somewhere, I picked up a little code snippet
    > to branch the CSS choice to two seperate files,
    > depending on whether the browser was IE or
    > "non-IE".
    >
    > ==============================
    > <!--[if IE]>
    > <link rel="stylesheet" type="text/css" href="style_IE.css" />
    > <![endif]-->
    >
    > <![if !IE]>
    > <link rel="stylesheet" type="text/css" href="style_NON-IE.css">
    > <![endif]>
    > =================================
    >
    >
    > I have found this particularly helpful for design
    > considerations where seperate tweaks are needed
    > for IE vs non-IE code rendering.


    An example of this? The first construction is in *a comment* and most
    modern browsers except IE simply do not see these. The <!-- ... --> is
    for the purpose of authors making comments to remind them and others of
    things about the document, like for example that such and such section
    should not be changed (or to remember to put the dog out for a few
    minutes before retiring to bed... whatever).

    The second construction you have is not a comment and I would be
    surprised if any browser found it any sort of cause to do anything
    reasonable. At best it would simply ignore it. At worst, it might
    complain or cause trouble.

    The idea of the conditional IE comment, your first one above, is to give
    something for IE eyes only (it is some proprietary construction allowed
    by IE on Windows). And the usual good way to make a web site is to make
    it for good browsers. Thus you might have in the head a link to the
    stylesheet:

    <link rel="stylesheet" type="text/css" href="main.css">

    Notice how I have changed the name of the sheet to "main" because it is
    not usually wanted that IE take *no notice at all* of it. Far from it.
    The last few IE's are not so bad that they stuff every possible thing
    up. They just stuff up 99% of things. Only kidding. Why repeat
    everything that does work in IE yet again in a separate sheet?

    So, the idea is you make a sheet for all and you override *a few things*
    in the sheet for IE eyes only. To take an example, it is nice to have
    max-width and min-width sometimes. But IE 6 does not know this one. So
    you might do something else for IE6 like width: 35em. Or you might have
    width: 35em in the main sheet but want different for IE6. You do this by

    <link rel="stylesheet" type="text/css" href="main.css">

    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="style_IE.css" />
    <![endif]-->

    --
    dorayme
     
    dorayme, Aug 12, 2009
    #3
  4. Gazing into my crystal ball I observed "Star Dot Star" <>
    writing in news:w9pgm.104953$:

    >==============================
    ><!--[if IE]>
    ><link rel="stylesheet" type="text/css" href="style_IE.css" />
    ><![endif]-->
    >
    ><![if !IE]>
    ><link rel="stylesheet" type="text/css" href="style_NON-IE.css">
    ><![endif]>
    >=================================
    >


    Notice:

    ..css" /> vs .css">

    >
    > I have found this particularly helpful for design
    > considerations where seperate tweaks are needed
    > for IE vs non-IE code rendering.


    Yup, I find myself using it for IE6 not liking pngs.

    >
    > However, the W3C validator doesn't like the code;


    The first link element is using XHTML, the second HTML. If your doctype
    is XHTML, the validator will complain about the HTML, and if it's HTML,
    the validator will complain about XHTML.

    > in fact, I'm not even sure what language the code
    > is written in, but it does work admirably.
    >


    Since we don't have the entire document, we don't know if you are using
    XHTML or HTML. Better to use HTML and get rid of the trailing slash.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Aug 12, 2009
    #4
  5. Star Dot Star

    John Hosking Guest

    On Tue, 11 Aug 2009 18:47:22 -0700, Star Dot Star wrote:

    > Somewhere, I picked up a little code snippet
    > to branch the CSS choice to two seperate files,
    > depending on whether the browser was IE or
    > "non-IE".
    >
    > ==============================
    > <!--[if IE]>
    > <link rel="stylesheet" type="text/css" href="style_IE.css" />
    > <![endif]-->
    >
    > <![if !IE]>
    > <link rel="stylesheet" type="text/css" href="style_NON-IE.css">
    > <![endif]>
    > =================================
    >
    >
    > I have found this particularly helpful for design
    > considerations where seperate tweaks are needed
    > for IE vs non-IE code rendering.
    >
    > However, the W3C validator doesn't like the code;
    > in fact, I'm not even sure what language the code
    > is written in, but it does work admirably.
    >

    The "works admirably" part is apparently due primarily to a typo.


    In addition to the other comments posted, I would like to point out that
    the second conditional comment, when *correctly* delimited with <!-- at the
    beginning and > or /> at the end, will not do anything useful.

    It's supposed to indicate a style sheet to be used by browsers which are
    not some version of Internet Explorer ("!IE"). But only IE reads these
    comments, so (only) IE knows not to use the style sheet for itself. Other,
    non-IE browsers won't read the comment in the first place, so they won't
    use the style sheet either. Therefore, the declaration is useless and you
    can just delete all three lines.

    Or: do it the way dorayme recommended.

    --
    John
     
    John Hosking, Aug 12, 2009
    #5
  6. Star Dot Star wrote:

    > Somewhere, I picked up a little code snippet


    That has been a common way of getting into troubles from about year 1995. Of
    course, it was common before that too, but much fewer people played with
    code.

    > I have found this particularly helpful for design
    > considerations where seperate tweaks are needed
    > for IE vs non-IE code rendering.


    It's particularly helpful if you want to write pages that depends on minor
    versions and modes of browsers. The usual way to get into such a trouble is
    to try to achieve something pixel-exact.

    > Or is this script ok to use, despite W3C's apparent
    > disdain for it?


    It has nothing to do with scripting. If you don't know the different between
    stylesheets and scripting, you should probably refrain from trying either of
    them before you have read some nice, friendly, but factually correct and
    accurate tutorial on web authoring. Well, maybe just _any_ tutorial.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Aug 12, 2009
    #6
  7. Star Dot Star

    Neredbojias Guest

    On 11 Aug 2009, "Star Dot Star" <> wrote:

    > Somewhere, I picked up a little code snippet
    > to branch the CSS choice to two seperate files,
    > depending on whether the browser was IE or
    > "non-IE".
    >
    > ==============================
    > <!--[if IE]>
    > <link rel="stylesheet" type="text/css" href="style_IE.css" />
    > <![endif]-->
    >
    > <![if !IE]>
    > <link rel="stylesheet" type="text/css" href="style_NON-IE.css">
    > <![endif]>
    > =================================
    >
    >
    > I have found this particularly helpful for design
    > considerations where seperate tweaks are needed
    > for IE vs non-IE code rendering.
    >
    > However, the W3C validator doesn't like the code;
    > in fact, I'm not even sure what language the code
    > is written in, but it does work admirably.
    >
    > Can anyone suggest a better (hopefully simple)
    > way of branching CSS for different browsers?
    > Or is this script ok to use, despite W3C's apparent
    > disdain for it?


    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="style_IE.css">
    <![endif]-->

    <!--[if !IE]><-->
    <link rel="stylesheet" type="text/css" href="style_NON-IE.css">
    <!--><![endif]-->


    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, Aug 12, 2009
    #7
  8. Star Dot Star

    freemont Guest

    On Wed, 12 Aug 2009 16:15:03 +0000, Neredbojias writ:

    > On 11 Aug 2009, "Star Dot Star" <> wrote:
    >>
    >> ==============================
    >> <!--[if IE]>
    >> <link rel="stylesheet" type="text/css" href="style_IE.css" />
    >> <![endif]-->
    >>
    >> <![if !IE]>
    >> <link rel="stylesheet" type="text/css" href="style_NON-IE.css">
    >> <![endif]>
    >> =================================
    >>
    >>
    >> I have found this particularly helpful for design considerations where
    >> seperate tweaks are needed for IE vs non-IE code rendering.
    >>
    >> However, the W3C validator doesn't like the code; in fact, I'm not even
    >> sure what language the code is written in, but it does work admirably.
    >>
    >> Can anyone suggest a better (hopefully simple) way of branching CSS for
    >> different browsers? Or is this script ok to use, despite W3C's apparent
    >> disdain for it?

    >
    > <!--[if IE]>
    > <link rel="stylesheet" type="text/css" href="style_IE.css"> <![endif]-->
    >
    > <!--[if !IE]><-->
    > <link rel="stylesheet" type="text/css" href="style_NON-IE.css">
    > <!--><![endif]-->


    Why not just:

    <link rel="stylesheet" href="styles/cea8.css" type="text/css">

    <!--[if IE]><link rel="stylesheet" href="styles/cea8_IE.css" type="text/
    css"><![endif]-->

    Why two conditionals? The above works fine.

    --
    "Because all you of Earth are idiots!"
    ¯`·.¸¸.·´¯`·-> freemont© <-·´¯`·.¸¸.·´¯
     
    freemont, Aug 12, 2009
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jeff
    Replies:
    13
    Views:
    1,149
    vanilla
    Oct 6, 2007
  2. msdngroup
    Replies:
    5
    Views:
    716
    msgroup
    Jan 30, 2008
  3. msdngroup
    Replies:
    0
    Views:
    590
    msdngroup
    Dec 15, 2007
  4. msdngroup
    Replies:
    5
    Views:
    371
    msgroup
    Jan 30, 2008
  5. Replies:
    16
    Views:
    253
    Richard Cornford
    Sep 7, 2006
Loading...

Share This Page