How many external IE Conditional Style-sheets do you use for Internet Explorer in your web projects?
See this page before to answer : http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I usually have one for IE6, and one for IE7. I haven't had the need for an IE8 specific stylesheet, and having a separate stylesheet for all versions of IE isn't really practical.
<!--[if IE]>
global css for all IE's
<![endif]-->
<!--[if IE 7]>
css for specific version
<![endif]-->
yes you have two files but it's ok for me =) usually you just test global one, does this works nice in both versions, if not, then just put it in specific version css =)
btw with this script http://code.google.com/p/ie7-js/ I usually have no issues in ie7
Related
As you can see on this live demo, I have a website with two stylesheets, one for our beloved IE and another one for the normal browsers, set like this on its header:
<link rel="stylesheet" type="text/css" href="stylelab.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_stylelab.css" />
<![endif]-->
Even though I have checked many times its spelling, it seems correct but if you open the link from IE (IE v11, in my case), normal Stylesheet is loaded instead IE one.
To check easily if the other CSS is loaded, in theory, when opening the link from any IE and executing the menu (bottom right button), it has blue background.
What is missing here?
IE stylesheet has the entire normal stylesheed PLUS the additional properties needed for it to work, maybe this is wrong and shoul only have the additional properties..?
Conditional comments are no longer supported
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
See: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
IE stopped support for conditional comments as of IE10.
At this point a better solution is to target CSS based on features rather than vendors/browsers. Tools like modernizr can really help you with this.
I'm looking at tidying the CSS for a large site to optimize it and noticed that throughout there are a lot of the old underscore hacks, e.g.,
_width:200px
I've tried looking online and am having trouble getting any answer post 2010. I'm getting the data through for how users are browsing the site and what browsers they're using but was wondering if it's now generally considered safe to remove these legacy hacks from files?
The underscore hack is only applicable to IE6 and older. If IE6 support is no longer needed, then it is safe to remove all occurrences of the hack (such as the example you have) from your stylesheets as they would otherwise never be used.
Removing these hacks is recommended as IE6 usage is now minimal and keeping your code as clean and hack free as possible is to be desired.
But in the case that a user does use IE6 they should be informed that their browser isn't supported. From the HTML5 Boilerplate:
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
i suggest you simply replace your "hacks" with something like this:
<!--[if lte IE 9]>
<style>
</style>
<link />
<![endif]-->
it will give you the highest amount of control since you can control which versions use which markup.
I've implemented a landing page design for a campaign we are launching at work, and did testing on IE 7 on my XP machine at work and IE 8 on my 7 machine at home. These both worked and so I thought I had beaten IE, but as it turns out, different OS's IE render HTML differently even though they claim to be the same browser.
Anyone who has XP and IE8 will not see the site correctly at all.
I use two different CSS links. One for IE and one for !IE:
<!--[if IE]>
<link href="../images/content/pagebuilder/idop_2010/free-to-believe-IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if !IE]><!-->
<link href="../images/content/pagebuilder/idop_2010/free-to-believe.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
I had to use !IE because IE was still pulling CSS from the good stylesheet, and the IE sheet wouldn't update correctly (a different issue).
If I create IE specific CSS (IE7/IE8 vs just IE) could that fix the problem?
What's a good way to overcome an issue of Operating Systems + IE?
Edit
I installed IE 8 on my work computer and it has the same problem as all the other IE 8 computers. I have Internet Explorer developer tools, and I noticed that IE was running in "IE8 Standards Mode" When I switched it to "IE7 Standards Mode" the layout worked perfectly. I also noticed on my laptop with Windows 7, that the compatibility mode icon was activated. When I turned it off, I was able to duplicate my problem. So now I know for sure it's an IE8 issue in general, not necessarily an OS issue.
I've now created an IE8 specific stylesheet which I'm going to start overhauling to get it looking right.
Here is the site: http://members.opendoorsusa.org/site/PageServer?pagename=IDOP_2010
Anyone who wants to take a look at it and give me suggestions as far as CSS is concerned, I would appreciate it (I didn't do the design, just implementation, so no design critiques please)
Now that I know that this is the problem, I have another question. Why in the world does IE 8 display so different than IE7?!
The best way to overcome IE issues is to use conditional comments:
<!--[if IE 8]>
... link IE 8 specific stylesheet...
<![endif]-->
It seems like you already know about the conditionals so just try an IE8 specific stylesheet and see if it works.
Check this out. In theory, there shouldn't be any differences between different versions of Windows and the same web page on IE 8, but there may be exceptions with ActiveX and possibly the rendering of fonts.
Let me know if an IE8 specific stylesheet works for you.
Did you use the JQuery UI Themeroller? I just discovered a css bug as well that was only in XP, not in Vista. UI tabs and accordions were missing header text. I isolated the issue down to a custom generated theme made by the Jquery UI Themeroller. Replacing the custom theme with a prebuilt theme fixed the problem.
I am getting rid of browser compatibilty issues.
so i come up with idea to load the only css according to browser.
So say if user uses IE then only styleIE.css get loaded if firefox styleFF get loaded and so on.
my question is it correct method if not what care should taken to avoid this compatibilty issues.
because when i solve issues for IE then it opens the new issue in a my stable version of FF
That is done frequently although you probably want to use a general CSS file with the shared styles and combine it with the browser dependent CSS file.
But in fact most CSS problems with different browsers can be solved without this trick and by just using the correct markup and styles...
Usually it's enough to create a stylesheet that looks well in normal browsers, and then make a IE-only supplemental stylesheet that fixes the incompatibilities and include it through conditional comments (although IE8+ is kind of OK and IE7 usually works):
<!--[if IE]>
<link rel="stylesheet" href="/ie_sheet.css" type="text/css">
<![endif]-->
Since IE6 is a horrible monster from the dawn of time, which needs its own specific hacks, you can include a different stylesheet for IE6 (and lower) and IE7 (and higher; not really needed most of the time):
<!--[if lte IE 6]>
<link rel="stylesheet" href="/ie6_sheet.css" type="text/css">
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" href="/ie_newer_sheet.css" type="text/css">
<![endif]-->
Other browsers parse these as HTML comments and ignore them.
See also: a more detailed discussion of conditional comments.
I use a reset stylesheet, a normal stylesheet (i.e., for all standards-compliant browsers) then IE-specific stylesheets that reference the various versions of IE. The IE stylesheets only cover the items that IE has trouble with. I use the Microsoft conditional comments for including those stylesheets, so they are not read by other browsers.
It's not morally reprehensible, but it is less than ideal.You can solve cross-browser compatibility issues by learning a little more about what is going on.
http://hsivonen.iki.fi/doctype/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.positioniseverything.net/explorer.html
Yes, many websites do just that.
That works just fine, the only thing to keep in mind is that, everytime your user loads a page, now the browser has to run through all the conditionals. So as long as it's not excessive (one check for each version of every major browser), nobody will notice.
Now making changes to the css if you've got even just 3 or 4 versions will be a bit of a pain, but everything has it's cost.
I've seen people doing things like this in their HTML:
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
Does this work across all modern browsers and is there a list of browser types that will work with that kind of if statement?
Edit
Thanks Ross. Interesting to find out about gt, lt, gte, & lte.
This works across all browsers because anything except IE sees <!--IGNORED COMMENT-->. Only IE reads the comment if it contains a conditional clause. Have a look at this article
You can also specify which version of IE. For example:
<!--[if IE 8]>
<link rel="stylesheet type="text/css" href="ie8.css" />
<![endif]-->
If you can use Javascript, there are several options:
navigator.appName
navigator.appVersion
link
Or something more robust by using a library such as jQuery.
Finally, you could use the BrowserDetect object from QuirksMode.
Once you have the browser name and version, you can then insert HTML to link to a style sheet or include other tags.
Conditional comments are purely for IE (version 5 and later). The official Microsoft documentation is here. If you are going to use them the best strategy is to conditionally include external stylesheets or javascript files after your normal includes. This means that on IE your IE-specific code will override everything else. On any other browser the code will be treated as comments and ignored by the parser.
Further to Ross' answer, you can only target the Internet Explorer rendering engine with conditional comments; there is no similar construct for other browsers. For example, you can't write conditional comments that target Firefox, but are ignored by Internet Explorer.
The way I achieve the same effect as your example above is to sniff the user agent string. I then deliver a suitable CSS file for that browser. This isn't perfect because sometimes people change their user-agent string for compatibility.
The other way to target different browsers is to utilise browser specific hacks. These are particularly nasty because they usually rely on bugs in the browser and bugs are liable to be fixed!
User-agent sniffing is the best all-round solution in my opinion.