0

I'd like to apply a series of styles to browsers that meet two criteria:

  1. Are not Internet Explorer.
  2. Are a minimum of 1400px.

Individually I can handle each:

@supports(not (-ms-high-contrast:active))
@media(min-width: 1400px)

I'd like to do something like this though:

@media(min-width: 1400px) and @supports(not(-ms-high-contrast:active))

Does CSS allow for this in some way?

I've noticed that this can be done by nesting directives, but I'm hoping to find a cleaner and more readable solution.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Nathan Wiles
  • 841
  • 10
  • 30
  • This was marked as a duplicate of that question, but for your purposes it doesn't matter how you nest them since you only intend to apply styles when *both* conditions match. – BoltClock May 13 '18 at 03:35
  • I saw the question about nesting but was hoping do avoid doing that. I don't feel that it's a duplicate for that reason. – Nathan Wiles May 13 '18 at 03:42
  • You'll have to nest them as that's how the CSS grammar works, but I can reopen your question and post that as an answer. – BoltClock May 13 '18 at 03:44
  • I'd appreciate that just in case anyone else has ideas on a clean solution to this problem. I've edited the question to clarify. – Nathan Wiles May 13 '18 at 03:47
  • There’s nothing unclean about nesting them. (There *is* something unclean about detecting IE.) – Ry- May 13 '18 at 04:47
  • You got me with testing for IE not being clean, but that doesn't mean I have to keep doing what I see as sloppy coding. – Nathan Wiles May 13 '18 at 14:29

1 Answers1

2

At-rules such as @media, @supports and @keyframes are separate rules that cannot be grouped together by their at-keywords. That is, it's not possible to write a single rule with a single pair of curly braces that combines two different at-keywords as you are trying to do. So, unfortunately, nesting is your only option here.

The best you can do is write both statements — and their opening/closing braces — on the same lines:

@supports not (-ms-high-contrast: active) { @media (min-width: 1400px) {
}}

This is basically nesting them as shown in the linked question, minus the excess line breaks and indentation.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356