ampproject / ampproject/amphtml

AMP validator issues warning for `@media` User Preference features.

Open
#40,384 11 comments 0 reactions 1 assignee Claimed by @erwinmombay View on GitHub
needs sizing Type: Bug Type: Feature Request
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

The AMP validator is flagging a warning for a CSS media query using the `not (prefers-reduced-motion: reduce)` syntax. While this syntax is valid in modern browsers, the AMP validator seems to have stricter parsing rules that cause it to be misinterpreted.

This issue impacts accessibility features, as the styles intended for users without a preference for reduced motion are not being applied correctly in the validated AMP version.

```css
@media not (prefers-reduced-motion: reduce) {
.wp-block-image amp-img.hide {
visibility: hidden;
}
}
```

### Reproduction Steps

1. Add the problematic CSS code to the tag of an AMP page.
2. Run the page through the official AMP validator (e.g., validator.ampproject.org).
3. Observe the "malformed media query" warning in the validation results.

You can find warnning on
1. https://beebom.com/nyt-strands-today-hints-answers-spangram-august-5-2024/amp/
2. https://wordpress.org/support/topic/gsc-reports-a-warning-for-style-amp-custom/

### Relevant Logs

```shell
CSS syntax error in tag 'style amp-custom' - malformed media query.
```

### Browser(s) Affected

_No response_

### OS(s) Affected

all

### Device(s) Affected

all

### AMP Version Affected

2507172035000

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.