OrchardCMS / Orchard

Orchard is a free, open source, community-focused Content Management System built on the ASP.NET MVC platform.
https://orchardproject.net
BSD 3-Clause "New" or "Revised" License
2.38k stars 1.12k forks source link

Conditional downlevel revealed IE comments #3876

Open orchardbot opened 11 years ago

orchardbot commented 11 years ago

RichardGarside created: https://orchard.codeplex.com/workitem/20048

Sometimes you want a resource to be seen by all browsers except IE 7 and below.

You can do this with a downlevel-revealed conditional comment in this format:

This is shown in downlevel browsers and IE7 or later.

[Ed. Updated this comment example after point made by @jtkech]

I'm not sure if downlevel-revealed is the official terminoligy, bu that's what's used in this source: http://reference.sitepoint.com/css/conditionalcomments

In Orchard you can get this format if you use:

Style.Include("not-for-ie.css").UseCondition("!IE");

But you can't if you want to allow some versions of IE, no other browsers can see it.

I'd suggest an extra parameter like this: UseCondition(String condition, bool revealDownlevel = false);

For now I'm including the style twice using different conditions like this: Style.Include("ie8plus.css").UseCondition("!IE"); Style.Include("ie8plus.css?a").UseCondition("gte IE 8");

I've had to add a pointless query string to one so Orchard doesn't realise it's the same css file.

orchardbot commented 10 years ago

@sebastienros commented:

I am almost sure it's already there. It was the intent at first. Let's check the code.

orchardbot commented 10 years ago

@jtkech commented:

This is shown in downlevel browsers and IE8 or later. And others browsers

Here, the problem is that ie8 and ie9 will reveal the --> (at the end of the first line) Ok with ie10 and later, and others browsers because they do not use conditional comments Of course, this syntax is right if the condition is "!IE"

So, it's better to use

This is shown in downlevel browsers and IE8 or later. And others browsers

In the code there are two syntaxes, one for the "!IE" condition, and one for the others So, actually it's ok for all the conditions except for those that contain "gt" or "gte"

Maybe ok to use the third syntax for simple conditions that start with "if gt IE" / "if gte IE" Note: Maybe too difficult to implement all complex conditions with mixing of "lt" and "gt"...

Thanks

orchardbot commented 10 years ago

RichardGarside commented:

@jtkech good spot!

I hadn't noticed that the Site Point article does that thing where it gives you a format, then shows why it doesn't always work, and then finally gives you the correct syntax that will work in all browsers.

So as you pointed out, it seems the preferred format for a downlevel-revealed conditional comment is:

<!--[if gte IE 8]><!-->
  <p>This is shown in downlevel browsers and IE7 or later.</p>
<!--<![endif]-->

There's an extra <! on the first line.