How can I hack or write css only for IE 11? I have a website that looks bad in IE 11.I just search here and there but didnt find any solution yet.
Is there any css selector?
This question is related to
css
css-selectors
internet-explorer-11
css-hack
Here is a two steps solution here is a hack to IE10 and 11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
because IE10 and IE11 Supports -ms-high-cotrast you can take the advantage of this to target this two browsers
and if you want to exclude the IE10 from this you must create a IE10 specific code as follow it's using the user agent trick you must add this Javascript
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
and this HTML tag
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
and now you can write your CSS code like this
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
for more information please refer to this websites,wil tutorail, Chris Tutorial
And if you want to target IE11 and later,here is what I've found:
_:-ms-fullscreen, :root .selector {}
Here is a great resource for getting more information: browserhacks.com
In the light of the evolving thread, I have updated the below:
_:-ms-fullscreen, :root .foo { property:value; }
_:-ms-lang(x), .foo { property:value; }
or
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.foo{property:value;}
}
_:-ms-lang(x), .foo { property:value\9; }
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
@media screen\0 {
.foo {property:value;}
}
.foo { property /*\**/: value\9 }
html>/**/body .foo {property:value;}
or
@media \0screen {
.foo {property:value;}
}
*+html .foo {property:value;}
or
*:first-child+html .foo {property:value;}
@media \0screen\,screen\9 {
.foo {property:value;}
}
@media screen\9 {
.foo {property:value;}
}
or
.foo { *property:value;}
or
.foo { #property:value;}
@media \0screen\,screen\9 {
.foo {property:value;}
}
* html .foo {property:value;}
or
.foo { _property:value;}
Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element
Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Adds (e.g) the below to html element:
data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Allowing very targetted CSS selectors, e.g.:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
If possible, identify and fix any issue(s) without hacks. Support progressive enhancement and graceful degradation. However, this is an 'ideal world' scenario not always obtainable, as such- the above should help provide some good options.
You can use js and add a class in html to maintain the standard of conditional comments:
var ua = navigator.userAgent,
doc = document.documentElement;
if ((ua.match(/MSIE 10.0/i))) {
doc.className = doc.className + " ie10";
} else if((ua.match(/rv:11.0/i))){
doc.className = doc.className + " ie11";
}
Or use a lib like bowser:
Or modernizr for feature detection:
You can use the following code inside the style tag:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Below is an example that worked for me:
<style type="text/css">
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
#flashvideo {
width:320px;
height:240;
margin:-240px 0 0 350px;
float:left;
}
#googleMap {
width:320px;
height:240;
margin:-515px 0 0 350px;
float:left;
border-color:#000000;
}
}
#nav li {
list-style:none;
width:240px;
height:25px;
}
#nav a {
display:block;
text-indent:-5000px;
height:25px;
width:240px;
}
</style>
Please note that since (#nav li) and (#nav a) are outside of the @media screen ..., they are general styles.
I have been writing these and contributing them to BrowserHacks.com since the fall of 2013 -- this one I wrote is very simple and only supported by IE 11.
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
and of course the div...
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
So the text shows up in blue with internet explorer 11. Have fun with it.
-
More IE and other browser CSS hacks on my live test site here:
UPDATED: http://browserstrangeness.bitbucket.io/css_hacks.html
MIRROR: http://browserstrangeness.github.io/css_hacks.html
(If you are also looking for MS Edge CSS Hacks, that is where to go.)
So I found my own solution to this problem in the end.
After searching through Microsoft documentation I managed to find a new IE11 only style msTextCombineHorizontal
In my test, I check for IE10 styles and if they are a positive match, then I check for the IE11 only style. If I find it, then it's IE11+, if I don't, then it's IE10.
Code Example: Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)
I will update the code example with more styles when I discover them.
NOTE: This will almost certainly identify IE12 and IE13 as "IE11", as those styles will probably carry forward. I will add further tests as new versions roll out, and hopefully be able to rely again on Modernizr.
I'm using this test for fallback behavior. The fallback behavior is just less glamorous styling, it doesn't have reduced functionality.
I found this helpful
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
Add this under your <head> document
Source: Stackoverflow.com