Ad Space
Ad Space

Hosting Geared For
your CMSMS needs

CMSMS ready Hosting

Hosting Starting at $15

  • • Hosted Mail
  • • Personal Control Panel
  • • CMSMS 1.8.1 tested
  • • Lightly packed servers
  • • Intrusion Detection
  • • URL monitored
  • • Custom solutions available

Order your hosting Now

CP Blogs

Conditional Comments

Posted by: Jeremy Bass
on May 24, 2009

Category:

HTML, CSS, Presentation, Basics, Coding, SEO

Summary:

Conditional Comments help target version and makes of browsers. One of the best is All browsers and gte IE7


Ad Space

A lot of the text here can be found in these SOURCES:(remember this is my sandbox... this is for my information and is in no way shape or form publishing of someone else's content... only a representation for my benefit only.)

http://msdn.microsoft.com/en-us/library/ms537512.aspx
http://msdn.microsoft.com/en-us/library/bb263988(VS.85).aspx

So you are:
You are Using Foxfire. IE 7 IE 8 FF

About Conditional Comments

One of the most common operations performed in a Web page is to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser is compatible and renders correctly. The browser type can be detected using many different techniques. Most methods of browser detection make use of script on the server or client.

This article introduces conditional comments, which offer certain advantages over scripted browser detection techniques. Conditional comments make it easy for developers to take advantage of the enhanced features offered by Microsoft Internet Explorer 5 and later versions, while writing pages that downgrade gracefully in less-capable browsers or display correctly in browsers other than Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.

TermDescription
expression A combination of operators, features, and/or values used to form a conditional statement.
downlevel browser Any browser except Internet Explorer 5 and later versions. For the purposes of this article, downlevel refers specifically to any browser or browser version that does not support conditional comments.
uplevel browser Internet Explorer 5 and later versions, which support conditional comments.
downlevel-hidden A conditional comment block that is ignored by downlevel browsers. Internet Explorer 5 and later versions render the HTML content if the expression evaluates to true.
downlevel-revealed A conditional comment block that is parsed by downlevel browsers. Internet Explorer 5 and later versions also render the HTML content if the expression evaluates to true.

Benefits of Using Conditional Comments

Conditional comments have certain advantages over scripting methods of browser detection.

  • Low client-side impact.

    When a downlevel browser encounters a downlevel-hidden conditional comment, the browser skips over the HTML inside the comment, and the content elements are not parsed, downloaded, or rendered. This saves client machine resources.

  • No script required.

    Conditional comments do not require scripting and DHTML, and when no scripting is used in a Web page, no scripting engine needs to be loaded. Conditional comments are processed during the downloading and parsing phase, so only the content that is targeted for the browser is actually downloaded. Conditional comments can be combined freely with other browser detection techniques.

  • Separate code from detection logic.

    Using conditional comments, script logic can be separated into smaller and simpler segments of code, which are easier to maintain and understand. Plus, code segments are loaded only by the browser version for which they were intended.

  • Cross-browser.

    Conditional comments have been around since Internet Explorer 5, but their use is not restricted to Internet Explorer alone. Conditional comments can be used to customize content delivered to browsers that support conditional comments and those that do not.

Syntax of Conditional Comments

The basic syntax of each type of comment is shown in the following table.

Comment typeSyntax or possible value
standard HTML comment <!-- Comment content -->
downlevel-hidden <!--[if expression]> HTML <![endif]-->
downlevel-revealed <![if expression]> HTML <![endif]>

The HTML shown inside the syntax block in each of the conditional comments denotes any block of HTML content, including script. Both types of conditional comment use a conditional expression to indicate whether the content inside the comment block should be parsed or ignored.

The conditional expression is formed from a combination of feature, operator, and/or value, as shown in the following table.

ItemExampleComment
IE [if IE] The only currently supported feature is the string "IE", corresponding to Internet Explorer.
value [if IE 7] An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version.
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.
true [if true] Always evaluates to true.
false [if false] Always evaluates to false.

In general this all what is possible -



downlevel-revealed -> <![if expression]>
html
<![endif]>
downlevel-hidden -> <!--[if expression ]>
html
<![endif]-->
expression -> term
expression -> expression | term
term -> value
term -> term & value
value -> true
value -> false
value -> !value
value -> (expression)
value -> comparison
comparison -> feature
comparison -> feature version
comparison -> lt feature version
comparison -> lte feature version
comparison -> gt feature version
comparison -> lte feature version
feature -> [A-Za-z][A-Za-z0-9]*
version -> [0-9][A-Za-z0-9.]*

<![if !IE]>You are Using Foxfire.<![endif]>
<!--[if IE]>You are using Internet Explorer <![endif]-->
<!--[if IE 7]>7<![endif]-->
<!--[if IE 6]>6<![endif]-->
<!--[if IE 5.5]>5.5<![endif]-->
<!--[if IE 5]>5<![endif]-->
<!--[if IE 5.5]> is not interpreted
<!--[if IE 5.500]> is not interpreted
<!--[if IE 5.5000]> is interpreted
<!--[if IE 5.50000]> is not interpreted

<!--[if lt IE 5.6]> is not interpreted
<!--[if lt IE 5.6000]> is interpreted
<!--[if !IE]>I am an HTML application<![endif]-->
<!--[if gte IE 7]><!-->IE 7 IE 8 FF<!--<![endif]-->
<!--[if !IE]>I am an HTML application<![endif]--> Writing more on this later as it comes....
Ad Space

Get Social With It

[+]

Add A Comment

[+]

Code in the picture:
Title:
Your Name(*):
Email:
Notify me of any further comments to this thread:
Website:
Comment(*):
 
Previous page: Hosting FAQ Next page: Experimental