How to target all IE browsers (except Microsoft Edge ) in <style> - html

I need to target all IE browser in .... inside html file.
I see on internet
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
But how to target this inside ?
What i need ?
<!-- Internet Explorer ONLY
.actionbar-container {
left: 0!important;
}
<!-- Internet Explorer ONLY

Check those links I think they might be helpful:
https://www.ryadel.com/en/css3-media-query-target-only-ie-ie6-ie11-firefox-chrome-safari-edge/
https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/
You can try creating a style file specifically to target Internet Explorer and it's different versions and use media query like for example :
#media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up {
property: value;
}
}

Related

IE conditional stylesheet not loading

I have a rails app (source) where I am trying to change fix some display bugs in Internet Explorer. In app/views/layouts/application.html.haml I have:
/[if IE]
= stylesheet_link_tag "ie", media: "all"
This seems to be generating the appropriate HTML with the precompiled asset which is downloadable from the server:
<!--[if IE]>
<link href="/assets/ie-21dfbd4e306a3f4685597c40061f9d43.css" media="all" rel="stylesheet" />
<![endif]-->
The contents of the stylesheet are simply:
#logo {
display: none;
}
When the page is displayed in IE, however, the logo still appears.
According to this page in the Microsoft Developer Network Library, conditional comments were first supported in Internet Explorer 5, and are no longer supported in Internet Explorer 10 and later.
If you are in fact not using IE10, do you have a second style sheet for non-IE browsers? Is this before or after this conditional comment in your HTML? If it is after and it contains #logo { display: block; } or similar its styles will override that of the IE specific CSS file.

<!--[if !IE]> is not working as expected in this case

I'm having trouble getting
<!--[if !IE]>
to work. I'm wondering if it is because I have this in my document
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
When I add
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<!--<![endif]-->
to my header for some reason, it doesn't work. However, if I add
<!--[if !IE]><!-->
<style>
All my CSS content in here
</style>
<!--<![endif]-->
to the actual HTML page (in the header) it works.
How can I fix it?
When I removed <!-->, I only checked in Internet Explorer (IE) which was working, but now back in Firefox the no-ie.css file had been applied to Firefox too. So I added back in the <!--> and removed the / (and added that into the main template so the CMS wouldn't add it back in) and all is working back in Firefox, but now the style sheet is being applied to IE!
So I tried
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css">
<![endif]-->
and
<!--[if !IE]> -->
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css">
<!-- <![endif]-->
And that didn't work.
Basically I'm trying to get this page to work: http://css-tricks.com/examples/ResponsiveTables/responsive.php. But move the CSS content into a style sheet. Surely it's got to be simple. What am I missing? I'd rather not use jQuery if I don't have to.
<!--[if !IE]><!--><script src="zepto.min.js"></script><!--<![endif]-->
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->
Note: These conditional comments are
no longer supported from IE 10 onwards.
Browsers other than Internet Explorer treat the conditional statements as comments because they're enclosed inside comment tags.
<!--[if IE]>
Non-Internet Explorer browsers ignore this
<![endif]-->
However, when you're targeting a browser that is Internet Explorer not Internet Explorer, you have to use two comments, one before and one after the code. Internet Explorer will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-Internet Explorer browsers is therefore:
<!--[if !IE]-->
Internet Explorer ignores this
<!--[endif]-->
Note: These conditional comments are no longer supported from Internet Explorer 10 onwards.
Reasons for why the Internet Explorer targeting doesn’t work: Internet Explorer 10 and onward no longer support conditional comments. From the Microsoft official website:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5.
Please see here for more details: Conditional comments are no longer supported.
If you desperately need to target Internet Explorer, you can use this jQuery code to add an ie class to and then use the .ie class in your CSS to target Internet Explorer browsers.
if ($.browser.msie) {
$("html").addClass("ie");
}
$.browser is not available after jQuery 1.9. If you upgrade to jQuery above 1.9 or you already use it, you can include the jQuery migration script after jQuery so that it adds missing parts:
jQuery Migrate Plugin
Alternatively, please check this question for possible workarounds: browser.msie error after update to jQuery 1.9.1
The Microsoft-recommended syntax for downlevel-revealed conditional “comments” is this:
<![if !IE]>
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<![endif]>
These aren’t comments, but they work properly.
I use this and it works:
<!--[if !IE]><!--> if it is not IE <!--<![endif]-->
For targeting Internet Explorer users:
<!--[if IE]>
Place content here for users of Internet Explorer.
<![endif]-->
For targeting all others:
<![if !IE]>
Place content here for Users of all other browsers.
<![endif]>
The conditional comments can only be detected by Internet Explorer. All other browsers treat it as normal comments.
To target Internet Explorer 6, Internet Explorer 7, etc. You have to use "greater than equal" or "lesser than (equal)" in the if Statement. Like this:
Greater than or equal:
<!--[if gte IE 7]>
Place content here for users of Internet Explorer 7 or above.
<![endif]-->
Lesser than:
<!--[if lt IE 6]>
Place content here for users of Internet Explorer 5 or lower.
<![endif]-->
Source: mediacollege.com
First of all, the right syntax is:
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="/stylesheets/ie6.css" />
<![endif]-->
Try these posts:
Conditional comments
How To Create an IE-Only Stylesheet
Another thing you can do:
Check the browser with jQuery:
if($.browser.msie) { // Do something... }
In this case you can change CSS rules for some elements or add
a new CSS link reference:
Read this: Applying stylesheets dynamically with jQuery
This is for until Internet Explorer 9:
<!--[if IE ]>
<style>
.someclass{
text-align: center;
background: #00ADEF;
color: #FFF;
visibility: hidden; // In case of hiding
}
#someotherclass{
display: block !important;
visibility: visible; // In case of visible
}
</style>
<![endif]-->
This is for after Internet Explorer 9
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {Enter your CSS here}
You need to add a space for the <!-- [if !IE] -->. My full CSS block goes as follows, since IE8 is terrible with media queries.
<!-- IE 8 or below -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/Resources/css/master1300.css" />
<![endif]-->
<!-- IE 9 or above -->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
href="/Resources/css/master480.css" />
<![endif]-->
<!-- Not IE -->
<!-- [if !IE] -->
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
href="/Resources/css/master480.css" />
<!-- [endif] -->
For the Internet Explorer browser:
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<![endif]-->
For all non-Internet Explorer browsers:
<![if !IE]>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<![endif]>
For all Internet Explorer versions greater than Internet Explorer 8 or all non-Internet Explorer browsers:
<!--[if (gt IE 8)|!(IE)]><!--><script src="/_JS/library/jquery-2.1.1.min.js"></script><!--<![endif]-->
A conditional comment is a comment that starts with <!--[if IE]> which couldn't be read by any browser except Internet Explorer.
From 2011, conditional comments aren’t supported starting form Internet Explorer 10 as announced by Microsoft in that time: Conditional comments are no longer supported
The only option to use the conditional comments is to request Internet Explorer to run your site as Internet Explorer 9 which supports the conditional comments.
You can write your own CSS and/or JavaScript files for Internet Explorer only and other browsers won't load or execute it.
This code snippet shows how to make Internet Explorer 10 or Internet Explorer 11 run ie-only.css and ie-only.js which contains custom codes to solve Internet Explorer compatibility issues.
<html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<link rel="stylesheet" type="text/css" href='/css/ie-only.css' />
<script src="/js/ie-only.js"></script>
<![endif]-->
</html>
This works for me across all Internet Explorer versions greater than version 6 (Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, Internet Explorer 10, etc., Chrome 3 up to what it is now, and Firefox version 3 up to what it is now):
// Test if running in Internet Explorer or not
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}
In case you are working with IE 10 or above, as mentioned in http://tanalin.com/en/articles/ie-version-js/ the conditional comments are no longer supported.
You might refer to https://gist.github.com/jasongaylord/5733469 as an alternative method, which the Trident version is checked as well from the navigator.userAgent. This also verified in case the browser is working in compatibility mode.
Thank you Fernando68. I used this:
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}
if(isIE()){
$.getScript('js/script.min.js', function() {
alert('Load was performed.');
});
}
I am using this JavaScript code to detect an Internet Explorer browser:
if (navigator.appVersion.toUpperCase().indexOf("MSIE") != -1 ||
navigator.appVersion.toUpperCase().indexOf("TRIDENT") != -1 ||
navigator.appVersion.toUpperCase().indexOf("EDGE") != -1)
{
$("#ie-warning").css("display", "block");
}

Media query workaround in IE8

I was looking to add CSS media query workaround for ie8 in my code..
I came across css3-mediaqueries.js
http://code.google.com/p/css3-mediaqueries-js/
But could not find details or example of how to implement it in my site.
Could you please provide any example for the same.
On the site it says "Usage: just include the script in your pages." and has a few more rules on how its used. It appears to only work for media queries that are inside the style sheet and not media query attributes and won't work with #imported CSS files.
UPDATE
Based on our conversation, the goal is to serve up one stylesheet for the desktop and another for tablets. The natural solution is to do the following:
<link media="screen and (max-width: x)" href="tablet.css">
<link media="screen and (min-width: x)" href="desktop.css">
The problem is that IE6, 7, and 8 will apply both stylesheets. Fortunately, we know for a fact that IE6, 7, and 8 will never be on tablets (or at least not tablets in the modern sense), so we can use Internet Explorer Conditional Comments to prevent these versions of IE from seeing the tablet CSS. Here is an example using downlevel-revealed conditional comments:
<![if gte IE 9]>
<!-- This code is visible to IE9 and above and all non-IE browsers. -->
<link media="screen and (max-width: x)" href="tablet.css">
<![endif]>
<link media="screen and (min-width: x)" href="desktop.css">
For any non-IE browser, <![if gte IE 9]> is a nonsense tag which is ignored. For IE browsers, they do a logical check: if(version >= 9) use content. IE 6, 7, and 8 will therefor ignore the tablet css and only see <link href="desktop.css">. You could alternatively use the more verbose:
<![if gte IE 9]>
<!-- This code is visible to IE9 and above and all non-IE browsers. -->
<link media="screen and (max-width: x)" href="tablet.css">
<link media="screen and (min-width: x)" href="desktop.css">
<![endif]>
<!--[if lt IE 9]>
<!-- This code is only visible to IE8 and below. -->
<link href="desktop.css">
<![endif]-->
Skeleton is a great library for creating sites using media queries, the skeleton site itself is one giant example.
You just need to include the script anywhere in your page, the library will do the rest. Quote from the project homepage:
Usage: just include the script in your pages.
Always helps to read the whole page!

How to resolve css incompabilities/differences between different versions of IE?

I am having an issue wherein my web application behaves different in (IE5 & IE6) as compared with (IE7 & IE8)
There is some CSS Issue but I do not want to get in a situation where I make some changes in CSS File and web application would work fine in (IE5 & IE6) and not in (IE7 & IE8) and so my question is:
How should I approach problem to resolve CSS incompatibities or differences between different version of IE ?
Any guidance and suggestions would be highly appreciated.
Create a cascade of style sheets like so:
<link id="stylesheet1" rel="stylesheet" href="css/style.css" type="text/css" media="all" /
<!--[if IE]>
<link id="stylesheet2" rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 6]>
<link id="stylesheet3" rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 5]>
<link id="stylesheet4" rel="stylesheet" href="css/ie5.css" type="text/css" media="all" />
<![endif]-->
style.css:
.myclass{
width:100px;
}
ie.css:
/* override class from style.css */
.myclass{
width:105px;
}
ie6.css:
/* override class again from ie.css */
.myclass{
width:110px;
}
ie5.css:
/* if necessary, override class again from ie6.css */
.myclass{
width:115px;
}
You only need to over-ride what needs to be over-ridden.
Pekka is right, you need to take each problem/bug/display-difference on a case-by-case basis. So if something isn't showing up right in IE6, you need to adjust it in ie6.css. If even after that, it's not showing up right in IE5, you need to adjust it in ie5.css.
If you practice a little, you will understand better.
Explanation:
<!--[if IE]>
only Internet Explorer browsers (all versions) will see HTML between these statements
<![endif]-->
<!--[if lte IE 6]>
only Internet Explorer 6 or lower browsers will see HTML between these statements
<![endif]-->
<!--[if lte IE 5]>
only Internet Explorer 5 or lower browsers will see HTML between these statements
<![endif]-->
Use conditional comments. Put IE version specific css in specific files only included for the particular version in question.

Hiding some HTML from IE6?

I've tried:
<!--[if lt IE 6.0]>
HTML TO HIDE FROM IE6
<![endif]-->
but unfortunately the stuff gets hidden from firefox too. Anyone have methods that work? I want the stuff to be hidden from only IE6
Thanks
You can actually use conditional comments to hide things from Internet Explorer contrary to the answer from deceze. These types of conditional comments are called 'Downlevel Reveal Conditional Comments'. (These are different from comments used to show things to internet explorer which are more common, those are known as 'Downlevel hidden conditional comments')
<!--[if lte IE 6]><![if gte IE 7]><![endif]-->
<!-- This is a bit mad, but code inside here is served to everything
except browsers less than IE7, so all browsers will see this -->
<!--[if lte IE 6]><![endif]><![endif]-->
However if you already using a downlevel hidden conditional comment to show a IE6 stylesheet just to IE6 then you might be best off just hiding it with CSS.
I hope this helps.
Little confused with your question but Here is the javascript code to detect the version of Internet Explorer. Taken from Detecting Internet Explorer More Effectively. Add the HTML contents which are to be hidden from IE6 in a div and hide it using the function below.
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function checkVersion()
{
var msg = "You're not using Internet Explorer.";
var ver = getInternetExplorerVersion();
if ( ver > -1 )
{
if ( ver == 6.0 )
**Hide the DIV here**
}
alert( msg );
}
Try
<!--[if lte IE 6.0]>
in your CSS, using lte (less-than or equal) rather than lt (less-than).
Conditional comments shouldn't affect Firefox at all as they are commented out and the browser should ignore it. I would check that your Firefox stylesheet is correct and embeded correctly something like this:
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link href="/css/ie6.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->
Edit
After reading Natalie Downe's answer, I'd do it like this:
<!--[if true]><![if !IE]><![endif]-->
<h1>You're not using IE. Well done!</h1>
<!--[if true]><![endif]><![endif]-->
You can use negated conditional comments to hide things from IE but not from other browsers.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<![if !IE]>
<h1>You're not using IE. Well done!</h1>
<![endif]>
</body>
</html>
It renders some invalid markup, but it works.
Reference: http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Natalie Downe's answer is good enough, but there's a shorter and clearer version to hide content from IE6 (or whatever version below 10):
<!--[if !IE 6]><!-->IE6 can't see me<!--<![endif]-->
To target IE6 and below, you can use
<!--[if gt IE 6]><!-->IE6 and lower can't see me<!--<![endif]-->
And if you want to support IE10+ only, you can use
<!--[if !IE]><!-->IE9 and lower can't see me<!--<![endif]-->
In fact, IE10+ doesn't support conditional comments. Inspired by Browserhacks.
Every other browser can see the content, of course, since it's all valid HTML.