Example:
<!--[if IE 6]>You suck!<![endif]-->
Does it get its information from the user-agent?
These are called conditional comments, and are only supported by IE, so in short, they're a feature of IE.
See http://www.quirksmode.org/css/condcom.html for a more elaborate explanation.
To answer your question yes it takes information from the user agent but I will just work in IE and it won't work when you change the user agent in chrome or ff.
See this picture is from my windows NT (virtual pc) from ie6:
And I changed the user agent in from ie6 in this picture and you can see:
Internet Explorer's own rendering engine / parser looks for these conditionals inside all HTML comments as it builds the DOM from the markup. So they can go anywhere and will be interpreted in the same order they appear.
This is only valid for Internet Explorer. This will not be read from any other browser and will be taken as comment (that's why it is looking exactly as comment after all). It is not CSS but HTML comment, where IE knowns if the version match to do what is inside - to load css or something else.
It is a IE-specific (and other MS products) functionality only.
Addition: Such clause is used by Outlook also in HTML email messages: <!–[if gte vml 1]>
According to MSDN, IE conditional comments are using Version Vectors that grab the version of IE and Windows Version that the browser is running on. The comments are basically skipped by Firefox and all different browsers since they sit inside an HTML comment. But as IE is supposed to read those, it basically does not skip those specific ones.
I think you have it the other way around: the browser itself renders the CSS if and only if the browser can parse the instruction (in this case, the [if IE] instruction) it's not the server that is serving out dynamic CSS depending on the user-agent.
Related
The scenario is that the website works wonderfully on all machines except the ones where the client works. It's in Africa and I've no hope of getting access to it. He has limited IT knowledge and we don't know a great deal about the companies net policies.
I know that he is using IE8 with the doc mode being 8 as well, I suspected it was running in 7 because of some CSS issues but apparently not.
I use a JSON file and Ajax query to populate an important part of the site. It works well in all main browsers. I've used Dev mode and tried IE7 and IE8 and it still works.
However, his machine doesn't load anything, I output messages into the console and when he checked (confirmed via screen dump) there was emptiness.
What is love is either a way or means of debugging it from here, full details about his machine or some explanation as to why the json can't be read.
If anyone is using IE8 perhaps you could have a peek- it's kingpetroleum.co.uk/conversion.php
The drop down should populate the form web selected.
Thanks for any help.
Edit: there's a redirect on the index page that goes to the old site. Please use the /conversion.php if you check it out
As mentioned in the comments you need to add a polyfill for the JSON object which is not supported on older browsers. See here for more info on browser compatibility of the JSON object. They mention that it should be compatible for IE8, but this is not always the case and if the user is running IE8 in compatibility-mode it won't work either.
You should include the polyfill script file before you load your other scripts, I recommend doing it in conditional comments:
<head>
<!--[if lte IE 8]>
<script src="/path/to/json3.js"></script>
<![endif]-->
</head>
This would only load the polyfill for IE8 and below.
The following code in my html file is working for me:
<!--[if lt IE 9 ]>
<p class="warning">This page uses newer browser features to display larger versions of the small images appearing on the right hand side of the page and to enhance the appearance of the page. If you are seeing the message, your browser doesn't support some or all of these features.</p>
<![endif]-->
I want to expand it to test for other browsers, but I can't seem to find any documentation searching the web, probably because I don't know what to search for. What is the name language used in the test if that is what it is or how would I find documentation for it? I also need to find the names used for other browsers.
Thanks
The [if lt IE9] is what is known as conditional comments.
jQuery includes a method of testing for which browser you're in:
http://api.jquery.com/jQuery.browser/
But you're much better off testing for whatever feature you're looking to use, rather than browser. The BrowserAgent string can be forged quite easily, so you'll sometimes get Firefox users masquerading as IE users, etc.
This is a very broad subject, beyond the scope of an answer here. CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer should give you a good start.
And here is reference for Chrome browser by Google.
I have 3 stylesheets, style_ie6.css, style_ie7.css and style.css. Here's what I have:
I've used browserlab, ietester and browsershots and IE6 & 7 are ignoring my conditionals and loading up the main stylesheet.
*edit: don't know why it isn't displaying... here's the live link:http://www.inishrosshouse.com/index.php
Put the main stylesheet before the conditionals.
I can only speak for IETester but I this is known behaviour there: When multiple instances of Internet Explorer are installed (or active) on the same system, conditional comments will be resolved against the highest IE version available on the system.
Depends on what tags you're putting into the ie6 and ie7 versions. First, I'd recommend moving the style.css first. Then only put tags in the ie6 and ie7 that change a tag to make it work in that browser.
I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html
When IE8 is released, will the following code work to add a conditional stylesheet?
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie-8.0.css" />
<![endif]-->
I've read conflicting reports as to whether this works with the beta. I'm hoping someone can share their experience. Thanks.
One thing to note:
It does work, BUT if you are loading the page/site local network (e.g. Intranet) it will load in IE7 mode by default! (update - localhost[*] is a special case, that does render in standards mode)
This goes against MSFT's original statement of going STANDARDS by default.
e.g.
http://127.0.0.1/mysite/mypage.php <-- IE8 by default (updated!)
http://localhost/mysite/mypage.php <-- IE8 by default (updated!)
http://machinename/mysite/mypage.php <-- IE7 by default
http://192.168.100.x/mysite/mypage.php <-- IE7 by default
http://google.com/ <-- IE8 by default
[*] - Scott Dickens [MSFT] noted in a comment here on the IE Blog that localhost was a special scenario in the Intranet (often used to develop Internet sites) thus would render in Standards mode by default.
To test what mode a page in IE8 is really rendering in, you can use check the developer tools or use this bookmarklet code (only works in IE8):
javascript:
var vMode=document.documentMode;
var rMode='IE5 Quirks Mode';
if(vMode==8){
rMode='IE8 Standards Mode';
} else if(vMode==7){
rMode='IE7 Strict Mode';
}
alert('Rendering in: '+rMode);
It worked for me – both in quirks mode and in standards compliance mode. However, it does not work when switching to IE8 compatibility mode.
Tools/Compatability view settings
uncheck them all
Thank you for your help. I've discovered the solution, apparently the problem was having each style sheet use its own title attribute. Once I took the title off all but the main style sheet, no prob.
This is a weird issue unique to IE8 - and although I've been told its supposed to work that way, something to do with "Stylesheet Preference" - it only serves to create problems since the solution requires you remove the title which could be helpful when scripting, etc - when you need to call the style sheet.
In any case, not sure if this is a bug, or its supposed to be that way, but I hope Microsoft investigates further.
Thanks
Why even bother writing a separate stylesheet for IE8?
If you've already debugged for IE7, you can force IE8 into compatibility mode, and thus display your code as though IE8 were IE7.
All you gotta do is put this RIGHT BELOW the opening head tag. Anywhere else and it won't work.
And then that's a half hour or so less work on average per project, no intense debugging for IE8 needed!
Even Msn.com does this - kind of ironic, eh?
Wrote a blog post about it recently: http://blog.sankhomallik.com/2009/11/16/stop-wasting-time-debugging-on-ie8-when-you-dont-have-to-or-get-ie8-to-behave-like-ie7/
IE8 renders pretty nice compared to IE7, I have stylesheets for IE6, IE7 and IE8; at first i thought conditional comments were not working for IE8 after a bit of experimentation i found some rules were not beeing applied by IE8 just because i needed to put the ancestor or parent class first, e.g.
i had a class like
.niceclass {some:properties;more:properties;}
it worked only if i changed it for something like:
.parentclass .niceclass {some:properties;more:properties;} or
#parentselector .niceclass {some:properties;more:properties;}
btw in my IE8-only css i have only one overriding rule, the rest is rendered almost like firefox, though thats not making me leave FF anyway!.
For my part I wanted to use rounded borders using css. IE8 on Vista does not support such. And since the graphics were so that the rounded borders would show a nice rounded shadow as well, the page looked terrible in IE8.
I tried using conditional comments, but to no avail, IE8 would not evaluate the if IE expression and thus would not include the external stylesheet.
Then I had a look at putting it into quirks / compatiblity mode, however, this still did not work as the CSS hacks I had used did no longer work for the IE8.
Last but least I found a working CSS hack that will render the page correctly when in compatibility mode.
* + html #test[id] { color:lime }
Now, I do not know if this works for IE7 or below, so you would have at least three
different hacks for each IE release you want to support, e.e.
* + html #test,
html+body #test,
* html body #test
{ color:lime }
I wonder what the next regression of the Internet Exploiter will behold for us.