WordPress.org
Get WordPress

Make WordPress Core

Opened 7 years ago

Last modified 4 years ago

#43197 new defect (bug)

Nesting @media rule inside @supports rule fails CSS validation

Reported by: neoqueto's profile neoqueto Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9.2
Component: Customize Keywords: dev-feedback
Focuses: ui, css, administration, coding-standards Cc:

Description

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:
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.

Change History (3)

#1 @westonruter
7 years ago

See also #42528. It's probably a bug with CSSLint.

#2 @westonruter
7 years ago

Or rather, see #43105.

#3 @celloexpressions
4 years ago

  • Focuses css added
  • Keywords dev-feedback added

Is there a Code Mirror update that includes validation for newer CSS features? Or is this something that can be fixed directly in core?

Note: See TracTickets for help on using tickets.