I am working in Firefox (a standards compliant browser, right?), and my page looks fine in Google Chrome, and IE 9 (don't know about Safari), but a few aspects of my page go quirky in Opera. So, in IE 8 thru 6, I can use the [if lte IE8] tags, but is there anything similar for these "standards compliant" browsers (Opera in specific). And yes, I do have the latest version of Opera.
Conditional comments (e.g. [if lte IE8]) only apply to IE and to do any other kind of browser or feature detection you would need JavaScript.
Related
Is there a straightforward way of targeting CSS for IE10 and below? IE11 works fine (the CSS I'm using is now supported) but I need to add specific CSS for anything below.
I know I can use this up to IE9:
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
But conditional comments are not supported in IE10, and I don't want to target IE9 in the content meta tag as I want to use 11/Edge by default (I don't want to be stuck in the past!).
Using IE specific media queries isn't an option as that will apply the CSS to IE11 as well which I don't want to do. The reason I want to target anything below IE11 only is that I have a set of 'backup' CSS that I want to apply when the default 'proper' CSS (which works with IE11, Chrome, Firefox etc.) can't be applied.
I also tried doing it backwards - having the backup CSS as the default and then having the good CSS specifically target:
IE11+ using _:-ms-fullscreen :root
Chrome using #supports (-webkit-appearance:none)
Firefox using #supports (-moz-appearance:meterbar)
But this didn't work, as IE11 was still picking up parts of the default CSS. Chrome and Firefox displayed the specific CSS correctly but then had all sorts of other issues with the rest of the site styles.
Any ideas on how I can specifically target IE10 without also targeting IE11?
Thanks
Don't check for browser but rather the feature you are trying to use. Modernizr allows to check if a specific feature is supported in your current browser or not -> http://modernizr.com/
Also checking for browser in IE 11 won't work like you would expect, they changed the agent name from IE to Mozilla (read more)
Here is more info regarding #support and modernizr -> http://demosthenes.info/blog/964/A-Browser-Native-Modernizr-Using-supports-in-CSS (scroll down a bit)
Just used this on a website I'm doing for a client to target IE10 and 11:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
var userAgent = $('html').attr('data-useragent');
if ( userAgent.indexOf('MSIE 10.0') >=0 || userAgent.indexOf('Trident') >=0 ) {
/* YOUR CODE */
}
This adds the attribute data-useragent to the HTML element and populates it with the navigator.userAgent (a good way to identify the browser). Then it uses the 'if' argument to detect a particular string in that attribute, for example IE10 has MSIE 10.0 and IE11 has Trident.
Hope this helps somebody!
As web developers, we are all used to have code such as the following:
<!--[if lt IE 9]><script src="/js/jquery/jquery-1.10.2.min.js"></script><![endif]-->
<!--[if gt IE 8]><!--><script src="/js/jquery/jquery-2.0.3.min.js"></script><!--<![endif]-->
Where you have conditional statements based on if the client is an older IE browser.
Well, this time I'm working with stacked svg and surprisingly, the browser needing a fix is webkit based browsers. I could make a blanket load for all browsers, but I wonder if I could have a similar conditional loading condition for webkit. I hope I don't have to use js for this.
Okay, I Ruled out a lot of fancy CSS3 properties for my website, but I would like to include animations.
The way I have made my animations was by using Adobe Edge PR 4. Unfortunately, I just figured out that the HTML5 animations are not compatible with IE8 (Oh, here I go ranting about IE8 Backwards-Compatibility again... )
How can I Put in a message in place of it, which will only appear in Internet Explorer 8 or lower?
It works in all browsers I have tried, apart from IE8 or Earlier. I do not wish to move to flash, as I would like better mobile device compatibility.
You could use a conditional comment...
<!--[if lte IE 8]>
<p>The animations are not supported in your browser.</p>
<![endif]-->
I am coding a site in IE 9. The layout looks perfect in IE 9 and IE 8 as well as IE 6 BUT it's completely messed up in IE 7. Also, the issue is when I press the compatibility button in IE 9 - the layout is messed up beyond comprehension..My question is - how can you make the layout ok when one presses compatibilty button in IE 9. Thank you , regards !
It is quite easy to do. Put this code directly after your opening <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
What this does is forces the browser to use the highest standards it has available to it.
All versions of Internet Explorer have different sets of rendering bugs, and the older the browser, the more bugs there are.
If you are developing a site so that it looks good in IE, you have most likely taken advantage of some of the rendering bugs. This means that it will look different in another version of IE, and it will look completely warped in any browser that better follows the web standards.
You should not take advantage of the rendering bugs, but instead avoid things that works differently in IE compared to other browsers. That way it's possible to build sites that both work in different IE versions and also in other browsers.
You should have another browser to test in also, like Firefox, Chrome or Opera. Also verifying the HTML and verifying the CSS are also good tools for finding problems with the code.
You should not bother about the compatibility button. That is for pages that can't cope with standards compliance mode. If your page renders correctly in standards compliance mode, then you can add the meta tag that disables the compatibility button.
Is there a way — for example with something like <!--[if IE 8]> — to get a stylesheet only for IE8 and IE in «Compatibly View»?
I ran into a (SharePoint-Layout-)Problem, which only occurs if IE8 is in «IE8 Compat View»-Browser-Mode, but works just fine if IE8 is «IE8»- or «IE7»-Browser-Mode. If I get the stylesheet only with <!--[if IE 8]>, the css will be ignored if IE8 is in compatibly view because it 'behaves like IE7' — the css will only be loaded if IE8 is in «IE8»-Browser-Mode. But I need it also if he is in the «IE8 Compat View»-Browser-Mode.
See the SO post "Detect IE8 Compatibility Mode", in which user Mark Kamoski mentions the Microsoft article Defining Document Compatibility.
If you browse to the section Determining Document Compatibility Mode, you can use a test on document.documentMode (and document.compatMode for older browsers) to determine the mode. I don't know of how to roll this into a purely CSS implementation, but you can dynamically generate some CSS using some code to achieve this.