CSS-Hacks / -Selektoren für Microsoft Edge (Spartan), IE11, IE10 und IE9
Obgleich Microsofts Internet Explorer mit jeder Version “schneller, innovativer und sicherer” wird, kommen Webentwickler bisweilen nicht umher, kreative Darstellungs”features” jenes fortschrittlichen Browsers aus Redmond gezielt auszubügeln. Ungeachtet der kloßbrühenklaren Tatsache, dass Browserweichen per se ein Unding modernen Web Engineerings darstellen. Dies erkannte letzten Endes gar Microsoft – und beendete ab Internet Explorer 10 dankbarerweise die Unterstützung der hassgeliebten Conditional Comments zur Ausführung unterschiedlichen HTMLs.
Lange Rede, kurzer Sinn: Die Idee war gut. In der freien Wildbahn hingegen sind mitunter weiterhin korrigierende Deklarationen für die verschiedenen Versionen des Internet Explorers und ggf. sogar des neuen Windows 10-Steckenpferdes Microsoft Edge (Projektname: Spartan) von Nöten. Nachfolgend findet sich daher eine kurze Auflistung bewährter CSS-Hacks / CSS-Selektoren für Microsoft Edge, IE11, IE10, IE9 sowie IE8. Und der Rest? Nun, alle niedrigeren Internet Explorer-Versionen sollen gepeinigt in der Hölle schmoren 😀
CSS-Hack für Micosoft Edge (Project Spartan) ONLY
_:-ms-lang(x), _:-webkit-full-screen, .selector { property: value; }
CSS-Hack für Internet Explorer 11 ONLY
_:-ms-fullscreen, :root .selector { property: value; }
CSS-Hack für Internet Explorer 10 + IE11
_:-ms-lang(x), .selector { property: value; }
CSS-Hack für Internet Explorer 10 ONLY
_:-ms-lang(x), .selector { property: value\9; }
CSS-Hack für Internet Explorer 9 + IE10, IE11
_::selection, .selector { property: value\0; }
CSS-Hack für Internet Explorer 9 ONLY
@media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .selector { property: value; } }
CSS-Hack für Internet Explorer 8 + IE9, IE10, IE11
@media screen\0 { .selector { property: value; } }
CSS-Hack für Internet Explorer 8 ONLY
@media \0screen { .selector { property: value; } }
So. Noch mehr Hacks für weitere Versionen des Internet Explorers oder gar andere gängige Browser à la Chrome & Firefox gefällig? Dann guckst du schleunigst mal bei browserstrangeness.bitbucket.org vorbei – hier wird dir geholfen 🙂
17 Kommentare
I see you found the CSS hacks I worked out for MS Edge and IE11, please check my site for more – I keep them updated. Have fun!
The rest of them took a lot of time to create. There are many more also at jeffclayton.wordpress.com and my test page at http://browserstrangeness.bitbucket.org/css_hacks.html for the other major browsers as well. Cheers!
Hi Jeff,
what the … you’re crazy, aren’t you? So many hacks for so many browsers – that borders on insanity. Well, I for myself found them on a chinese blogspot – but maybe it’s author got them from your website again.
Thanks a lot for your excellent work – you sweetened the lives of many web developers 🙂
Krony
I may already know the site, if it is the same one the Chinese person contacted me 😉 — You are quite welcome. I actually created every one of the ones on your page here – thank you for the postback – and glad to see you (and others) find them useful!
Also – I love this page, beautiful work!
Correction – the two IE8 slash-zero hacks on the bottom of the list I did not create, but tested them for browser compatibility at browserhacks, and use them as a base for other hacks I have written. The rest I created from scratch.
You are right about their being many of them to the point of insanity… maybe so. I spent several years attempting to find a way to reach every single version of every browser. Not always CSS will do, some require javascript adjustments. Often the research takes time to find a way. Sometimes it is not possible to separate versions with CSS alone. But I will keep trying as I find time.
Hi Jeff,
well, web developers around the world are praising you for this. They’re saving lots of time, nerves and money with those browser-hacks, I think.
Seriously – good job. Keep it up 🙂
Kind regards, Krony
You got it! I am testing the Safari 9 beta at this time for the next few…
http://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome/25975282#25975282
MS Edge 12 (Only): @supports (-ms-accelerator:true) and (not (color:unset)) { .selector { property:value; } }
Edge 13+: @supports (-ms-accelerator:true) and (color:unset) { .selector { property:value; } }
Edge 12 Only: @supports (-ms-accelerator:true) and (not (color:unset)) { .selector { property:value; } }
Merry Christmas!
Waaah! Ich könnt dich knutschen! 🙂 Der mistige Mist-IE hat mich zwei Tage meines Lebens gekostet, dank deiner Hilfe hab ichs nun doch noch rausgefummelt. Hier also nochmal für die ganz Doofen wie für mich auch zum Kapieren:
@media screen\0 and (max-width:767px){ /*hier kommt das Design für die Kleinen rein*/ }
@media screen and (min-width:768px\0){ /*hier kommt das Design für die Großen rein*/ }
(ich hoff, das wird auch so angezeigt?) Mein Problem war das mit dem “\0” (abgesehen von dem Problem, dass IE kein min/max-with kann und bei Flexboxen die Bildschirmgröße einfach ignoriert – zu was gibts schließlich waagrechte Scrollbalken?! *rumgrummel*).
Jedenfalls: so funktionierts. Göddin – ein extra-Layout in je zwei Ausführungen (groß/klein) für ie8+9 und ie10+11 – und alle anderen Browser sind mit _einem_ Layout zufrieden (hin und wieder ne Vorsilbe dazu, ok..), das in allen Größen funktioniert? Der Begriff “Größenwahn” kommt auf jeden Fall vom IE…
Was ich aber eigentlich sagen wollte: Danke! Du hast mir den Tag gerettet. Und vermutlich auch meinen Verstand. 🙂
Huhu Zauberweib,
freut mich, dass du in den Tiefen des Interwebz doch noch eine Lösung für dein Problem finden konntest 🙂
Schöne Grüße, Krony
Ihr seid großartig – your absolutely great! Saved me hours to optimize the HTML audio tag for IE (why the hell is it that big and ugly on IE? May be MS is kinda deaf and blind and needs huge controls?) Thanks a million!
Thread closed