Conditional comments are conditional statements interpreted by Microsoft Internet Explorer versions 5 through 9 in HTML source code. They can be used to provide and hide code to and from these versions of Internet Explorer. Conditional comments are not supported in Internet Explorer 10 and 11.
Conditional comments in HTML [1] first appeared in Microsoft's Internet Explorer 5 browser, although support has now been deprecated. In Internet Explorer 10, HTML conditional comments are not supported when the page is in standards mode (document mode 10). [2] JScript conditional comments were introduced in Internet Explorer 4, and they continued to be supported in Internet Explorer 10, in standards mode or compatibility mode.
Here is a simple example that demonstrates how conditional comments work.
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js" integrity="sha512-BWbLJlfp8hzXlxT6K5KLdxPVAj+4Zn2e4FVq5P7NSFH/mkAJ18UiZRQUD4anR3jyp0/WYkeZ0Zmq5EWWrDxneQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><![endif]-->
There are two types of "conditional comments": downlevel revealed, and downlevel hidden.
The basic syntax of each type of comment is shown in the following table. The first comment shown is the basic HTML Comment, which is included for the purpose of comparison and to illustrate the different syntax used by each type of conditional comment.
Comment type | Syntax 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, depending on the feature. The following table shows the supported features and describes the values each feature supports.
Item | Example | Comment |
---|---|---|
IE | [if IE] | The string IE is a feature corresponding to the version of Internet Explorer used to view the Web page. |
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. For more information, see Version vectors. |
WindowsEdition | [if WindowsEdition] | Internet Explorer 8 on Windows 7. The string WindowsEdition is a feature corresponding to the edition of Microsoft Windows used to view the Web page. |
value | [if WindowsEdition 1] | An integer corresponding to the edition of Windows used to view the Web page. Returns a Boolean value of true if the value matches the edition being used. For information about supported values and the editions they describe, see the pdwReturnedProductType parameter of the GetProductInfo function. [3] |
true | [if true] | Always evaluates to true. |
false | [if false] | Always evaluates to false. |
The following table describes the operators that can be used to create conditional expressions.
Item | Example | Comment |
---|---|---|
! | [if !IE] | The logical NOT operator. This is placed immediately in front of the feature, operator, or subexpression to invert 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. |
( expression ) | [if !(IE 7)] | Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. |
& | [if (gt IE 5)&(lt IE 7)] | The logical AND operator. Returns true if all subexpressions evaluate to true. |
| | [if (IE 6)|(IE 7)] | The logical OR operator. Returns true if any of the subexpressions evaluates to true. |
Below are two examples of a "downlevel hidden" conditional comment:
<!--[if IE 8]><link href="ie8only.css" rel="stylesheet"><![endif]-->
or
<!--[if lte IE 7]><style type="text/css">/* CSS here */</style><![endif]-->
The directive in the first example will let IE 8 read the specified CSS file, while IE 7 or older IE versions will ignore it. Browsers other than IE will also ignore it because it looks like a standard HTML comment. The tag in the second example will let IE versions 5.0 through 7 read the internal CSS style. With different uses of this tag you can also single out IE 6, IE 5, or versions of IE that are newer (greater) or older (less) than a specified version.
Below is an example of a "downlevel revealed" conditional 'comment', which is not an (X)HTML comment at all, despite the misleading name, using the default Microsoft syntax:
<![if !IE]><linkhref="non-ie.css"rel="stylesheet"><![endif]>
This example shows content that should be exposed only to non-IE browsers, as the condition evaluates to "false" on IE (and hence the content is ignored), while the tags themselves are unrecognized (and hence ignored) on non-IE browsers. This is not valid HTML or XHTML.
Microsoft acknowledges this syntax is not standardized markup, [4] intending these tags to be overlooked by other browsers and expose the content in the middle. In order to ensure compliance with W3C standards, some web developers use an alternative technique [5] for downlevel-revealed conditional comments:
<!--[if !IE]>--><linkhref="non-ie.css"rel="stylesheet"><!--<![endif]-->
While somewhat confusing in structure, this specific syntax is valid (X)HTML and is useful for conditional sections intended specifically for non-IE browsers; if the condition evaluates to true (for example, if writing code meant to display on non-IE browsers and on some versions of IE), IE will then display the -->
present before the HTML content. This problem is easily solved by prepending <!
to the initial -->
as follows:
<!--[if gt IE 6]><!--> This code displays on non-IE browsers and on IE 7 or higher. <!--<![endif]-->
The extra <!
is ignored by non-IE browsers, and it is also ignored by IE regardless of the condition: if false, everything within the conditional comment is ignored, and if true, the resulting tag <!-->
is unrecognized and therefore ignored.
Starting with Internet Explorer 4, there exists a similar proprietary mechanism for adding conditional comments within JScript, known as conditional compilation. [6]
Code examples:
<script>/*@cc_on document.write("You are using IE4 or higher");@*/</script>
There were also several predefined variables, [7] though these cannot be relied on any longer as Microsoft altered the JScript engine of IE6 with XP SP3 and it now reports as @_jscript_version==5.7
. As a result, a possible way to detect Internet Explorer version using conditional compilation can be seen below:
<script>/*@cc_on @if (@_jscript_version == 11) document.write("You are using IE11 with an older document mode"); @elif (@_jscript_version == 10) document.write("You are using IE10"); @elif (@_jscript_version == 9) document.write("You are using IE9"); @elif (@_jscript_version == 5.8) document.write("You are using IE8"); @elif (@_jscript_version == 5.7) document.write("You are using IE" + (!window.XMLHttpRequest ? 6 : 7)); @elif (@_jscript_version == 5.6) document.write("You are using IE6"); @elif (@_jscript_version == 5.5) document.write("You are using IE5.5"); @elif (@_jscript_version < 5.5) document.write("You are using a version older than IE5.5"); @else document.write("You are using an unknown version of IE"); @end@*/</script>
However, conditional compilation is no longer supported in Internet Explorer 11 Standards mode. [8]
The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Internet Explorer is a deprecated series of graphical web browsers developed by Microsoft that were used in the Windows line of operating systems. While IE has been discontinued on most Windows editions, it remains supported on certain editions of Windows, such as Windows 10 LTSB/LTSC. Starting in 1995, it was first released as part of the add-on package Plus! for Windows 95 that year. Later versions were available as free downloads or in-service packs and included in the original equipment manufacturer (OEM) service releases of Windows 95 and later versions of Windows. Microsoft spent over US$100 million per year on Internet Explorer in the late 1990s, with over 1,000 people involved in the project by 1999. New feature development for the browser was discontinued in 2016 and ended support on June 15, 2022, in favor of its successor, Microsoft Edge.
VBScript is an Active Scripting language developed by Microsoft that is modeled on Visual Basic. It allows Microsoft Windows system administrators to generate powerful tools for managing computers without error handling and with subroutines and other advanced programming constructs. It can give the user complete control over many aspects of their computing environment.
JScript is Microsoft's legacy dialect of the ECMAScript standard that is used in Microsoft's Internet Explorer 11 and older.
An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The most commonly used version is HTML 4.01, which became official standard in December 1999. An HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified. Elements can also have content, including other elements and text.
Vector Markup Language (VML) is an obsolete XML-based file format for two-dimensional vector graphics. It was specified in Part 4 of the Office Open XML standards ISO/IEC 29500 and ECMA-376. According to the specification, VML is a deprecated format included in Office Open XML for legacy reasons only.
Trident is a proprietary browser engine for the Microsoft Windows version of Internet Explorer, developed by Microsoft.
JavaScript Style Sheets (JSSS) was a stylesheet language technology proposed by Netscape Communications in 1996 to provide facilities for defining the presentation of webpages. It was an alternative to the Cascading Style Sheets (CSS) technology.
Microsoft Internet Explorer 5 (IE5) is the fifth, and by now, discontinued, version of the Internet Explorer graphical web browser, the successor to Internet Explorer 4 and one of the main participants of the first browser war. Its distribution methods and Windows integration were involved in the United States v. Microsoft Corp. case. Launched on March 18, 1999, it was the default browser in Windows 98 Second Edition, Windows 2000 and Windows ME and can replace previous versions of Internet Explorer on Windows 3.1x, Windows NT 3.51, Windows 95, Windows NT 4.0 and the original release of Windows 98. Although Internet Explorer 5 ran only on Windows, its siblings Internet Explorer for Mac 5 and Internet Explorer for UNIX 5 supported Mac OS X, Solaris and HP-UX.
In a web browser, an access key or accesskey allows a computer user to immediately jump to a specific web page via the keyboard. They were introduced in 1999 and quickly achieved near-universal browser support.
In computing, quirks mode is a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for old web browsers instead of strictly complying with W3C and IETF standards in standards mode. This behavior has since been codified in the standard, so what was previously standards mode is now referred to as simply no quirks mode.
A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.
Windows Internet Explorer 8 (IE8) is the eighth and, by now, discontinued version of the Internet Explorer web browser for Windows. It was released by Microsoft on March 19, 2009, as the successor to Internet Explorer 7. It was the default browser in Windows 7 and Windows Server 2008 R2.
Internet Explorer 9 or IE9 is the ninth version of the Internet Explorer web browser for Windows. It was released by Microsoft on March 14, 2011, as the ninth version of Internet Explorer and the successor to Internet Explorer 8. Microsoft released Internet Explorer 9 as a major out-of-band version that was not tied to the release schedule of any particular version of Windows, unlike previous versions. It is the first version of Internet Explorer not to be bundled with a Windows operating system, although some OEMs have installed it with Windows 7 on their PCs. Internet Explorer 9 is the last version that is called Windows Internet Explorer. The software was rebranded simply as Internet Explorer starting in 2012 with the release of Internet Explorer 10.
Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing
property, the problem had mostly been resolved.
Internet Explorer 10 (IE10) is the tenth, and by now, discontinued, version of the Internet Explorer web browser and the successor to Internet Explorer 9, released by Microsoft on September 4, 2012, shortly after the completion of Windows Server 2012. It was the default browser that shipped with Windows 8 and Windows Server 2012 and can replace previous versions of Internet Explorer on Windows 7 and Windows Server 2008 R2 but unlike version 9, this version doesn't support Windows Vista, Windows Server 2008 or earlier.
In software development, a polyfill is code that implements a feature of the development environment that does not natively support the feature. Most often, it refers to a JavaScript library that implements an HTML5 or CSS web standard, either an established standard on older browsers, or a proposed standard on existing browsers. Polyfills are also used in PHP and Python. Formally, "a polyfill is a shim for a browser API."