Conditional Comments not working on IE-9 - html

I have a page, where I need to show help text based on the version of the IE. I have decided to use conditional comments as per this blog. My html page looks like this ...
<!DOCTYPE html>
<html>
<head>
<title>Application Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<!--[if lt IE 9 ]><body style="margin: 0px;" class="ie9lt"><![endif]-->
<!--[if IE]> <body style="margin: 0px;" class="ie9"> <![endif]-->
<!--[if (gt IE 10)|!(IE)]>-->
<body style="margin: 0px;"><!--<![endif]-->
<div id="id1">
....
....
</html>
I have opened this file on IE 9 but checked the html by inspect the elements option but my body element didn't have ie9 class (for that matter no class) associated with it. Am I missing something here? Please help

I've checked your HTML with IE9 and it works perfectly fine. I can see that body has ie9 class.
Can you see the same in HTML inspector as below? Also, is your browser mode set to IE9?
Sometimes, when you have errors in your HTML document IE automatically switches to Compatibility View mode and then your body class is ie9lt (and not ie9).

you can try to be more specific en work on the root HTML tag:
<!doctype html>
<!--[if IE 7 ]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->

I'd only put style definitions in those comments, nothing else. Let the html document stay as clean as possible. That's probably one of the most messy implementations of that hack there is.

Related

html prefix namespace collision

I currently have the following html prefix namespaces
<html lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/
dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/
og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema#
schema: http://schema.org/ sioc: http://rdfs.org/sioc/ns#
sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core#
xsd: http://www.w3.org/2001/XMLSchema# ">
I was reading something and came across this:
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
Here are my questions:
1./ Does adding this to my html web page interfere/collide with the current prefix namespace I have?
2./ For the situation when it says if (gte IE 9) why is there a closed comment <!--> before the html declaration and <!-- after the declaration
3./ What can i do with this sort of declaration?
You can only have one <html> tag, but you could add the attributes from your first example to the <html> tag in the second. What are you trying to achieve?
Your second example contains conditional comments. They are only supported by older versions of Internet Explorer. Other browsers will treat them as normal HTML comments - i.e. they will ignore them. The last line of the example closes the comment before the HTML tag so that all non IE browsers will still see the <html lang="en"> tag. If it was instead written as
<!--[if (gte IE 9)|!(IE)]><html lang="en"><![endif]-->
the <html> tag would be inside the comment and would therefore be ignored by all browsers.
The purpose of the code you posted is to output an IE-version specific class to the <html> tag. It would allow you to write CSS declarations for targetting specific IE versions, e.g.:
body {
background-color: white;
}
.ie7 body {
background-color: red;
}
This would make the page background white for everyone except users of IE7, for whom it would be red.
In practice these sorts of solutions aren't used as commonly these days, unless you have a pressing need to support IE versions that Microsoft themselves no longer support.

HTML Conditional Comment Support in Firefox. How the Following Piece of Code Works

<!DOCTYPE html>
<!--[if lte IE 9]>
<html class="ie lte9" lang="en">
<![endif]-->
<!--[if !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<!--[if gte IE 10]>
<html class="ie gte10" lang="en">
<![endif]-->
I know conditional HTML comment is for IE only and Firefox etc do not understand that.
How the above conditional html tag works correctly in Firefox and Chrome when NOT IE is in middle of the alternatives? I see that line (<html lang="en">) highlighted in Firefox and chrome. It means FF and chrome understood those correctly and chosen correct tag for itself!
The fact that it's highlighted correctly on SO should give you a hint.
Conditional comments are pieces of text that, from an xml point of view, are normal comments. That is, everything between <!-- and --> is ignored.
Firefox and chrome follow these rules, and so happily ignore the text above and below your <html lang="en"> part.
IE has special parsing rules, so that if a comment contains the text [if * IE *]>stuff<!<![endif]-->, the "stuff" is parsed as html (even though it's strictly a comment). And the other way around, html that is wedged between comments containing the [if !IE] comments, is ignored, even though strictly they should not be.

Exclude single browser from using a CSS class

I'd like to exclude Internet Explorer from using a specific CSS class.
Is this possible?
Details:
I have a css class that looks like -
input[type="radio"]:checked, input[type="radio"]:hover
{
box-shadow: 0px 0px 10px #90BBD4;
}
Since Firefox's latest browser update removed the -moz-box-shadow property and I believe it now uses the default box-shadow instead, ... my Firefox is still working great, but Internet explorer now recognizes it and messes up the look.
How might I go about excluding IE from using this class or work around it somehow?
This will set a class of the IE version the client browser is using.
<!--[if lt IE 7 ]> <html class="ie6" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en" xml:lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="en"> <!--<![endif]-->
Then using CSS you can target it to a specfic browser by using something like:
.ie7 #wrapper
{
display:none;
}
When people feel the need to make their website look different in different browsers (which is the complete opposite of what the Internet should be like...) they use this:
<!--[if IE]><html class="ie"><![endif]-->
<!--[if !IE]>--><html><!--<![endif]-->
Then in your CSS you can put html.ie to make IE-specific rules.
You can use IE conditional comments and set css rules in the css you include inside the comment.
For example:
<!--[if IE]><link rel="stylesheet" href="ie.css" /><![endif]-->
or:
<!--[if IE]><style>*ie style rules here*</style><![endif]-->

Html 5 Reset (html5reset.org) - X-UA-Compatible doesn't work

I'm using the excellent HTML 5 Reset template at html5reset.org and my X-UA-Compatible meta tag doesn't seem to work. Here is what my header looks like:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ieNoHtml5 ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ieNoHtml5 ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ieNoHtml5 ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- the "no-js" class is for Modernizr. -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title of Page</title>
The option to use compatibility view mode in IE is displayed (broken page icon in URL field). The problem is that some of my clients have set their IE9 browsers into 'always use compatibility view' mode, the result being that the website looks like IE7 even though they're using IE9, and X-UA-Compatible is suppose to override this.
Now if I remove the funny header stuff:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
...it suddenly starts working fine.
I've noticed that html5reset.org itself seems to display the broken page icon, so it doesn't seem to work either, but html5boilerplate.com DOES work, and seems to use the same approach.
Adding the X-UA-Compatible into the response header via webserver config seems to fix it, but I'd rather not rely on this approach.
Update: It seems that html5boilerplate.com is just sending X-UA-Compatible in the HTTP response headers if it detects that the browser is IE. This seems the way to go.
HTML5 Boilerplate recommends the webserver config. It's faster and solves a few edge cases that the markup solution doesn't work with: https://github.com/h5bp/html5-boilerplate/blob/v4.0.0/doc/html.md#x-ua-compatible

Using Columnal and the 6th line of code gives an error, can this be fixed?

<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
I've never come across something like this, but it looks a bit odd.. I'm used to seeing it more in this format (the previous line in Columnal):
<!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]-->
Firstly, what does the first code sample do? And do I need to worry about the format of it? Thanks
The first basically says: if the browser is greater than IE 9 or not an IE browser, that snipper of code will be used.
I have never seen such formatting before though.
For downlevel-hidden one should use <!--[if expression]> HTML <![endif]-->
For downlevel-revealed this one: <![if expression]> HTML <![endif]>
For more on this, check Microsoft's 'About'.