Valid "downlevel revealed" conditional comments - html

IE<9 does not understand data: URIs, so I'm outputting two different stylesheets: one with normal links to images for IE 8 and below, and one with base64-encoded inline images, for other browsers.
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/public/themes/url.style.css">
<![endif]-->
<!--[if gt IE 8]>-->
<link rel="stylesheet" type="text/css" href="/public/themes/b64.style.css">
<!--<![endif]-->
Problem: In IE9, I'm seeing a stray --> output on the page. Because it's inside the <head> it appears at the very top of the page. How should I get rid of it?

And I've got it. I did search for valid conditional comments, and found an article telling me to do what I was already doing, but then by chance I came across a by-the-way remark in another answer here which showed me the correct way to do it:
<!--[if lte IE 8]>
<span>This is for IE 7 and below.</span>
<![endif]-->
<!--[if gt IE 8]><!-->
<span>This is for all other browsers (IE 8, and browsers which don't do conditional comments).</span>
<!--<![endif]-->
See the difference: <!--[if gt IE 8]><!--> instead of <!--[if gt IE 8]>-->.

Related

How do I target css styling to other browsers except for IE9

I am trying to target a particular styling for all browsers except for ie9 and below.
I did this to target IE9 and below:
<!--[if lte IE 9]>
<link rel="stylesheet" href="css/ie/ie.min.css">
<![endif]-->
I do not recall what would be the other way to target all other browsers except for IE9. I do recall there is a way to do it like I did to target IE9 and below but I do not recall.
Any help would be appreciated
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie/ie.min.css">
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" href="css/ie/ie-9.min.css">
<![endif]-->
<!--[if gt IE 9]><!-->
<link rel="stylesheet" href="css/normal.min.css">
<!--<![endif]-->
This method should provide you with separate stylesheets for less than IE 9, IE 9, and more than IE 9 (including all non-IE browsers). The trick for the last conditional is <!--> and <!--<!, which cause Edge and non-IE browsers to interpret the if and endif as separate comments.
To target a single version in particular, use <!--[if IE #]>.
As pointed out by jkdev, since IE 9 is the last version to support conditional comments, the last conditional could have been written:
<!--[if !IE]><!-->
<link rel="stylesheet" href="css/normal.min.css">
<!--<![endif]-->
The result would be the same as the first snippet: only IE 10-11, Edge, and non-IE browsers would get css/normal.min.css. None of the earlier IE versions would get this file since they would evaluate if !IE.

Conditional comment for !IE breaks for old versions of Firefox

I am in a situation where I need to load one of two stylesheets based on what browser is accessing the page:
if anything but IE then load the "new" stylesheet
if IE >= 9 then load the "new" stylesheet
if IE < 9 then load the old stylesheet
This is the code used to achieve that:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
This works well in all modern browsers, and old versions of IE correctly load the old styles. However in old versions of Firefox (3.6) and potentially others, the new css is not loaded and instead --> is printed to the web page. This is because of the line that states !IE - <!--> has to be added, otherwise IE 11 does not load the stylesheet. If I take that out it works properly in Firefox 3.6.
What is the proper way to set up these conditional comments to ensure it will work properly for the various browsers and versions?
I believe the problem lies in one of the <!-- delimiters, specifically the one in your IE9 conditional statement just before its corresponding <![endif]-->. The <!--[if gte IE 9]> comment hasn't been terminated yet, so it's actually invalid to have another <!-- delimiter there since it's not possible to nest comments in HTML. While current versions of Firefox behave as expected, I wouldn't be surprised if this was the reason Firefox 3.6 handled it differently.
If you get rid of that, Firefox 3.6 behaves correctly:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
In fact, you can make your code much DRYer by giving your IE9 conditional statement the <!--> treatment, like so:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
This eliminates the extra reference to the "new" stylesheet altogether while still allowing all browsers as well as IE9 to access it. Note that no other version of IE beyond 9 actually supports conditional comments anymore, so you could go further and change gte IE 9 to just IE 9, and it would still work in newer versions of IE (along with other browsers). Of course, you are welcome to keep it that way for the sake of clarity.
On a side note, although I said that it's not valid to have a <!-- sequence within a comment, the <!--> is interpreted as <! followed by the end delimiter --> rather than a <!-- followed by a >, which is why that bit is fine.

If statements for browser support

Are If statements available for html because I want this text to pop up when someone is using internet explorer <p>You are using Internet Explorer we don't support this browser</p>
And for firefox </p>Your browser is supported</p>
Is this possible?
HERE IS MY CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My title</title>
<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is <comment>not</comment> IE<br />
<!-- <![endif]-->
</p>
</head>
<body>
MY code here
</body>
</html>
There is no HTML if statement, but Internet Explorer has something called conditional comments. So you could say
<!--[if IE]>
<p>You are using Internet Explorer we don't support this browser</p>
<![endif]-->
<!--[if !IE]> -->
</p>Your browser is supported</p>
<!-- <![endif]-->
Although, the second part covers everything else, not only Firefox browser.
Take a look at jQuery.browser: http://api.jquery.com/jQuery.browser/
The $.browser property provides
information about the web browser that
is accessing the page, as reported by
the browser itself. It contains flags
for each of the four most prevalent
browser classes (Internet Explorer,
Mozilla, Webkit, and Opera) as well as
version information.
Available flags are:
webkit (as of jQuery 1.4) safari
(deprecated) opera msie mozilla This
property is available immediately. It
is therefore safe to use it to
determine whether or not to call
$(document).ready(). The $.browser
property is deprecated in jQuery 1.3,
and its functionality may be moved to
a team-supported plugin in a future
release of jQuery.
Because $.browser uses
navigator.userAgent to determine the
platform, it is vulnerable to spoofing
by the user or misrepresentation by
the browser itself. It is always best
to avoid browser-specific code
entirely where possible. The $.support
property is available for detection of
support for particular features rather
than relying on $.browser.

IE Stylsheets/ Conditional comments Not working

I am trying to make a website look better in IE, so i decided to use conditional comments. So I used this conditional comment to link to the stylesheet.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![end if]-->
That doesn't work, and it will either use the default stylesheet or it will display a blank page. So then i read somewhere that the comments were like this.
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<!--<![endif]-->
So i tried that and it did the exact same thing as the other one but the --> shows up on the page. I am still somewhat new to html, and any help would be nice.
Here is the correct format of the comment:
<!--[if IE ]>
Special instructions for IE here
<![endif]-->
here is a NOT IE comment:
<!--[if !IE ]>
According to the conditional comment this is not IE
<![endif]-->
source: http://www.quirksmode.org/css/condcom.html
edit: just noticed that their 'not' example is wrong. i have corrected it.
You should use like this :
Syntax :
<!--[if IE 8]> = IE8
<!--[if lt IE 8]> = IE7 or below
<!--[if gte IE 8]> = greater than or equal to IE8
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
reference link 1
reference link 2
Also its always good to declare what versions of IE you want to pull up the conditional sheet, for example if you want IE 9 and lower it would be as stated below.
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![endif]-->
HTML conditional comments were disabled in IE10. CSS conditional comments can be used to target styling in IE10+.
https://www.mediacurrent.com/blog/pro-tip-how-write-conditional-css-ie10-and-11/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// IE10+ CSS here
}
When faced with this problem, we went with the <script type="module"> solution. More details here.
We also wanted to access global variables we set using the ES6 code from other ES5 scripts to determine if we wanted to do something different. Obviously an export isn't going to work in this case, but you can assign variables to window.<something> and then access them like you would any other variable.
Only browsers running ES6 and supporting modules will run scripts included with type="module".

Browser Conditional CSS Stylesheets

Im trying to use conditional stylesheets to target different versions of IE.
I have the following
<!--[if IE 7]>
<link href="_includes/css/ie7.css" rel="stylesheet">
<![endif]-->
<!--[if gte IE 7]>
<link href="_includes/css/ie7.css" rel="stylesheet">
<![endif]-->
<!--[if lte IE 7]>
<link href="_includes/css/ie6.css" rel="stylesheet">
<![endif]-->
Which works okay, but in IE8 it seems to pickup ie6.css and I cant for the life of me figure out why. Has anybody any idea?
Thanks
Ive also used
<!--[if IE 8]>
with no luck
lte means less than or equal to, therefore you probably want:
<!--[if lte IE 6]>
<link href="_includes/css/ie6.css" rel="stylesheet">
<![endif]-->
I'd guess it's possible IE 8 is identifying as IE 7 because it's in compatibility mode. Check your DOCTYPE is correct.
Ahhh I figured it out!
<!--[if IE 6]>