I know this is possible for css conditional formatting:
<!--[if !IE]>
link/css style goes here
<![endif]-->
But is is possible to have an OR statement in there? Such as:
<!--[if !IE or !Opera]>
link/css style goes here
<![endif]-->
Thanks in advance!
Conditional Comments are an IE-specific feature, and will be ignored by opera etc.
They do support "or", however in the form of a pipe like so;
<!-- [if (IE 6)|(IE 7)]>
this is only seen by IE 6 and 7
<![endif]-->
source: msdn
EDIT
As commented, it is indeed preferable to write cross-browser-compatible CSS when possible, and use conditional comments only as a last resort. To make life easier, be sure to avoid quirks mode and use feature detection over user agent sniffing. Check out the modernizr library which helps with the latter.
Related
I never thought that I am stupid, but... I found hundreds of ways to create if statement in html. Some says that right way is:
<!--[if IE]>
You're using IE!
<![endif]-->
<![if !IE]>
You're using something else!
<![endif]>
Or this:
<![if !IE]>
//code
<![endif]>
Or look this fiddle: http://jsfiddle.net/APFZh/2/
All of this DON'T works on my pc. Why? All says that "you have to do this..." and such answers are suggested, so they have to contain working examples, but...
Why they don't work in my browsers? What is the correct way to write conditional statements? Is example from fiddle is working?
I tried to open fiddle in ie 11, not with FF and changed useragent. Epic.
Why it is so ? What I have to do? Help me please!
Conditional comments were disabled in IE10 so they will not work in IE11.
Source
In order to have conditional statements you can use Javascript to detect the browser. Since I see Mootools in your screenshot, here is a guide on how to do that.
Or, here is a JS library that is pretty good: WhichBrowser
That being said, browser sniffing is not recommended. Look into Feature Detection instead.
You are not closing the comment tags correctly - it should look like this
<!--[if IE]>
You're using IE!
<![endif]-->
<!--[if !IE]>
You're using something else!
<![endif]-->
For extensive information on Conditional Statements see - http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
I created my website using a mac. As you know I can't test it out using Internet Explorer, I left it for the last but expecting layout disasters. The website looks perfect in Chrome, Firefox and Safari. As expected, IE shows it differently. How should I move on from here?
Create a style sheet just for IE?
Update my existing style sheet to display the website as expected in all the browsers I mentioned earlier?
To me, (1) seems to be the easiest choice so that I can tailor my CSS to display properly in IE without worrying about Chrome, Firefox and Safari. Do you think this is ok?
Thanks!
You can target specifically your stylesheet for IE only. You will need to put condition code on heading section of the page. See below for examples.
For all IE
<!--[if IE]>
For all IE
<![endif]-->
If you just want to target to specific version of IE then
<!--[if IE 7]>
For only IE 7
<![endif]-->
There are a couple things you can do.
Conditional Comments
Example of a conditional comment to target all versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You can find more conditional comments http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Validate Your Css fixing some obvious markdown mistakes may improve your code immensely.
Which version of IE are you targeting? Most of the major pains with IE CSS2 bugs are in IE6, and to a lesser extent, IE7 - however IE8 and IE9 are much better and I haven't experienced any bugs that would require them to have separate stylesheets.
If you are targeting IE6/7 then you have my sympathy, but I don't see why you should bother as IE6 usage is negligible nowadays. However, if you must, then conditional comments are the least painful way of managing the problem. Simply do this in your <head> element:
<!--[if IE 6]>
<link rel="stylesheet" href="ie6patch.css" />
<![endif]-->
Read more here: http://www.quirksmode.org/css/condcom.html
Also, don't forget to add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to your page force IE8 and IE9 to use Standards mode.
In the future you can use a css reset to minimize differences between browsers. I have used this one in the past: http://developer.yahoo.com/yui/reset/
Also consider using a template like http://www.99lime.com or similar.
Check out conditional comments.
I just wanna know how to do an if-statement in simple HTML. Like the [if IE6] thingy
I'd like to do something like this
[IF 5>6]
How's the syntax? I can't seem to find anything but [If!IE6] and things like that, is that even possible?
Thanks a lot
Edit: I want to compare just scalar numbers, cause I have a dynamically created HTML. For example [If 4 == 6]. I DON'T WANT TO CHECK IE VERSIONS.
Not in HTML. Consider using JavaScript instead.
No, it's not possible. What you have seen is conditional comments in IE, which only checks version numbers of IE, and is typically used to inject IE specific style sheets to fix CSS bugs for that particular browser.
The <!--[if IE]> syntax only works in Internet Explorer. You'll need to use javascript or css to conditionally display html in other browsers.
If you want to check for browser versions:
<!--[if lt IE 7]>
<!-- For LOWER than IE7 -->
<![endif]-->
<!--[if IE 6]>
<!-- For JUST IE6 -->
<![endif]-->
<!--[if gt IE 7]>
<!-- For HIGHER than IE7 -->
<![endif]-->
Other than that, you cannot use if statements in HTML, as it is a markup language and not a programming language. You need to do it either server side or with Javascript.
I believe this is the page you are looking for http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
(I typed into google "IE conditional comments". It was the second result.)
The closest thing I can think of is *NgIf or using ternary expressions in your html using angular - however, the assignment of the variables and the logic of that ngif statement would be done in javascript.
[If lte IE 6]
This selects IE 5, 5.5 and 6. It's the closest to what you want.
If you insert Javascript into your code, then you can easily use the if statement.
To insert you have to use script and /script
So far I know, the conditional comments are only supported for different Versions of IE.
Likeways, can we provide conditional comments for other browsers too.
If Yes, How? If no, what could be the best alternative?
CSS Conditional Comments are meant only for IE.. However, you can detect Firefox:
If the following code fails to exclusively detect Firefox..
<!--[if !IE]>
...statements...
<![endif]-->
Use "Downlevel-revealed Conditional Comments" to get it working...
<![if !IE]>
...statements...
<![endif]>
Example to force Firefox to use an exclusive css..
<![if !IE]>
<link href="css/ff.css" rel="stylesheet" type="text/css" />
<![endif]>
Having said that, you should not be much worried about other browsers which are standard-compliant.
As far as I know, CSS conditional statements are an IE exclusive. They should not be needed for other browser since they follow standards reasonably well. Why would you need them?
There are not conditional comments for other browsers only IE and versions of IE.
You can using Javascript do checks for other browsers and apply styles as follows.
You can do a check for the browser to not be IE with conditional comments but just no.
I would suggest visiting W3.org and building your site to be functional with a standard conforming browser then use the conditional comments to fix up how it loads in IE if there are issues (there usually is).
Check out the CSS Browser Selector plugin. I use it on my site, you basically just write the CSS and tell which browser you want it to target. I use it on my site and it works great!
Hope it helps.
As noted in other answers there are no conditional comments for browsers other than IE. Using JS detection is the way to go here.
If you want to have the commented element affect the IE condition AND other browsers then simply do this:
<!--[if gt IE 8]><!-->
<link href="sample.css" rel="stylesheet" type="text/css" />
<!--><![endif]-->
As you can see from the syntax highlighting the link element is not commented out so it will be visible for non-IE browsers and for IE it will follow the condition (greater than IE 8 in this example).
I wish there was a solution to this, especially for email rendering engines. There are even conditional comments for outlook, but none for Gmail.
<!--[if gte mso 9]>
<![endif]-->
Just made a site using great standards compliant semantic HTML and CSS. It looks great in Gecko, Web Kit, but IE7 mangles it (of course). Any progress yet on this front, or do I have to go through a tonne of hacks as is standard with IE.
Try this
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE8.js"></script>
<![endif]-->
Or you could write a separate css file for IE7
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
There are several well-known hacks for hiding IE-specific demangling rules from comformant browsers. Most of them depend on IE mis-parsing certain things, e.g. "* html ... { }" which other browsers will ignore. A simple google search will show any number of these.
My rule is first to make the page work in FF (or similar), and then break it so it works in IE.
I find that developing a site first for IE, then adapting it to other browsers is less time consuming than the other way around. But, it's a little late for that!
I would suggest that you have a separate CSS file for IE (just copy and paste and rename current CSS) then have a browser sniffer and script that requests the IE CSS for IE users. Then rewrite just the IE CSS. Does that make sense? At least that way, the site is still up for the other browsers and you're just working on IE.