[wp-trac] [WordPress Trac] #43197: Nesting @media rule inside @supports rule fails CSS validation

[WordPress Trac]

#43197: Nesting @media rule inside @supports rule fails CSS validation
-------------------------------------------------+-------------------------
 Reporter:  neoqueto                             |      Owner:
     Type:  defect (bug)                         |     Status:  new
 Priority:  normal                               |  Milestone:  Awaiting
Component:  Customize                            |  Review
 Severity:  normal                               |    Version:  4.9.2
  Focuses:  ui, administration, coding-          |   Keywords:
  standards                                      |
-------------------------------------------------+-------------------------
 The CSS editor in the Customize panel returns 2 syntax errors when trying
 to insert a `@media` rule inside a `@supports` rule. It does work fine the
 other way around.

 See screenshot:
 [[Image(https://i.imgur.com/81b01Bp.png)]]

 Results are independent of specified properties & values.

 This might impact performance, because it is faster to skip the entire
 content of a feature query if a browser does not support a certain
 feature, rather than having multiple media queries with `@supports` in
 each of them. Besides, it can be functionally different, as explained
 here: https://stackoverflow.com/a/42438244

 Tested on Chrome 63 and Windows 7.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/43197>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform