WordPress.org
Get WordPress

Make WordPress Core

Opened 9 years ago

Closed 16 months ago

#43197 closed defect (bug) (worksforme)

Nesting @media rule inside @supports rule fails CSS validation

Reported by: neoqueto Owned by:
Priority: normal Milestone:
Component: Customize Version: 4.9.2
Severity: normal Keywords:
Cc: Focuses: ui, css, administration, coding-standards

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 (4)

#1 @westonruter
9 years ago

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

#2 @westonruter
9 years ago

Or rather, see #43105.

#3 @celloexpressions
5 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?

#4 @westonruter
16 months ago

  • Keywords dev-feedback removed
  • Milestone Awaiting Review
  • Resolution → worksforme
  • Status new → closed

I'm not seeing any CSS validation errors in core currently with a nested at-rule, either in the Customizer or in the Theme File Editor.

Note: See TracTickets for help on using tickets.