-1

I know that I can detect IE 10+ with the following media query: 

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

I helps me write IE specific code if needed. The question is how do I write code for any other browser, except for IE10+? Something like if not @media ... { my code here }

PS: I know these are dirty tricks, but I am totally lost.

sdvnksv
  • 9,350
  • 18
  • 56
  • 108
  • You aren't going to be able to just tack on the not keyword like that, even if you put it in the right place which is *after* the @media token (before the and). The not keyword in media queries doesn't work like you might expect. Depending on whether "any other browser" includes IE9 and older, you might have to go a completely different route. – BoltClock Aug 05 '16 at 10:19
  • Depending on what exactly your different rules will be, you wouldn't need to: when specificity is the same, rules are applied in document order, i.e. the second rule wins – put your "other" rules first, and then your IE10 rules as you outline. – Ulrich Schwarz Aug 05 '16 at 10:21
  • @UlrichSchwarz, yeah I know that, but I have a quite complicated animation with transform that doesn't work in IE anyway. So it's gonna take a white to null all of those styles. – sdvnksv Aug 05 '16 at 10:24
  • If you update your question to detail exactly what you're trying to achieve, with the relaevant code you've written so far, we will be a lot better able to offer you solutions to your particular issue. For example, the answers to [this question](http://stackoverflow.com/questions/33359157/) may be of use to you, – Shaggy Aug 05 '16 at 10:45

1 Answers1

0

The simplest thing would be to declare the common styles and styles for all non-IE10+ browsers before that media query, then override them as necessary within the media query to make whatever changes IE10+ require.

If you need to target specific browsers these will get you anything Webkit and Firefox respectively:

@supports (-webkit-appearance:none) {
    Styles Go Here for Safari and Chrome
}

Firefox is a bit messier:

_:-moz-tree-row(hover), .classname {
    Styles Go Here
}

Repeated for each class/id/whatever

JBartus
  • 440
  • 3
  • 10